React Native模拟器中Metro bundler卡在‘Loading dependency graph done’问题咨询

我之前也碰到过这种模拟器里Metro卡住但真机正常的情况，结合社区经验和自己踩过的坑，整理了几个最可能的原因和对应的排查方法，你可以逐一试试：

• 模拟器网络与本地服务未打通
  真机是通过局域网直接连接Metro，但模拟器可能存在网络配置问题：

  • 先在模拟器的浏览器里访问 http://localhost:8081（Metro默认端口），看能不能加载出Metro的调试页面。如果打不开，说明网络连通有问题。
  • iOS模拟器可以试试「重置内容和设置」；Android模拟器可以切换网络模式（比如从Wi-Fi切到蜂窝数据再切回来），或者重启模拟器。
  • 也可以尝试用局域网IP启动Metro：npx react-native start --host 0.0.0.0，然后在模拟器里加载时，把bundle地址换成你的电脑局域网IP（比如http://192.168.x.x:8081/index.bundle）。

• Metro缓存堆积导致阻塞
  缓存是这类卡住问题的重灾区，清缓存几乎是必试步骤：

  • 先关掉当前的Metro窗口，然后用重置缓存的方式启动：npx react-native start --reset-cache
  • 还可以手动清理深层缓存：Mac上执行 rm -rf $TMPDIR/metro-*，Windows上执行 del %TMPDIR%\metro-*，之后再重新安装依赖（删除node_modules后运行npm install）。

• 默认端口被占用
  8081端口很容易被其他程序占用，导致Metro无法正常监听：

  • 检查端口占用情况：Mac用 lsof -i :8081，Windows用 netstat -ano | findstr :8081，找到占用的进程并杀掉。
  • 或者直接换个端口启动Metro：npx react-native start --port 8082，然后在模拟器里打开调试菜单（iOS按Cmd+R，Android按Ctrl+M），选择「Change Bundle Location」，输入新端口的地址。

• 依赖或配置文件异常
  某些依赖版本不兼容，或者配置错误会导致依赖解析卡住：

  • 检查package.json里的react、react-native、metro相关包版本，确保符合官方的兼容性要求。如果最近更新过依赖，试试回退到之前能正常运行的版本。
  • 暂时恢复metro.config.js或react-native.config.js的默认配置，排除自定义规则导致的解析问题。
  • 如果最近新增了第三方依赖，先移除它再重新运行项目，排查是不是新依赖引发的冲突。

• 模拟器本身状态异常
  模拟器的运行时或设备镜像可能出现损坏：

  • 完全关闭模拟器（包括后台进程），重新打开后再运行项目。
  • iOS模拟器可以试试重启Xcode，或者重新下载对应的iOS版本运行时；Android模拟器可以创建一个新的设备镜像，看是否能正常连接Metro。

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