React Native中createBottomTabNavigator无法运行问题求助

问题描述 #

刚学习React Native，使用createBottomTabNavigator时完全无法工作，运行React Navigation官方示例代码后，应用仅显示带图标的白屏，无任何报错信息，2-3分钟后Expo崩溃。项目依赖如下：

"dependencies": {
  "@react-native-masked-view/masked-view": "0.2.9",
  "@react-navigation/bottom-tabs": "^6.5.8",
  "@react-navigation/native": "^6.1.7",
  "@react-navigation/stack": "^6.3.17",
  "expo": "~49.0.11",
  "expo-status-bar": "~1.6.0",
  "react": "18.2.0",
  "react-native": "0.72.4",
  "react-native-gesture-handler": "~2.12.0",
  "react-native-safe-area-context": "4.6.3",
  "react-native-screens": "~3.22.0"
}

使用Expo CLI在iPhone X真机运行，通过Snack连接手机可正常运行，确定是本地依赖或配置问题。

解决方案 #

• 清除Expo缓存：运行expo r -c强制清除项目缓存并重启，这是解决Expo依赖缓存冲突最常用的方法。
• 重新安装依赖：
  1. 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件
  2. 执行npm install（或yarn install）重新安装所有依赖，确保依赖树没有损坏
• 更新Expo Go：检查iPhone上的Expo Go应用是否为最新版本，旧版本可能与Expo 49存在兼容性问题，导致运行异常。
• 尝试模拟器运行：在iOS模拟器中运行项目，排查是否为真机特定的连接或权限问题。如果模拟器运行正常，可尝试重新连接真机，或重启手机后再试。
• 检查babel配置：如果项目自定义了babel.config.js，确保配置正确，Expo项目默认配置如下，可对比检查：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

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