开发RN项目时，如何调试iOS真机、Android真机？常见调试问题排查？

在开发 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）