如何在反应原生导航 Wix V2 中从侧边菜单导航到页面

Posted

技术标签:

【中文标题】如何在反应原生导航 Wix V2 中从侧边菜单导航到页面【英文标题】:How navigate to a page from side menu in react native navigation Wix V2 【发布时间】:2019-02-07 16:35:56 【问题描述】:

我是 React Native 的新手。我想从侧面菜单导航到屏幕。我使用了 react-native-navigation Wix V2 库。如果有人能帮我举一个简单的例子,我将不胜感激。

【问题讨论】:

【参考方案1】:

首先你需要为sideMenu的中心栈设置ID。例如:

Navigation.events().registerAppLaunchedListener(() => 
Navigation.setRoot(
    root: 
        sideMenu: 
            right: 
                component: 
                    name: 'SideMenu',
                ,
            ,
            center: 
                stack: 
                    id: 'STACK_ROOT_ID',
                    children: [
                        
                            component: 
                                name: 'Login',
                            ,
                        ,
                    ],
                ,
            ,
        ,
    ,
);

然后在您的侧边菜单中,您可以像这样在 onPress 菜单上推送您的注册屏幕。像这样:

Navigation.push('STACK_ROOT_ID', 
    component: 
        name: 'REGISTERED_SCREEN_NAME',
        options: 
            sideMenu: 
                right: 
                    visible: false,
                ,
            ,
        ,
    ,
);

【讨论】:

【参考方案2】:

有一个内置导航供 react native 使用,因为它提供了 react-native 导航(堆栈导航)。因为可以轻松地从侧面菜单进行导航

// 下面是创建侧边菜单的代码。

const RootDrawer = DrawerNavigator(
  demo:  screen: demo ,
  demo2:  screen: demo2 ,
  
, 
  contentComponent: NavigationDrawer
)

// 下面是侧面菜单视图和提供的用于从屏幕导航的链接。

 <TouchableOpacity onPress = () => this.props.navigation.navigate('demo')>
          <View style = height: responsiveHeight(8), justifyContent:'center'>
            <Text style = fontSize: responsiveFontSize(2), color: 'black', fontFamily: 'Nunito-Regular', paddingLeft: 30  >My Cart</Text>
          </View>
        </TouchableOpacity>
        
        this.state.customer &&
          <TouchableOpacity onPress = () => this.props.navigation.navigate('demo1')>
                  <View style = height: responsiveHeight(8), justifyContent:'center'>
                    <Text style = fontSize: responsiveFontSize(2), color: 'black', fontFamily: 'Nunito-Regular', paddingLeft: 30  >Account</Text>
                  </View>
          </TouchableOpacity>

【讨论】:

以上是关于如何在反应原生导航 Wix V2 中从侧边菜单导航到页面的主要内容,如果未能解决你的问题,请参考以下文章

覆盖后退按钮 wix 反应原生导航 V2?

反应原生,侧边菜单没有出现

在使用 setRoot 时渲染 flash 或推入反应原生导航

如何在主页中打开后退按钮 android 以退出应用程序并关闭反应本机导航侧菜单

在 ionic 4 中从单页视图导航到侧面菜单布局

是否可能带有子页面的反应导航抽屉?