React Native 6.x底部标签导航与抽屉导航共存实现及报错修复方案

Hey there! Let's sort out that navigation error you're seeing. The issue is exactly what the error message says—you can't have two separate navigators (your bottom tabs and drawer) directly sitting under a single NavigationContainer. React Navigation expects a single top-level navigator under the container, with other navigators nested inside its screens.

Here's how to restructure your code to make both navigators work together smoothly:

Step 1: Correct Typos & Import Mistakes #

First, let's fix a couple of small issues in your existing code:

• In drawerNavigation.js, you imported home as the about screen and vice versa—swap those.
• In app.js, you have a typo: drawerNavigarion should be drawerNavigation.

Step 2: Nest Bottom Tabs Inside the Drawer Navigator #

We'll make the Drawer Navigator the top-level navigator, and add your Bottom Tabs as one of its screens. You can also keep other standalone screens in the drawer if needed.

Updated bottomTabs.js #

This stays mostly the same—we're just keeping it as a self-contained tab navigator:

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 
      name="Home" 
      component={home} 
      options={{ title: "Home" }} 
    />
    <Tab.Screen 
      name="ReviewDetails" 
      component={reviewDetails}
      options={{ title: "Review Details" }} 
    />
  </Tab.Navigator>
);

export default AppNavigator;

Updated drawerNavigation.js #

Now we'll import the Bottom Tabs navigator and use it as a screen in the drawer. We can also add other standalone screens if you want:

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import BottomTabs from "./bottomTabs";
// Import any other standalone screens you want in the drawer
// Example: import Settings from "../screens/settings";

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
  return (
    <Drawer.Navigator initialRouteName="MainTabs">
      {/* The bottom tabs are now a single screen in the drawer */}
      <Drawer.Screen 
        name="MainTabs" 
        component={BottomTabs}
        options={{ title: "Home & About" }} 
      />
      {/* Add other standalone drawer screens here if needed */}
      {/* <Drawer.Screen name="Settings" component={Settings} /> */}
    </Drawer.Navigator>
  );
}

Updated app.js #

Now we only render the Drawer Navigator under the NavigationContainer—since the drawer contains the bottom tabs, we don't need to include both directly:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import DrawerNavigator from "./navigation/drawerNavigation";

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

How This Works #

• The NavigationContainer wraps our single top-level navigator (the drawer), which follows React Navigation's rules.
• The drawer includes your bottom tabs as one of its entries—when users select "MainTabs" from the drawer, they'll see the bottom tab bar and can navigate between Home/About/Review Details.
• You can easily add more screens directly to the drawer (like Settings) if you want them outside the tab structure.

If you prefer to have the bottom tabs as the top-level and the drawer accessible from within the tabs, you can reverse the nesting (put the drawer inside a tab screen)—but the above structure is the most common and intuitive for most apps.

内容的提问来源于stack exchange，提问作者MartynBrzoz