React Native 0.68.2应用运行异常求助：热重载失效、控制台日志丢失等多类问题

我之前也碰到过RN 0.68.x版本类似的调试异常问题，这个版本确实存在一些和缓存、调试工具兼容性相关的小坑。结合你描述的「热重载失效、控制台日志无输出、Reactotron连不上、Axios无法工作」但能正常构建的症状，咱们一步步来排查：

1. 先确认Debug模式是否真的生效 #

有时候看似开启了热重载，但如果是Release模式运行，所有调试相关功能都会被禁用：

• iOS：打开Xcode，确认顶部scheme选择的是「Debug」而非「Release」；
• Android：在Android Studio的「Build Variants」面板里，确保选中的是「debug」；
• 摇一摇打开RN开发者菜单，确认Debug JS Remotely和Enable Live Reload都处于勾选状态（这两个选项联动，单独开热重载可能不生效）。

2. 执行更彻底的缓存清理 #

你已经重置了Metro缓存，但还有其他缓存可能导致问题：

• 全局缓存&依赖重置：

  # 删除node_modules和锁文件
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装依赖
  npm install # 或 yarn install
  

• iOS端额外清理：

  # 清理Xcode派生数据（手动去~/Library/Developer/Xcode/DerivedData删除对应项目文件夹也行）
  xcodebuild clean
  # 重新安装Pods
  cd ios && pod deintegrate && pod install && cd ..
  

• Android端额外清理：

  # 清理Gradle缓存
  ./gradlew clean
  # 删除构建目录
  rm -rf android/app/build
  

3. 排查Metro服务的端口与配置 #

RN 0.68.x对Metro的端口占用和配置逻辑有微调，试试这些操作：

• 杀掉所有可能占用Metro端口的进程：

  # Mac/Linux
  pkill -9 node
  # Windows
  taskkill /F /IM node.exe
  

• 手动指定非默认端口启动Metro，避免端口冲突：

  # 启动Metro时指定端口
  npx react-native start --port 8088 --reset-cache
  # 运行iOS/Android时同步指定端口
  npx react-native run-ios --port 8088
  npx react-native run-android --port 8088
  

• 检查metro.config.js，确保没有自定义的transformer或缓存策略拦截了JS代码更新，比如是否误加了限制文件监听的配置。

4. 修复Reactotron连接问题 #

RN 0.68.x的网络调试权限有变化，调整Reactotron配置试试：

• 确保你使用的reactotron-react-native是最新兼容版本，建议升级到v5.x；
• 检查Reactotron配置文件，确保IP地址正确：iOS模拟器用localhost，Android模拟器用10.0.2.2；
• 摇一摇打开开发者菜单，确认Enable Debugging已开启（这个选项会影响Reactotron的连接权限）。

5. 解决Axios网络请求失效问题 #

这个问题大概率和RN的网络配置有关：

• iOS端：在ios/[项目名]/Info.plist中添加网络权限配置，如果是访问HTTP接口，需要添加：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• Android端：
  1. 在android/app/src/main/AndroidManifest.xml中确认添加了网络权限：

     <uses-permission android:name="android.permission.INTERNET" />
     

  2. 如果是Android 9+访问HTTP接口，需要在res/xml下创建network_security_config.xml，内容如下：

     <?xml version="1.0" encoding="utf-8"?>
     <network-security-config>
         <base-config cleartextTrafficPermitted="true" />
     </network-security-config>
     

     然后在AndroidManifest.xml的application标签中引用：

     android:networkSecurityConfig="@xml/network_security_config"
     

6. 检查第三方库兼容性 #

RN 0.68.x的依赖版本和0.66差异较大，可能是某个第三方库不兼容导致的连锁问题：

• 对比你那个正常运行的0.66项目的package.json，把差异的依赖版本（比如Axios、Reactotron相关库）调整到和0.66项目一致，重新安装后测试；
• 暂时移除非必要的第三方库，逐步排查是哪个库导致的问题。

如果以上所有步骤都试过还是不行，可以尝试降级RN到0.68.1或者升级到0.68.3——0.68.2确实存在一些已知的调试相关bug，版本小幅度调整可能直接解决问题。

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