结合 TabNavigator 和 Drawernavigator

Posted 2023-02-23

【中文标题】结合 TabNavigator 和 Drawernavigator

【英文标题】：Combine TabNavigator and Drawernavigator

【发布时间】：2017-12-22 00:35:03

【问题描述】：

我使用 react-navigation，想同时使用 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
  ,
)

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

【参考方案1】：

如果您需要让标签始终可见，则需要使用 TabNavigation 作为您的***路由器，并在其中嵌套其他导航选项。