如何將多個導航器相互嵌套？ 即在抽屜導航器中嵌套底部選項卡並將抽屜導航器嵌套到堆棧導航器

Question

如何將抽屜導航器嵌套在底部選項卡導航器中並將兩者都嵌套在堆棧導航器中？ 我想確認這是否是正確且推薦的方法？ 我就是這樣做的

嵌套在 Stack Navigator 中的 Drawer 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>
  );
}

在抽屜導航器中嵌套底部選項卡導航器

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

先感謝您。

Answer 1

這是嵌套導航器的正確方法。 我在一些需要抽屜導航器的應用程序中使用了這種方式。