代码之家  ›  专栏  ›  技术社区  ›  Rathma

反应导航组成多个导航

  •  0
  • Rathma  · 技术社区  · 6 年前

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

    1. 设置
    2. 信息

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

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

    我的问题是,我应该始终将选项卡导航和抽屉导航作为主堆栈导航器中的一个屏幕?

    对于drawer navigator,同样的问题是,我是否应该在drawernavigator中包含我的tab navigator?

    我的参考链接是:

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

    1 回复  |  直到 6 年前
        1
  •  0
  •   Kajal Mittal    6 年前

    不,您只需要将选项卡导航作为一个屏幕包含到主堆栈导航器和DrawerNavigator中,将Stack Navigator作为一个屏幕包含进来。

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