Android手机调试运行React Native项目

前言:由于Android自带的AVD模拟器运行速度慢,使用genymotion模拟器还要安装其他软件并且可能出现一些未知的错误,所以建议采用Android真机运行。以下操作建立在搭建好ReactNactive环境的前提下。

通过USB将手机和电脑连接,打开手机上的USB调试

如何开启USB调试?(Android手机型号众多,可能方式不太一样,这里以小米手机为例)

点击进入  设置->关于手机,连续点击几次MIUI版本,触发开发者模式。


Android手机调试运行React Native项目_第1张图片

进入 设置->其他高级设置,就可以看到开发者选项了,在开发者选项里打开USB调试,之后弹出一个提示窗口,点击确定。


Android手机调试运行React Native项目_第2张图片

这时在cmd命令行或Cygwin输入adb devices就可以看到设备已连接


Android手机调试运行React Native项目_第3张图片

运行RN项目时,手机和电脑USB连接并且电脑和手机设备在同一个Wifi网络环境下。

跟在模拟器运行时的方式差不多,在Cygwin输入npm start,接着再开一个窗口输入react-native  run-android。如果手机没有打开USB调试,则会报异常。


Android手机调试运行React Native项目_第4张图片

部署成功如下图所示:


Android手机调试运行React Native项目_第5张图片


在真机上运行时可能会遇到白屏的情况,请找到并开启悬浮窗权限。比如小米系统的

设置->其他应用管理->(项目名:Myproject)->权限管理->显示悬浮窗


Android手机调试运行React Native项目_第6张图片

重新打开项目时会出现如下:


Android手机调试运行React Native项目_第7张图片

调试用电脑和你的手机必须处于相同的 WiFi 网络中下

1.摇晃手机(也可以按menu键,不过现在较新版的手机已经去除这个键了)

2.点击Dev Settings

3.点击Debug server host&port for devices

输入 ip地址:端口号, 如10.10.10.133:8081

Ip地址根据本机而定,端口号固定为8081

4.点击Reload JS

最终进入到RN项目的主页了

以后再运行项目时,可不必用USB连接。直接先在命令行输入npm start,接着在手机的项目上点击Reload JS就可以了,前提是手机和电脑需使用同一wifi。(Android 5.0以上及更高版本,可以使用adb reverse命令连接,命令行运行

db reverse tcp:8081 tcp:8081

你可能感兴趣的:(Android手机调试运行React Native项目)