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

Question

我创建了3个堆栈导航器，HomeStack，PermissionsStack和AppStack。我有他们在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，而是转到Explore。在onPress上按钮的Home是this.props.navigation.navigate('TOU')。这不正确吗？

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

Answer 1

你多次注册相同的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 }
});