React Native 0.64.2项目通过Xcode 12.5在真机构建运行失败

问题描述 #

全新React Native 0.64.2项目无法通过Xcode 12.5在物理设备上运行，使用npx react-native run-ios命令可正常运行，仅在通过Xcode在真机构建测试时出现问题。测试设备为iPhone 8 Plus，系统版本为iOS 14.6。

报错信息 #

cp: /Users/uktamhamidov/Library/Developer/Xcode/DerivedData/SQRE-arjlqbohgbkkananywponwudfhts/Build/Products/Debug-iphoneos/main.jsbundle: No such file or directory
Command PhaseScriptExecution failed with a nonzero exit code

报错截图 #

根因说明 #

npx react-native run-ios命令执行时会自动触发js代码打包逻辑生成main.jsbundle，直接通过Xcode构建时，默认的Debug模式真机构建不会自动触发js打包流程，导致拷贝资源阶段找不到对应的jsbundle文件。

解决方案 #

按以下步骤操作即可解决：

• 第一步：在项目根目录执行命令手动生成jsbundle和资源文件

  npx react-native bundle --entry-file index.js --platform ios --dev true --bundle-output ios/main.jsbundle --assets-dest ios
  

  命令中--dev true表示保留Debug模式调试能力，无需修改为false。
• 第二步：打开Xcode项目，右键点击左侧项目根目录，选择「Add Files to [你的项目名]」，将ios目录下新生成的main.jsbundle和assets文件夹添加到项目中，添加时勾选Copy items if needed和对应的项目target。
• 第三步：检查Xcode Build Phases配置
  找到「Bundle React Native code and images」阶段，确认脚本内容如下：

  export NODE_BINARY=node
  ../node_modules/react-native/scripts/react-native-xcode.sh
  

  同时确认该阶段的排序在「Copy Bundle Resources」阶段之前，避免资源拷贝时jsbundle还未生成。
• 第四步：清空缓存重试
  按Command+Shift+K清空Xcode构建缓存，删除DerivedData目录下的对应项目文件夹，重连设备后重新构建即可。

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