Question

想象一下我的应用程序具有三种状态：

首页
设置
消息

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

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

反应导航组成多个导航

1 个答案: