React Native iOS模拟器热重载或手动刷新无响应问题排查

我之前也碰到过这个头疼的问题，折腾了好一阵才找到原因，下面这些排查步骤应该能帮到你：

先确认基础连接是否正常 #

• 检查Metro服务器状态
  先看看终端里的Metro窗口有没有报错（比如红屏提示、模块找不到），如果服务器挂了或者卡住，直接按Ctrl+C停止，然后用npx react-native start --reset-cache重启并清除缓存——缓存搞事情的概率真的很高。
• 验证模拟器与Metro的连接
  在模拟器里按Cmd+D打开开发者菜单，看看有没有显示「Connected to Metro」。如果没连接，选「Configure Bundler」，确认主机地址是localhost或者你的本地IP，端口保持默认的8081，再重新连接试试。另外可以在模拟器的Safari里输入http://localhost:8081，能打开Metro页面就说明网络没问题。

彻底清理缓存（重中之重） #

缓存堆积是刷新失效的头号元凶，试试这套完整的清理流程：

1. 停止Metro服务器（Ctrl+C）
2. 关闭iOS模拟器
3. 清除React Native项目缓存：npx react-native clean
4. 清除Xcode缓存：打开Xcode，按Cmd+Shift+K清理构建文件夹，还可以手动删掉~/Library/Developer/Xcode/DerivedData里对应项目的缓存文件夹
5. 重新安装依赖：npm install（用yarn的话就跑yarn install）
6. 重启Metro，再运行npx react-native run-ios

排查模拟器本身的问题 #

• 检查代理和网络权限
  如果模拟器开了代理，可能会阻断和本地Metro的连接。去模拟器的「设置 > Wi-Fi」，点击当前连接的网络，把HTTP代理改成「自动」或者直接关掉。
• 重置模拟器状态
  有时候模拟器的系统状态异常也会导致刷新失效。点击模拟器菜单栏的「Device > Erase All Content and Settings」，重置后再重新运行项目试试。

检查iOS项目配置 #

• 确认Bundle脚本正确性
  打开Xcode里的项目，进入「Build Phases」，找到「Bundle React Native code and images」脚本，确保内容是：

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

  如果这个脚本被修改过，很可能导致打包或刷新异常。
• 添加HTTP请求例外
  iOS默认会阻止非HTTPS请求，需要在Info.plist里添加localhost的例外：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>localhost</key>
      <dict>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
      </dict>
    </dict>
  </dict>
  

其他特殊情况 #

• 检查端口占用
  8081端口被其他程序占用的话，Metro就没法正常工作。用lsof -i :8081查看占用进程，再用kill -9 <进程ID>杀掉，之后重启Metro。
• 升级React Native版本
  如果用的是比较旧的RN版本，可能存在已知的刷新bug。可以参考官方升级指南，把RN升级到稳定版本，之后重新清理缓存、运行项目。

内容的提问来源于stack exchange，提问作者Théo Lavaux