如何将React Native应用安装到手机、修复Metro报错及实现离线运行

一、Metro服务已启动仍报错的修复方案 #

• 检查设备和开发机是否处于同一局域网，且没有被防火墙拦截。如果是安卓真机，首先执行adb reverse tcp:8081 tcp:8081端口映射命令，把手机的8081端口映射到开发机的8081端口，90%的同场景问题都是端口映射未配置导致的。
• 检查Metro服务是否占用默认8081端口，如果自定义了端口，需要在APP弹出的报错页点击「设置」，将调试服务器地址改为「开发机IP:自定义端口」，重新加载即可。
• 清除构建缓存重新打包，依次执行cd 项目根目录、./gradlew clean（安卓端清理）、npx react-native start --reset-cache重启Metro，再用Android Studio重新安装应用即可。
• 检查开发机是否开启代理软件，代理会导致本地端口转发失效，临时关闭代理后重试。

二、React Native应用是否必须依赖服务器运行 #

不是。开发阶段依赖Metro服务是为了支持热重载、实时调试等提升开发效率的功能，本质是实时拉取最新的JSBundle代码，避免每次改代码都重新编译原生包。正式发布的应用可以把JSBundle和静态资源都打包进原生安装包，完全不需要依赖外部服务器即可运行。

三、离线可用React Native应用的实现方式 #

• 安卓端离线打包方案：在项目根目录执行命令创建JSBundle文件和资源文件夹：

mkdir -p 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

执行完成后再用Android Studio打release包，生成的APK就内置了所有代码和资源，安装后不需要Metro服务也能离线运行。

• 本地持久化存储补充：如果应用需要离线存储用户数据，可以搭配AsyncStorage、SQLite或Realm等本地存储库，把需要的业务数据缓存到本地，断网时直接读取本地缓存即可实现全业务离线可用。

四、最优解决方案 #

• 开发调试场景：优先执行adb reverse tcp:8081 tcp:8081做端口映射，确认同局域网无防火墙拦截，重启带缓存清理的Metro服务即可解决当前报错，保留热调试能力提升开发效率。
• 发布/不需要调试的场景：按上述离线打包方案把JSBundle内置到原生包，直接打release包安装，完全不需要启动Metro服务，也能离线运行。

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