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

在开发 React Native（RN）项目时，真机调试是必备技能。下面我从 iOS / Android 真机调试步骤 + 常见问题排查 给你一套实战指南（偏工程经验总结）。

一、iOS 真机调试

1. 基本前提

• 必须使用 Xcode
• 需要 Apple ID（免费也行）
• iPhone 用数据线连接 Mac

2. 配置步骤

✅ 第一步：信任设备

• iPhone 上点击“信任此电脑”

✅ 第二步：Xcode 配置签名

打开：

1ios/xxx.xcworkspace
2

设置：

• Targets → Signing & Capabilities
• 勾选 Automatically manage signing
• 选择你的 Apple ID Team

✅ 第三步：运行到真机

1npx react-native run-ios --device
2

或在 Xcode 里直接 Run

✅ 第四步：启动 Metro

1npx react-native start
2

3. 常用调试方式

🔍 控制台日志

1console.log()
2

🔍 使用 Safari 调试 JS

步骤：

1. iPhone → 设置 → Safari → 高级 → 打开 Web Inspector
2. Mac Safari → Develop → 选择你的设备

🔍 使用 Flipper（推荐）

• 查看网络请求
• 查看布局
• AsyncStorage

二、Android 真机调试

1. 基本前提

• 安装 Android Studio
• 打开 USB 调试（开发者选项）

2. 配置步骤

✅ 第一步：开启 USB 调试

手机：

• 设置 → 关于手机 → 连点版本号 7 次
• 开启「开发者选项」→ USB 调试

✅ 第二步：连接设备

1adb devices
2

能看到设备说明成功

✅ 第三步：运行项目

1npx react-native run-android
2

✅ 第四步：端口转发（关键）

1adb reverse tcp:8081 tcp:8081
2

👉 不然真机访问不到 Metro

3. 常用调试方式

🔍 打开开发菜单

摇一摇 或：

1adb shell input keyevent 82
2

🔍 使用 Chrome DevTools

1chrome://inspect
2

🔍 使用 Flipper（强烈推荐）

支持：

• Network
• Layout
• Logs

三、常见问题排查（重点🔥）

🚨 1. 真机无法连接 Metro（最常见）

现象：

• 红屏：Could not connect to development server

解决：

iOS：

• 确保手机和电脑同一 WiFi
• 手动设置 IP：

1RCTBundleURLProvider.sharedSettings().jsLocation = "你的IP:8081"
2

Android：

1adb reverse tcp:8081 tcp:8081
2

🚨 2. 端口被占用

1lsof -i :8081
2kill -9 xxx
3

🚨 3. iOS 编译失败（签名问题）

报错：

• No provisioning profile
• Signing error

解决：

• Xcode → 自动签名
• 换 Bundle Identifier（唯一）

🚨 4. Android 编译失败

常见原因：

• JDK 版本不对（建议 11 或 17）
• Gradle 缓存问题

解决：

1cd android
2./gradlew clean
3

🚨 5. 热更新失效 / 不刷新

1# 重启 Metro
2npx react-native start --reset-cache
3

🚨 6. 白屏 / 卡死

排查顺序：

1. JS 报错（看 Metro）
2. Native 崩溃（看 Xcode / Logcat）
3. 网络请求失败

🚨 7. iOS 运行后闪退

常见：

• 权限未配置（相机、定位）

👉 在 Info.plist 添加：

1<key>NSCameraUsageDescription</key>
2<string>需要使用相机</string>
3

🚨 8. Android 网络请求失败（HTTP）

Android 9+ 限制 HTTP

👉 解决：

1android:usesCleartextTraffic="true"
2

🚨 9. 设备连接不上 adb

1adb kill-server
2adb start-server
3

四、实战调试建议（高级经验）

✅ 建议你这样配置

• 调试工具：Flipper + Chrome DevTools
• 日志工具：react-native-logs
• 网络抓包：Charles / Proxyman

✅ 推荐调试组合

• JS 调试 → Chrome
• Native 问题 → Xcode / Logcat
• 网络问题 → Flipper

五、总结（重点记住）

👉 真机调试核心就 3 件事：

1. 设备连接（adb / Xcode）
2. Metro 连接（8081 端口）
3. 调试工具（Flipper / Chrome）

《开发RN项目时，如何调试iOS真机、Android真机？常见调试问题排查？》 是转载文章，点击查看原文。