如何在结合使用 createStackNavigator 和 create createDrawerNavigator 时设置默认屏幕答案

【问题标题】：How can i set a default screen in using createStackNavigator combined with create createDrawerNavigator如何在结合使用 createStackNavigator 和 create createDrawerNavigator 时设置默认屏幕
【发布时间】：2020-01-05 19:05:54
【问题描述】：

我正在设置我的 react-native 应用程序的路线，并尝试将 createStackNavigator 和 createDrawerNavigator 结合起来。因此，我抽屉中的一个屏幕是 stackNavigator（例如：主页、新闻、图像。其中 Images 是 stackNavigator）并且 stackNavigator 有另外两个屏幕（例如：Feed 和 Grid），我试图将 Feed 设置为默认屏幕，所以我总是被重定向到 Feed。

我试过类似：initialRouteName: 'Feed'

但是如果导航到网格而不是导航到抽屉中的某个屏幕，然后返回到“图像”，它会打开网格而不是提要

const ImagesTab = createStackNavigator(
    {
        Feed: { screen: Feed },
        Grid: { screen: Grid },
    },
    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    }
)

const AppDrawer = createDrawerNavigator({

    home: { screen: Home },
    news: { screen: News },
    images: { screen: ImagesTab },
    galeria: { screen: AppTabNavigator },
},
    {
        contentComponent: DrawerContent
    }
);

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您应该设置 initialRouteName 两个导航器。

const ImagesTab = createStackNavigator(
    {
        Feed: { screen: Feed },
        Grid: { screen: Grid },
    },
    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        },
        initialRouteName: 'Feed'
    }
)

const AppDrawer = createDrawerNavigator({

    home: { screen: Home },
    news: { screen: News },
    images: { screen: ImagesTab },
    galeria: { screen: AppTabNavigator },
},
    {
        contentComponent: DrawerContent,
        initialRouteName: 'images'
    }

);

【讨论】：

我的抽屉初始路由是'home'
抱歉，我知道您希望每当您回到抽屉时，打开 Feed 屏幕。所以，这就足够了：codeconst ImagesTab = createStackNavigator( { Feed: { screen: Feed }, Grid: { screen: Grid }, }, { headerMode: 'none', navigationOptions: { headerVisible: false, }, initialRouteName : '饲料' } ) code
你应该定义一个根导航器，它是一个堆栈导航器。 github.com/react-navigation/react-navigation/issues/…

【解决方案2】：

我不知道你是否在这个问题上得到了你想要的。但我认为在这里删除一些资源可能会帮助以后遇到这个问题的人。

问题是你必须使用我们所说的嵌套导航，你可以参考这个官方文档 react navigation https://reactnavigation.org/docs/nesting-navigators 并阅读本节https://reactnavigation.org/docs/drawer-based-navigation

【讨论】：