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

【问题标题】：Is there a possibility of nesting tab navigator inside a drawer navigator in react-native?是否有可能在 react-native 的抽屉导航器中嵌套选项卡导航器？
【发布时间】：2019-12-12 10:34:11
【问题描述】：

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

【问题讨论】：

你想在哪里实现 Tab navigator？
嗨。我想在抽屉里实现 Tab 导航器。
reactnativecode.com/show-tab-navigator-inside-drawer-navigator 。这有帮助吗？

标签： react-native react-navigation react-navigation-drawer react-native-tabnavigator

【解决方案1】：

要覆盖整个屏幕，您可以将drawerWidth 设置为屏幕的宽度。请参阅 react native 文档中的 how to get the screen width

您可以使用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
  }
)

见documentation

【讨论】：

【解决方案2】：

同样的问题。首先，我无法在 Drawer Navigation 中设置 Tab Navigation。

为此，我使用了“React Native Tab View”，您可以从“https://www.npmjs.com/package/react-native-tab-view”安装它，它对我有用。

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerComp {...props} />}>
  <Drawer.Screen name="MainStack" component={MainStack} />
</Drawer.Navigator>


export const CustomDrawerComp = (props) => {
  const {navigation} = props;
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'FIRST' },
    { key: 'second', title: 'SECOND' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={SceneMap({
        first: FirstTab,   << Add first tab view
        second: SecondTab,   << Add second tab view
      })}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
      />
  );
};

另外，使用后你可能会得到一个简单的错误“Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager”这很容易不用担心，你可以从"https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/1050"

我希望能帮助一些人。

Image Tabs inside Drawer Navigation

【讨论】：