react-native - 如何同时使用抽屉导航器和标签导航器？

Question

这是我的标签导航器：

<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
  <Tab.Screen
    name="Science"
    component={Science}
    options={{
      tabBarLabel: 'Science',
      tabBarIcon: ({color, size}) => (
        <Image source={require('../../assets/images/science-tab.png')} />
      ),
    }}
  />
  <Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>

这是抽屉导航器：

<Drawer.Navigator initialRouteName="Home">
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>

这是我的根导航器：底部导航下方是选项卡导航器。

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="BottomNavigation"
      component={BottomNavigation}
      options={{title: this.createTitle()}}
    />
  </Stack.Navigator>
</NavigationContainer>

标签： react-nativereact-navigation

Answer 1

我建议你制作TabNavigator一个屏幕DrawerNavigator

你可以这样做：

function TabNavigator({navigation}) {
  return (
    <Tab.Navigator>
      // Your tab screens
    </Tab.Navigator>
  );
}

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="TabNavigator" component={TabNavigator} />
    </Drawer.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="DrawerNavigator" component={DrawerNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

如果你想打开你的抽屉，你可以调用navigation.openDrawer()你的TabNavigator.

更新以解决标签问题

您可以创建一个抽屉内容组件来覆盖将DrawerNavigator屏幕标签添加为抽屉内容的默认行为。

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      // ...
    </DrawerContentScrollView>
  );
}

然后您需要将其更改DrawerNavigator为：

function DrawerNavigator({route}) {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="TabNavigator" component={TabNavigator} />
      <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
  );
}

因此，您可以将新屏幕添加到 DrawerNavigator 并使用DrawerItemonPress 函数导航到它们。

当然要确保 importDrawerContentScrollView和DrawerItemListfrom DrawerItem。@react-navigation/drawer

有关更多信息，请查看：https ://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent 。