React Native模拟器突然无法连接Metro服务器求助

以下是针对你已尝试常规方法无效后的额外排查和解决步骤：

1. 检查端口占用与Metro监听状态 #

• 执行命令查看8081端口的占用情况：

  lsof -i :8081
  

  如果输出显示非Metro的进程占用端口，用kill -9 <进程PID>终止该进程；如果Metro未在监听，重启Metro时指定备用端口：

  npx react-native start --port 8082
  

  随后在模拟器中摇一摇唤出开发者菜单，选择"Change Bundle Location"，输入localhost:8082并确认。

2. 验证模拟器与主机的网络连通性 #

• Android模拟器默认通过10.0.2.2映射主机的localhost，打开模拟器内置浏览器，访问http://10.0.2.2:8081：
  • 若能打开Metro的调试页面，说明网络连通正常，问题出在应用侧；
  • 若无法打开，检查Mac的防火墙设置，确保8081端口未被拦截。

3. 重置ADB反向代理与连接 #

• 清除所有已配置的ADB反向代理：

  adb reverse --remove-all
  

• 重启ADB服务：

  adb kill-server && adb start-server
  

• 重新添加反向代理：

  adb reverse tcp:8081 tcp:8081
  

4. 排查环境变量与Metro配置 #

• 检查是否存在影响Metro的环境变量，执行echo $REACT_NATIVE_PACKAGER_HOSTNAME，若有输出，取消该变量后重启Metro：

  unset REACT_NATIVE_PACKAGER_HOSTNAME
  

• 检查项目根目录的metro.config.js，确保没有错误的端口或网络配置，可暂时替换为默认配置：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
  const config = {};
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
  

5. 彻底清理缓存 #

• 清除Metro临时缓存：

  rm -rf $TMPDIR/metro-*
  

• 清除Android构建缓存：

  cd android && ./gradlew clean && cd ..
  

6. 检查模拟器代理设置 #

• 进入模拟器「设置」-「网络和互联网」-「Wi-Fi」，长按当前连接的网络选择「修改网络」，将代理设置改为「无」，保存后重启模拟器。

7. 测试空白项目排查项目问题 #

• 新建空白React Native项目测试：

  npx react-native init TestApp
  cd TestApp
  npx react-native run-android
  

  若空白项目能正常连接Metro，说明原项目存在隐藏配置问题，可对比两个项目的AndroidManifest.xml、gradle.properties等配置文件找差异。

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