How to use drawer navigator and tab navigator simultaneously?

问题

This is my tab navigator:

<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>

This is DrawerNavigator:

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

And this is my root navigator: Below Bottomnavigation is the tab navigator.

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

回答1:

I recommend you to make your TabNavigator a screen of DrawerNavigator

You can do something like this:

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>
  );
};

If you want to open your drawer, you can call navigation.openDrawer() in your TabNavigator.

Update to address label issue

You can create a drawer content component to override the default behavior of adding the DrawerNavigator screens' labels as the content of the drawer.

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

Then you need to change the DrawerNavigator to this:

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

So you can add new screens to your DrawerNavigator and navigate to them using the DrawerItem onPress function.

Of course make sure to import DrawerContentScrollView, DrawerItemList and DrawerItem from @react-navigation/drawer.

For more info look at: https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

来源：https://stackoverflow.com/questions/63014758/how-to-use-drawer-navigator-and-tab-navigator-simultaneously