React Native运行应用时Metro Bundle无法在页面及Chrome中显示

1. 确认Metro服务状态 #

• 检查终端是否有Metro服务进程，未启动则手动执行：npx react-native start
• 若服务无响应，按Ctrl+C终止后重新启动

2. 排查端口占用 #

Metro默认使用8081端口，被占用会导致无法访问：

• Windows：执行netstat -ano | findstr :8081找到占用PID，在任务管理器结束对应进程
• Mac/Linux：执行lsof -i :8081获取PID，再用kill -9 <PID>杀掉进程
• 也可换端口启动Metro：npx react-native start --port 8082，同时在应用内摇一摇设备，选择"Change Bundle Location"输入localhost:8082

3. 正确配置Chrome调试 #

• 开启应用调试模式：摇一摇设备/模拟器，勾选"Debug JS Remotely"
• 打开Chrome输入chrome://inspect，点击"Configure"添加localhost:8081（换端口则填对应端口）
• 刷新页面后找到你的应用，点击"Inspect"进入调试界面

4. 清除缓存重置环境 #

• 清除Metro缓存：npx react-native start --reset-cache
• Android端清除构建缓存：cd android && ./gradlew clean && cd ..
• iOS端清除构建缓存：cd ios && pod deintegrate && pod install && cd ..

5. 真机调试的网络配置 #

• 确保手机和电脑在同一Wi-Fi网络
• 摇一摇手机，选择"Change Bundle Location"，输入电脑局域网IP+端口（例如192.168.1.100:8081）

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