React Navigation V6底部标签导航报错：TypeError: undefined is not a function

错误原因排查 #

报错 TypeError: undefined is not a function，堆栈追踪指向 MaybeScreenContainer（属于BottomTabView组件），这类问题大多由依赖缺失、重复导航容器或组件导出错误导致。

修复步骤 #

1. 补全依赖并确保版本兼容 #

React Navigation V6 需要配套的原生依赖支持，执行以下命令安装所有必要包：

# npm 用户
npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

# yarn 用户
yarn add @react-navigation/native @react-navigation/bottom-tabs
yarn add react-native-screens react-native-safe-area-context

安装完成后重启 Metro 服务和应用。

2. 移除重复的 NavigationContainer #

你的 tabNavigation 组件已经包含了 NavigationContainer，检查 App 组件中是否重复嵌套了该容器。比如如果 App.js 里有类似下面的代码：

import tabNavigation from './navigation/tabNavigation';
import { NavigationContainer } from '@react-navigation/native';

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

这种重复嵌套会引发冲突，必须删除 App 组件中的 NavigationContainer，只保留 tabNavigation 里的那一个实例。

3. 检查页面组件的导出方式 #

确认 Home、Auth、Bucket、Menu 组件都是默认导出，比如 Home.js 应该写成：

export default function Home() {
  // 组件内容
}

如果是命名导出（如 export function Home()），需要修改导入语句为 import { Home } from '../views/Home'，否则 Tab.Screen 的 component 属性会接收到 undefined，触发错误。

4. 清除缓存并重建项目 #

缓存问题也可能导致这类错误，执行以下命令清理缓存：

# 重置 Metro 缓存
npx react-native start --reset-cache

# Android 清理构建缓存
cd android && ./gradlew clean && cd ..

# iOS 清理 Pod 缓存并重新安装
cd ios && pod deintegrate && pod install && cd ..

之后重新运行应用即可。

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