如何在 React Native 6.x 版中使用多个导航器

Question

我是原生反应的新手。我试图在我的应用程序中使用多个导航 - 底部标签导航和抽屉导航。我已成功添加底部标签导航，但当我尝试添加抽屉导航时出现错误：

“已为此容器注册了另一个导航器。您可能在单个“NavigationContainer”或“屏幕”下有多个导航器。确保每个导航器都位于单独的“屏幕”容器下。”

我想在我的应用中同时使用这两个导航器。

这是我的代码：

bottomTabs.js：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      component={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      component={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

drawerNavigation.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import "react-native-gesture-handler";

import home from "../screens/about";
import about from "../screens/home";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={home} />
      <Drawer.Screen name="About" component={about} />
    </Drawer.Navigator>
  );
}

app.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import BottomTabs from "./navigation/bottomTabs";
import DrawerNavigator from "./navigation/drawerNavigarion";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <BottomTabs></BottomTabs>
        <DrawerNavigator></DrawerNavigator>
      </NavigationContainer>
    </>
  );
}

这就是我想要的：

如果我想在图片示例中同时使用两者，我应该在我的代码中进行哪些更改？

Answer 1

要使用多个导航，您需要使用nesting。

参考：https://reactnavigation.org/docs/nesting-navigators/

例如： GitHub

修改：

App.js

    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>

抽屉导航.js

    import BottomTabs from "./navigation/bottomTabs";
    //...

    <Drawer.Navigator initialRouteName="Tab">
      <Drawer.Screen name="Tab" component={BottomTabs} />
    </Drawer.Navigator>

BottomTabs.js

    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="About" component={About} />
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="ReviewDetails" component={ReviewDetails} />
    </Tab.Navigator>