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

Question

我是 React Native 的新手。我试图在我的应用程序中使用多个导航 - 底部选项卡导航和抽屉导航。我已成功添加底部选项卡导航，但当我尝试添加抽屉式导航时出现错误：

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

我想在我的应用程序中使用这两个导航器。

这是我的代码：

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>

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

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

How to use Multiple Navigators in React Native version 6.x

javascript

navigation-drawer

reactjs

react-native

react-navigation

修改：