react-navigation 组成多个导航

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

不，您只需要将选项卡导航作为屏幕包含到主 Stack Navigator 和 DrawerNavigator 中，将 StackNavigator 作为屏幕包含。

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

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