如何将多个导航器相互嵌套？ 即在抽屉导航器中嵌套底部选项卡并将抽屉导航器嵌套到堆栈导航器

Question

How to nest Drawer navigator within Bottom Tab navigator and nesting both within Stack navigator? I would like to confirm if this is the right and recommended approach to do it? This is how I did it

Drawer Navigator nested within Stack Navigator:

import DrawerNavigator from './DrawerNavigator';
const Stack = createStackNavigator();

function LoginStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Drawer" component={DrawerNavigator} />   {* Nesting here *}
    </Stack.Navigator>
  );
}

Nesting Bottom Tab Navigator within Drawer Navigator

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="ScreenA" component={ScreenA} />
      <Drawer.Screen name="BottomTab" component={BottomTabNavigator} /> {/* Nesting here */}
    </Drawer.Navigator>
  );
}

function BottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="ScreenB" component={ScreenB} />
      <Tab.Screen name="Profile" component={ProfileStackNavigator} />   {/* Nesting here */}
    </Tab.Navigator>
  );
}

function ProfileStackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenX" component={ScreenX} />
      <Stack.Screen name="ScreenY" component={ScreenY} />
    </Stack.Navigator>
  );
}

Thank you in advance.

Answer 1

This is a correct approach to nest navigators. I have used this way in some apps that needed a drawer navigator.