在开发 React Native（RN）项目时，真机调试是必备技能。下面我从 iOS / Android 真机调试步骤 + 常见问题排查 给你一套实战指南（偏工程经验总结）。
一、iOS 真机调试
1. 基本前提
- 必须使用 Xcode
- 需要 Apple ID（免费也行）
- iPhone 用数据线连接 Mac
2. 配置步骤
✅ 第一步：信任设备
- iPhone 上点击“信任此电脑”
✅ 第二步：Xcode 配置签名
打开：
ios/xxx.xcworkspace
设置：
- Targets → Signing & Capabilities
- 勾选 Automatically manage signing
- 选择你的 Apple ID Team
✅ 第三步：运行到真机
npx react-native run-ios --device
或在 Xcode 里直接 Run
✅ 第四步：启动 Metro
npx react-native start
3. 常用调试方式
🔍 控制台日志
console.log()
🔍 使用 Safari 调试 JS
步骤：
- iPhone → 设置 → Safari → 高级 → 打开 Web Inspector
- Mac Safari → Develop → 选择你的设备
🔍 使用 Flipper（推荐）
- 查看网络请求
- 查看布局
- AsyncStorage
二、Android 真机调试
1. 基本前提
- 安装 Android Studio
- 打开 USB 调试（开发者选项）
2. 配置步骤
✅ 第一步：开启 USB 调试
手机：
- 设置 → 关于手机 → 连点版本号 7 次
- 开启「开发者选项」→ USB 调试
✅ 第二步：连接设备
adb devices
能看到设备说明成功
✅ 第三步：运行项目
npx react-native run-android
✅ 第四步：端口转发（关键）
adb reverse tcp:8081 tcp:8081
👉 不然真机访问不到 Metro
3. 常用调试方式
🔍 打开开发菜单
摇一摇 或：
adb shell input keyevent 82
🔍 使用 Chrome DevTools
chrome://inspect
🔍 使用 Flipper（强烈推荐）
支持：
- Network
- Layout
- Logs
三、常见问题排查（重点🔥）
🚨 1. 真机无法连接 Metro（最常见）
现象：
- 红屏：Could not connect to development server
解决：
iOS：
- 确保手机和电脑同一 WiFi
- 手动设置 IP：
RCTBundleURLProvider.sharedSettings().jsLocation = "你的IP:8081"
Android：
adb reverse tcp:8081 tcp:8081
🚨 2. 端口被占用
lsof -i :8081
kill -9 xxx
🚨 3. iOS 编译失败（签名问题）
报错：
- No provisioning profile
- Signing error
解决：
- Xcode → 自动签名
- 换 Bundle Identifier（唯一）
🚨 4. Android 编译失败
常见原因：
- JDK 版本不对（建议 11 或 17）
- Gradle 缓存问题
解决：
cd android
./gradlew clean
🚨 5. 热更新失效 / 不刷新
# 重启 Metro
npx react-native start --reset-cache
🚨 6. 白屏 / 卡死
排查顺序：
- JS 报错（看 Metro）
- Native 崩溃（看 Xcode / Logcat）
- 网络请求失败
🚨 7. iOS 运行后闪退
常见：
- 权限未配置（相机、定位）
👉 在 Info.plist 添加：
<key>NSCameraUsageDescription</key>
<string>需要使用相机</string>
🚨 8. Android 网络请求失败（HTTP）
Android 9+ 限制 HTTP
👉 解决：
android:usesCleartextTraffic="true"
🚨 9. 设备连接不上 adb
adb kill-server
adb start-server
四、实战调试建议（高级经验）
✅ 建议你这样配置
- 调试工具：Flipper + Chrome DevTools
- 日志工具：
react-native-logs - 网络抓包：Charles / Proxyman
✅ 推荐调试组合
- JS 调试 → Chrome
- Native 问题 → Xcode / Logcat
- 网络问题 → Flipper
五、总结（重点记住）
👉 真机调试核心就 3 件事：
- 设备连接（adb / Xcode）
- Metro 连接（8081 端口）
- 调试工具（Flipper / Chrome）
