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

Question

我是反应原生的新手。我想从侧边菜单导航到屏幕。我使用了反应本机导航 Wix V2 库。如果有人能用一个简单的例子来帮助我，我将不胜感激。

Answer 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,
                },
            },
        },
    },
});

Answer 2

有一个

内置的导航供 react native 使用，因为它提供了 act-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>}