如何同时使用抽屉式导航器和标签式导航器？

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>

这是DrawerNavigator：

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

这是我的根导航器：Bottomnavigation下面是选项卡导航器。

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

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中，并使用DrawerItem onPress函数导航到它们。

当然，请确保从DrawerContentScrollView导入DrawerItemList，DrawerItem和@react-navigation/drawer。

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