Combine TabNavigator and Drawernavigator

Question

我使用 react-navigation，并希望同时使用 TabNavigator 和 DrawerNavigator。我知道您可以嵌套导航器，但是例如，抽屉的一个链接具有我的选项卡。

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

抽屉滑过标签

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

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，但必须同时使用这两个导航器是另一种解决方案。

Answer 1

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