android - 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 },
    }
);