React-Native项目在Android真机上调试

本文详细介绍了如何在Android真机上调试React-Native项目,包括USB连接设备、开启本地服务、解决设备访问开发服务器的问题,以及应对可能出现的加载问题。

React-Native项目在Android真机上调试?接下来直奔主题,通过USB将手机和电脑连接,打开手机上的USB调试。不通型号的手机可能设置方式不一样,这里具体不在细说……

1、确保你的设备已经成功连接。可以终端输入adb devices来查看:

$ adb devices

List of devices attached

"Your device Name" device

注意:为避免调试出现其他问题,此处只需有一台设备连接,如果模拟器打开需要关闭模拟器;

2、终端运行npm start 开启本地服务,成功后运行react-native run-android来在设备上安装并启动应用,或者VSCode等编辑器进行Debug Android

应用成果安装后不出意外的话会提示无法连接服务器,如下图:

出现此问题是因为我们未给手机设置访问开发服务地,模拟器是直接访问电脑本地服务,真机则需要我们手动配置了

3、设置设备访问开发服务器

一、(Android 5.0及以上)使用adb reverse命令

1、运行adb reverse tcp:8081 tcp:8081

2、不需要更多配置,你就可以使用Reload JS和其它的开发选项了。

二、(Android 5.0以下)通过Wi-Fi连接你的本地开发服务器

1、首先确保你的电脑和手机设备在同一个Wi-Fi环境下。

<think> 我们正在回答用户关于React Native项目真机设备上调试的方法。根据用户之前的对话历史,我们已经知道用户需要详细的真机调试步骤,并且用户提供了相关的引用内容作为参考。我们将结合这些引用内容,给出一个完整的真机调试流程。 步骤概述: 1. 准备工作:包括开启USB调试、连接设备等。 2. 运行React Native项目。 3. 在真机上查看应用并调试。 注意:在调试过程中可能会遇到白屏等问题,我们也会给出解决方案。 详细步骤: </think> 以下是 React Native 项目真机设备上进行调试的完整方法,结合环境配置和常见问题解决方案: ### 一、真机调试准备阶段 1. **开启设备开发者选项** - 进入手机「设置」→「关于手机」→ 连续点击「版本号」7次启用开发者模式 - 返回「设置」→「开发者选项」→ 开启「USB调试」和「允许通过USB安装应用」[^1] 2. **连接设备到电脑** ```bash adb devices # 验证设备连接(显示设备ID即成功) ``` 若未识别:更换USB线/接口,或尝试无线连接: ```bash adb tcpip 5555 # 开启设备TCP端口 adb connect <设备IP>:5555 # 连接设备[^3] ``` --- ### 二、调试流程 #### 步骤 1:配置项目 ```bash # 项目根目录执行 npx react-native start # 启动 Metro 服务 npx react-native run-android --deviceId <设备ID> # 指定设备安装 ``` > 设备ID通过 `adb devices` 获取(如 emulator-5554) #### 步骤 2:解决白屏问题 1. 摇晃设备 → 点击「Dev Settings」 2. 选择「Debug server host & port for device」 3. 输入电脑IP地址:8081(如 `192.168.1.100:8081`)[^2] 4. 返回并重新加载应用(双击R键) #### 步骤 3:调试工具使用 | 功能 | 操作方式 | |---------------------|-----------------------------| | 查看日志 | `adb logcat *:S ReactNative:V` | | 热重载 | 摇动设备 → 点击「Reload」 | | 远程调试JS | 摇动设备 → 「Debug」→ Chrome打开 `chrome://inspect` | --- ### 三、常见问题解决 1. **安装失败 (INSTALL_FAILED_UPDATE_INCOMPATIBLE)** ```bash adb uninstall com.your.app.package # 卸载旧版本 ``` 2. **红屏错误 "Unable to load script"** - 确保 Metro 服务运行中 - 检查设备与电脑在同一WiFi网络 - 终端执行:`npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle` 3. **连接后端服务失败** ```xml <!-- android/app/src/main/AndroidManifest.xml --> <application android:usesCleartextTraffic="true" ... /> ``` --- ### 四、进阶调试技巧 1. **性能监测** Android Studio → Profiler → 选择应用进程 → 查看CPU/内存占用 2. **无线调试持久化** 创建 `adb_usb.ini` 文件避免重复连接: ```bash echo 0x<设备厂商ID> >> ~/.android/adb_usb.ini adb kill-server && adb start-server ``` > **真机调试优势**:更准确的性能测试、传感器支持(陀螺仪/NFC等)、真实网络环境模拟[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值