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

梦里梦外; 2023-07-25 14:10 85阅读 0赞

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

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

![format_png][]

![format_png 1][]

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

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

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

> 1、运行adb reverse tcp:8081 tcp:8081
> 
> 2、不需要更多配置，你就可以使用Reload JS和其它的开发选项了。

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

> 1、首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
> 
> 2、在设备上运行你的React Native应用。和打开其它App一样操作。
> 
> 3、你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
> 
> 4、摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
> 
> 5、点击进入Dev Settings。
> 
> 6、点击Debug server host for device。
> 
> 7、输入你电脑的IP地址和端口号（电脑网络IP:8081）。查看电脑IP这里就不用多说啦。
> 
> 8、回到开发者菜单然后选择Reload JS。

> 备注：理想状态下已经可以看到APP页面了，但是，如果上面步骤都已经做好，并且电脑本地服务终端已显示加载成功，但是APP的页面还未加载出来，显示白屏状态！是我们的步骤有问题？这里并不是我们的步骤有问题，此时只需要退出正在运行的APP，重新打开即可，就可以成功加载到APP页面啦！

[format_png]: /images/20230528/9379d5c519654482b6191c81bebb1eb3.png
[format_png 1]: /images/20230528/3594824db7b5416ab6f8ee113348730e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

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

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

梦里梦外;/ 2023年07月25日 14:10/ 0 赞/ 86 阅读

相关【unity】使用Android手机真机调试unity项目

一、准备 1.手机和USB数据线 2.android SDK（请自己百度下载）二、连接用数据线将手机和电脑连接，手机端在开发者选项里打开USB调试三

傷城~/ 2023年07月18日 12:55/ 0 赞/ 34 阅读

相关 Cordova项目使用Android Studio真机调试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

喜欢ヅ旅行/ 2023年02月23日 08:17/ 0 赞/ 559 阅读

相关如何在真机上调试Android应用程序（图文详解）

1、首先将手机设置为调试模式方法：设置——应用程序——开发——USB调试，打上√即可 2、用数据线连接至电脑，在电脑上安装豌豆荚，此时豌豆荚会帮你安

缺乏、安全感/ 2022年08月18日 06:00/ 0 赞/ 320 阅读

相关如何在真机上调试Android应用程序（图文详解）

http://www.cnblogs.com/lanxuezaipiao/archive/2013/03/11/2953564.html 1、首先将手机设置为调试模式方法

叁歲伎倆/ 2022年08月06日 13:25/ 0 赞/ 275 阅读

相关在android机上调试前端页面

在PC端上，可以在浏览器上调试代码，那在移动端的真机上如何调试呢？在android机上调试前端页面的步骤参考该文章：[https://www.2cto.com/kf/201

绝地灬酷狼/ 2022年06月03日 22:10/ 0 赞/ 1200 阅读

相关在ios真机上安装WebDriverAgent

1 获取代码 git clone [https://github.com/facebook/WebDriverAgent][https_github.com_facebook_

柔情只为你懂/ 2022年06月01日 00:23/ 0 赞/ 503 阅读

相关 reactNative 代码调试

reactNative 代码调试注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用第三方的react-native-de

谁借莪１个温暖的怀抱￠/ 2022年03月21日 12:46/ 0 赞/ 544 阅读

相关 ionic4项目结合chrome在Android真机运行调试

1. 创建App ionic start myApp tabs 2. 添加平台给App添加目标平台，我们将会添加'ios'和'android'平

拼搏现实的明天。/ 2021年12月14日 05:05/ 0 赞/ 562 阅读

相关如何在真机上调试Android应用程序（图文详解）

1、首先将手机设置为调试模式方法：设置——应用程序——开发——USB调试，打上√即可 2、电脑上下载android驱动(也可以通过安装91助手等软件，这些

柔情只为你懂/ 2021年05月12日 11:50/ 0 赞/ 799 阅读