Expo Drawer与@react-navigation/material-top-tabs导航冲突求助

问题根源 #

你遇到的错误是因为Expo的Drawer导航（expo-router提供）和createStaticNavigation生成的标签导航各自创建了NavigationContainer，而React Navigation要求整个App只能有一个根NavigationContainer，嵌套就会触发这个报错。

方案一：直接集成，无需重构 #

不用createStaticNavigation，直接在history页面里渲染标签导航——外层的Expo Drawer已经提供了根NavigationContainer，内层导航不需要再创建独立容器。

修改你的app/history/index.tsx（对应_drawer里的history路由）：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HistoryDay from './day';
// 导入其他标签页组件

const Tab = createMaterialTopTabNavigator();

export default function HistoryScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Day" component={HistoryDay} />
      {/* 添加其他标签页 */}
    </Tab.Navigator>
  );
}

修改后，标签导航会作为history页面的子组件，共享外层Expo Drawer的NavigationContainer，既不会报错，也能正常使用导航功能，还能保留原有抽屉逻辑。

方案二：重构为react-navigation原生抽屉导航（适合项目早期） #

如果项目还在初期，完全可以统一用react-navigation的导航体系，避免混合Expo和react-navigation导航可能带来的后续兼容问题。

步骤1：替换根布局为react-navigation抽屉 #

修改app/_layout.tsx：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HistoryScreen from './history';
// 导入其他页面组件

const Drawer = createDrawerNavigator();

export default function Layout() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen 
          name="History" 
          component={HistoryScreen}
          options={{ drawerLabel: 'History', title: 'History' }}
        />
        {/* 添加其他抽屉页面 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

步骤2：标签导航写法不变 #

history页面的标签导航可以继续用createMaterialTopTabNavigator，写法和方案一一致——现在根容器是react-navigation的NavigationContainer，内层导航可以直接嵌套。

方案选择建议 #

• 如果只是给单个页面加标签导航，方案一成本最低，不用改动原有抽屉逻辑，改几行代码就能解决。
• 如果项目后续会用到更多react-navigation的高级功能，或者想统一导航体系，方案二更适合长期维护，毕竟早期重构成本很低。

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