反应导航组合多个导航

Question

假设我的应用程序中有三种状态：

1. 首页
2. 设置
3. 消息

我想在屏幕底部显示到这些状态的前两个链接，我可以通过以下代码实现这一点：

const routeConfig = {
    Profile: {
        screen: Profile
    },
    Setting: {
        screen: Setting
    }
};

我导出它作为我的根组件，下面是：

const TabBottomNavigator = createBottomTabNavigator(routeConfig);

现在我想显示第三个链接，在抽屉导航中显示消息，我看到人们使用以下代码进行操作：

const drawerRouteConfigs = {
    Home: {
        screen: TabNavigator,
    },
    Messages: {
        screen: Messages,
    }   
};

const drawerNavigator = createDrawerNavigator(drawerRouteConfig);

而抽屉导航员的代码是：

const stackRouteConfigs = {
    DrawerNavigator: {
        screen: DrawerNavigator
    }
};

const stackNavigatorCofig = {
    initialRouteName: 'DrawerNavigator',
    headerMode: 'none'
};

const StackNavigator = createStackNavigator(stackRouteConfigs, stackNavigatorCofig);

我的问题是，应该始终将选项卡导航和抽屉导航作为主堆栈导航器中的屏幕吗？

同样的问题，抽屉导航员，我是否应该包括我的标签导航员在我的抽屉导航员？

我的参考链接是：

https://github.com/quangvietntd/AppBanHangReactNative/blob/master/App.js

Answer 1

不，您只需要将选项卡导航作为屏幕包括到主堆栈导航器和DrawerNavigator中，包括StackNavigator作为屏幕。

const AppWithSlideMenu = DrawerNavigator(
    {
        App: { screen: MainStackNavigator }
    },
    {
        contentComponent: Scenes.SlideMenuScene,
        drawerWidth: Dimensions.get('window').width * 0.88
    }
);

const MainStackNavigator = StackNavigator(
    {
    TabBar: { screen: TabBar },
    }
);