组合TabNavigator和DrawerNavigator [英] Combine TabNavigator and Drawernavigator

问题描述

我使用了反应导航，并希望将TabNavigator和DrawerNavigator一起使用。我知道您可以嵌套导航器，但是只有一个抽屉链接有"我的标签"。

我希望选项卡导航始终可见，并且抽屉应该可用。

Drawer slides over tabs

因此，顶部的三个选项卡应该始终可见。抽屉可以滑出来连接不同的场景。

const CustomTabRouter = TabRouter({
  Tab1: {
    screen: Tab1,
    path: '1',
  },
  Tab2: {
    screen: Tab2,
    path: '2',
  },
  Tab3: {
    screen: Tab3,
    path: '3',
  },
}, {
  initialRouteName: 'Tab2',
})

const TabNavigation = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
)

const AppNavigation = DrawerNavigator({
  Home: {
    screen: TabNavigation
  },
  ScreenOne: {
    screen: ScreenOne
  },
  ScreenTwo: {
    screen: ScreenTwo
  },
}, {
  headerMode: 'none',
  initialRouteName: 'Home',
  drawerPosition: 'right',
  contentComponent: props => Slider(props),
  contentOptions: {
    inactiveTintColor: Colors.primary,
    activeTintColor: Colors.orange,
    activeBackgroundColor: Colors.white
  },
})

但我的代码的问题是选项卡只用于一个场景。我也尝试过StackNavigator，但必须是另一个解决方案才能同时使用这两个导航器。

推荐答案

如果需要使选项卡始终可见，则需要将选项卡导航用作顶级路由器，并在该嵌套中使用其他导航选项。

这篇关于组合TabNavigator和DrawerNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！