React Native出现Unable to Load script报错 提示需运行Metro Server求助

基础必查项 #

• 确认Metro服务正常运行：新开终端执行npx react-native start，确认启动无报错后保持终端窗口不关闭，再重新启动项目
• 排查8081端口占用：Windows执行netstat -ano | findstr :8081，macOS/Linux执行lsof -i :8081，终止占用端口的进程，或启动Metro时指定其他端口npx react-native start --port 8082，运行APP时同步指定对应端口

安卓端专项排查 #

• 确认测试设备和开发电脑处于同一局域网，无代理、防火墙拦截请求
• 打开APP开发者菜单（真机摇一摇/模拟器按Ctrl+M/CMD+M），进入Settings → Debug server host & port for device，填写电脑本地IP加Metro端口，例：192.168.3.5:8081，重启APP
• 检查android/app/src/main目录下是否存在assets文件夹，不存在则手动创建，执行打包命令后重新运行：
  npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

iOS端专项排查 #

• 检查Xcode项目Build Phases配置中，Bundle React Native code and images脚本是否完整，缺失则补全对应官方脚本
• 清理Xcode缓存：执行rm -rf ~/Library/Developer/Xcode/DerivedData，进入ios目录重新执行pod install后运行项目
• 真机测试时确认设备和电脑连接同一WiFi，关闭电脑端VPN、代理后重试

全量缓存清理 #

上述步骤无效时可执行全量缓存清理后重试：

rm -rf node_modules package-lock.json yarn.lock
npm install
# iOS额外执行 cd ios && pod install && cd ..
npx react-native start --reset-cache

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