React Native 0.75.3：如何无Metro连接运行开发版应用？

核心原因 #

React Native 0.74+版本调整了开发构建的默认逻辑：默认debug构建依赖Metro服务器加载bundle，同时Hermes调试模式的默认配置也强制绑定了Metro，导致离线状态下无法正常运行。

Android 端修改步骤 #

1. 调整build.gradle配置
   打开android/app/build.gradle，在buildTypes的debug块中添加离线bundle的资源配置，同时保留Hermes的调试源码映射：

   buildTypes {
       debug {
           // 保留原有debug配置（如signingConfig等）
           resValue "string", "bundleAssetName", "index.android.bundle"
           hermesFlags = ["-O", "-output-source-map"] // 保留调试所需的源码映射
       }
   }
   

2. 预打包开发模式离线bundle
   执行以下命令生成带调试信息的离线bundle，并放到Android项目的assets目录：

   npx react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
   

   注意：后续修改代码后，若要离线运行，需重新执行此命令更新bundle。

3. 验证AndroidManifest配置
   检查android/app/src/main/AndroidManifest.xml，确保没有强制跳转Metro的自定义逻辑，默认配置无需额外修改。

iOS 端修改步骤（若需适配） #

1. 调整Podfile配置
   打开ios/Podfile，确保Hermes在debug模式下的配置支持离线bundle：

   use_react_native!(
     :path => config[:reactNativePath],
     :hermes_enabled => true,
     :fabric_enabled => false,
     :app_path => "#{Pod::Config.instance.installation_root}/.."
     # 保留其他原有配置
   )
   

2. 预打包iOS开发模式bundle
   执行命令生成iOS的离线bundle：

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

3. Xcode配置验证
   在Xcode中打开iOS项目，确保debug target的Build Phases中包含Bundle React Native code and images步骤，或手动将生成的main.jsbundle添加到项目资源中。

关键说明 #

• 修改后，debug构建会包含带调试信息、错误警告提示的开发版bundle，无需连接Metro即可独立运行，与0.72.x版本行为一致。
• 每次代码变更后，仅需重新生成bundle并重新构建应用，耗时远低于生产构建。
• 此问题与Flipper无关，无需调整Flipper相关配置。

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