使用@react-navigation/bottom-tabs出现unknown module undefined错误如何解决

你遇到的报错本质是React Navigation 6.x版本依赖不兼容、新旧版本导航库混用导致的模块加载失败，具体原因如下：

• 你安装的@react-navigation/native版本为6.0.2，版本过低，该版本还未内置@react-navigation/elements依赖，而你所用的@react-navigation/bottom-tabs等新版导航器依赖@react-navigation/elements中的ResourceSavingView组件，导致模块加载失败。
• 项目同时安装了React Navigation 4.x（react-navigation、@types/react-navigation）和6.x两个大版本的导航库，版本冲突导致模块解析异常。
• 依赖中存在无用的undefined包，会干扰正常模块识别逻辑。

1. 清理冲突和无用依赖
   执行以下命令卸载冲突包：

npm uninstall react-navigation @types/react-navigation undefined @react-navigation/native @react-navigation/bottom-tabs @react-navigation/material-bottom-tabs @react-navigation/stack

如果使用yarn，将npm uninstall替换为yarn remove即可。

2. 重新安装兼容版本的导航依赖
   执行以下命令安装最新稳定版的6.x导航相关依赖：

npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/material-bottom-tabs @react-navigation/stack

安装完成后@react-navigation/elements会作为@react-navigation/native的依赖自动安装，无需额外手动安装。

3. 清理缓存重启项目

• 终止当前正在运行的Metro服务
• 执行命令启动Metro并清理缓存：

npx react-native start --reset-cache

• 安卓端可额外清理构建缓存：

cd android && ./gradlew clean && cd ..

• 重新运行项目即可解决报错。

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