React Native设备离线（WiFi/数据关闭）调试方案咨询

当然有靠谱的解决方案！我之前做离线加载特性测试时，也被npm server的红屏烦过，下面这几种方法亲测好用，能让你在完全离线的设备上调试：

1. 生成本地离线Bundle包调试 #

这是最直接的方式，把应用的JS代码和资源打包成本地文件，让应用直接加载本地内容，彻底摆脱npm server依赖：

• 生成Bundle命令：

  • 针对iOS：

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

  • 针对Android：

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

    这里--dev true会保留调试信息，方便你排查问题；如果要测试生产环境的离线表现，改成--dev false即可。

• 配置应用加载本地Bundle：

  • iOS：生成bundle后直接用Xcode运行项目，默认会优先加载本地的main.jsbundle，无需额外修改代码。
  • Android：生成bundle后，用Android Studio运行或执行react-native run-android，应用会自动读取assets目录下的本地bundle文件。

完成后断开设备的WiFi和数据，应用就能正常启动，还能通过摇一摇打开开发者菜单，使用Debug JS Remotely（只要设备和电脑通过USB或局域网连接，离线状态也能调试）。

2. 使用--offline启动参数 #

如果你只是临时需要离线调试，不想手动生成bundle，可以用React Native的离线启动命令：

• iOS：

  react-native run-ios --offline
  

• Android：

  react-native run-android --offline
  

这个命令会调用之前缓存的bundle启动应用，不需要连接npm server。不过要注意，如果你最近修改了代码，得先联网启动一次生成新缓存，再用--offline启动，否则加载的是旧代码。

3. 用Flipper进行离线调试 #

Flipper是React Native默认集成的调试工具，支持离线模式：

• 先在联网状态下打开Flipper，连接设备并加载调试页面，Flipper会自动缓存必要的调试数据。
• 断开设备网络后，依然可以通过USB或局域网保持Flipper和设备的连接，查看应用日志、检查UI元素、调试状态管理等，全程不需要npm server。

注意事项 #

• 测试完离线功能后，记得切换回正常模式：比如删除本地bundle文件，或重新启动react-native start，避免后续开发时代码修改不生效。
• 如果要模拟真实的离线错误场景（比如网络请求失败），保留--dev true打包，能看到详细的错误日志，方便调试离线加载的容错逻辑。

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