React Navigation下BottomTabNavigator与DrawerNavigator嵌套引发的NavigationContainer报错排查

• React Navigation 框架的强制规则：全应用仅允许在最顶层路由节点挂载1个NavigationContainer，它是整个导航树的全局状态管理入口，所有子导航器必须嵌套在这个唯一的Container内。
• 当前结构的违规点：
  • App.js 根节点已经正确挂载了全局NavigationContainer，包裹了抽屉导航
  • Passenger.js、Lovedones.js 组件内部又各自独立挂载了一个新的NavigationContainer，相当于在全局Container内部嵌了两层独立的导航容器，直接触发框架的内置校验逻辑抛出报错
• 附带的结构问题：
  • 两个组件里完全重复实现了相同的底部Tab导航逻辑，存在大量冗余代码
  • 因为两个Tab导航是独立实例，切换抽屉页面时Tab的选中状态会完全重置，没法满足“底部Tab在所有抽屉页面常驻展示”的需求
  • Lovedones.js 中存在变量名错误：默认导出的组件名误写为Passenger，会导致后续路由匹配异常

核心调整原则：全局仅保留1个根级NavigationContainer，移除所有子组件里的Container包裹，抽离公共Tab导航逻辑避免重复代码，调整嵌套层级让Tab导航在抽屉路由范围内常驻。

第一步：清理子组件的冗余代码 #

移除Passenger.js、Lovedones.js内的NavigationContainer引入和外层包裹，因为子导航器不需要独立的Container。
修正后的Passenger.js代码：

import React from 'react';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MapsScreen from './MapScreen';
import Driver from './Driver';
import Emergency from './EmergencyScreen';
import Account from './AccountScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default Passenger = () => (
  <Tab.Navigator 
    initialRouteName="Map"  
    tabBarOptions={{ activeTintColor: '#e91e63' }}
  >
    <Tab.Screen 
      name="Account" 
      component={Account} 
      options={{ 
        tabBarLabel: 'Account', 
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account-box" color="#000000" size={30} />
        ) 
      }}
    />
    <Tab.Screen 
      name="Driver" 
      component={Driver} 
      options={{ 
        tabBarLabel: 'Driver Details', 
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="card-account-details" color="#000000" size={30} />
        ) 
      }}
    />
    <Tab.Screen 
      name="Map" 
      component={MapsScreen} 
      options={{ 
        tabBarLabel: 'Map', 
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="map-marker" color="#0000FF" size={30} />
        ) 
      }}
    />
    <Tab.Screen 
      name="Emergency" 
      component={Emergency} 
      options={{ 
        tabBarLabel: 'Emergency', 
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="alarm-light" color="#FF0000" size={30} />
        ) 
      }}
    />
  </Tab.Navigator>
);

因为Lovedones逻辑和Passenger的Tab完全一致，不需要重复写一遍代码，后续可以直接复用同一个Tab导航组件，通过路由参数控制不同入口打开时的初始选中Tab页，减少维护成本。

第二步：优化App.js的路由嵌套结构 #

把原来的两个独立Tab组件替换为共享的Tab导航，保证Tab在抽屉导航覆盖范围内常驻展示，不会因为抽屉页面切换重置状态：

// App.js 修正后
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import CommonTabNavigator from './Passenger'; // 复用抽离的公共Tab导航

const Drawer = createDrawerNavigator();

export default App = () => (
  {/* 全局唯一的NavigationContainer仅在根节点挂载 */}
  <NavigationContainer>
    <Drawer.Navigator initialRouteName="Passenger">
      {/* 两个抽屉入口都指向同一个共享Tab导航 */}
      <Drawer.Screen 
        name="Passenger" 
        component={CommonTabNavigator} 
      />
      <Drawer.Screen 
        name="Lovedones" 
        component={CommonTabNavigator} 
      />
    </Drawer.Navigator>
  </NavigationContainer>
);

注意：报错提示里提到的independent={true}参数仅适合完全和父导航树断开的独立导航场景，加了之后会导致无法跨抽屉和Tab导航跳转，不符合你当前的嵌套需求，不要使用这个参数规避报错。

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