反应导航不导航到正确的屏幕

时间:2018-09-07 17:44:16

标签: android ios react-native react-navigation

我创建了3个堆栈导航器,分别为HomeStackPermissionsStackAppStack。我将它们放在drawerNavigator中,如下所示:

export const Drawer = DrawerNavigator({
    Home: { screen: HomeStack, navigationOptions: {drawerLabel:() => null} },
    Permissions: { screen: PermissionsStack, navigationOptions: {drawerLabel:() => null} },
    Explore: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Explore'} },
    ContactScreen: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Contact & Support'} },
    TOU: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Terms of Use'} },
    Privacy: { screen: AppStack, navigationOptions: {drawerLabel:() => 'Privacy Policy'} },
    Disclaimer: { screen: AppStack },
    Settings: { screen: AppStack, navigationOptions: {drawerLabel:() => null} },
});

Home屏幕上,有一个指向TOU的链接,但没有链接到TOU,而是链接到ExploreonPress上按钮的Homethis.props.navigation.navigate('TOU')。这不正确吗?

您可以自己运行此项目并在此处查看问题:https://gitlab.com/jefffabiny/navigation-issue

1 个答案:

答案 0 :(得分:0)

您多次注册相同的StackNavigators
AppStack的初始路由为Explore

我从没使用过DrawerNavigator,但您应该像这样嵌套导航器:

export const Drawer = DrawerNavigator({
    Home: { screen: HomeStack },
    Permissions: { screen: PermissionsStack },
    App: { screen: AppStack },
});

我不知道您到底想实现什么目的,但是如果您想从抽屉访问TOU,而不仅是在Stack内,您可以这样做:

const AppStack = createStackNavigator({
    ...
    TOU: {
        screen: TOU,
        navigationOptions: ({ navigation }) => ({
            title: 'Terms of Use',
        })
    },
    ...
});

export const Drawer = DrawerNavigator({
    Home: { screen: HomeStack },
    Permissions: { screen: PermissionsStack },
    App: { screen: AppStack },
    TOU: { screen: TOU }
});