react-native - 是否有可能在 react-native 的抽屉导航器中嵌套选项卡导航器？

Question

是否有可能在 react-native 的抽屉导航器中嵌套选项卡导航器？当调用汉堡菜单图标时，我希望抽屉覆盖整个屏幕并在其中实现 Tab navigator。我需要一些帮助。

标签： react-nativereact-navigationreact-navigation-drawerreact-native-tabnavigator

Answer 1

要覆盖整个屏幕，您可以将 设置为drawerWidth屏幕的宽度。查看如何在 react native 文档中获取屏幕宽度

您可以使用contentComponent来呈现选项卡导航器：

import { createDrawerNavigator } from 'react-navigation-drawer'
import { Dimensions } from 'react-native'

import MyTabNavigator from 'path-to-my-tab-navigator'

const { width } = Dimensions.get('window')

const DrawerNavigator = createDrawerNavigator(
  {
    ... // screens 
  },
  {
    drawerWidth: width
    contentComponent: MyTabNavigator
  }
)

请参阅文档