Question

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

Answer 1

要覆盖整个屏幕，可以将drawerWidth设置为屏幕的宽度。请参阅React本机文档中的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

Answer 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

是否有可能将标签导航器嵌套在react-native的抽屉导航器中？

2 个答案: