React Native Navigation报错：容器已注册另一个导航器，如何同时使用TopTab与Drawer导航器

你遇到的报错是因为在同一个NavigationContainer（或单个Screen）下直接渲染了多个独立导航器，React Navigation不允许这种结构，每个导航器必须处于独立的导航上下文，或者通过嵌套方式组织。下面是两种可行的解决方式：

方案一：TopTab导航器作为Drawer的子屏幕（最常用结构） #

把TopTab封装成独立组件，作为Drawer导航器的一个屏幕内容，Drawer作为根导航：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Drawer = createDrawerNavigator();
const TopTab = createMaterialTopTabNavigator();

// 封装TopTab导航器
function TopTabNavigator() {
  return (
    <TopTab.Navigator>
      <TopTab.Screen name="TabPage1" component={TabPage1} />
      <TopTab.Screen name="TabPage2" component={TabPage2} />
    </TopTab.Navigator>
  );
}

// 根导航组件
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        {/* 将TopTab作为Drawer的一个选项 */}
        <Drawer.Screen name="MainTabs" component={TopTabNavigator} />
        {/* 可添加其他Drawer选项 */}
        <Drawer.Screen name="Settings" component={SettingsPage} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

方案二：Drawer导航器作为TopTab的子屏幕 #

如果业务需要TopTab作为根导航，某个标签页内嵌Drawer：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Drawer = createDrawerNavigator();
const TopTab = createMaterialTopTabNavigator();

// 封装Drawer导航器
function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="DrawerPage1" component={DrawerPage1} />
      <Drawer.Screen name="DrawerPage2" component={DrawerPage2} />
    </Drawer.Navigator>
  );
}

// 根导航组件
export default function App() {
  return (
    <NavigationContainer>
      <TopTab.Navigator>
        <TopTab.Screen name="Home" component={HomePage} />
        {/* 将Drawer作为TopTab的一个标签页 */}
        <TopTab.Screen name="DrawerTab" component={DrawerNavigator} />
      </TopTab.Navigator>
    </NavigationContainer>
  );
}

注意事项 #

• 禁止在同一个NavigationContainer下直接并列多个导航器，必须通过嵌套（一个作为另一个的屏幕组件）实现共存
• 除非业务特殊需求，否则不建议使用多个NavigationContainer（会导致导航状态完全隔离，无法共享路由信息）

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