react native开发之使用安卓模拟器调试及hot reloading使用

接上文,react native开发之webstorm搭建开发环境并创建运行项目,讲完了从搭建开发环境到打包apk的完整过程,现在来讲讲如何使用安卓模拟器进行开发调试。

本篇依然是使用webstorm作为开发工具,不过在这个调试环节已经跟开发工具无关了。

我们调试采用的模拟器是夜神模拟器,因为平时有使用夜神模拟器,感觉还是挺方便的。为什么不采用真机调试呢?因为真机调试需要连接usb,每次打开都要重复一次,而且老是弹出手机充电,很不方便,当然真机调试也可以使用wifi连接调试,但是据说android 5版本才能用,反正我是没成功过。。。所以我们还是采用夜神模拟器吧

1. 下载安装夜神模拟器

PS:这里首先假设你之前的环境安装以及搭建项目都已经成功了,不成功的可以回去看看我之前写的文章。

下载安装这个非常简单,自行百度吧。

2. 通过adb连接夜神模拟器

这一步要着重说一下,因为这里有坑。。

先说一下操作,然后再来解释里面的坑

(1)检查react native 配置的android sdk路径在哪里,一般路径如下C:\Program Files (x86)\Android\android-sdk

(2)进入sdk目录下的platform-tools,里面有可执行的adb.exe文件(adb全名叫做Android Debug Bridge,是专门用来调试安卓程序的工具包)

(3)打开cmd命令,执行cd C:\Program Files (x86)\Android\android-sdk\platform-tools进入adb.exe存在的目录

(4)执行 adb connect 127.0.0.1:62001(62001是夜神模拟器的端口,如果没连上可以查找资料看具体端口是多少)


执行以下adb devices就可以看到设备已经连接上了

解释一下坑在哪里:

首先我们执行adb connect来连接夜神模拟器的时候,网上很多人的做法都是打开夜神模拟器的安装目录,然后执行adb命令,这样的话系统就会使用这个目录下的adb工具启动一个进程,之后我们运行react-native run-android命令来启动安卓的时候,会调用项目配置的android sdk目录下的adb工具,启动另一个进程,当检查到两个进程的adb版本不一致的时候,就会自动杀掉上一个进程。

于是我们经常会看到,一开始执行adb connect命令,再执行adb devices之后,可以看到设备已经连接上夜神模拟器了,但是react native项目启动一段时间之后,执行adb devices又看不到设备了。

所以上面的操作步骤才会要求一定要进入react native配置的android sdk目录下执行adb connect链接命令,为的是确保两次启动adb使用的是同一版本的adb工具。

PS: 网上也有一些人的做法是把android sdk目录下的adb.exe复制到夜神模拟器安装目录下,改名为nox_adb.exe, 来保证这两次启动的adb版本是一致的,但是我试了之后没有成功,有人成功了可以说下^_^

3. 启动react native项目

在webstorm的terminal下面输入react-native run-android命令,这个时候就会开始运行项目,并把我们的软件安装到夜神模拟器了(安装完之后好像依然会将设备断开,不过无所谓,接下来我们要启用wifi调试了)


可以看到,软件已经安装到模拟器上了。

4. 启用wifi调试

首先打开安装好的软件,然后点击夜神模拟器右上角的摇一摇按钮,这时候就会弹出一些设置选项了,点击上面的dev settings(有些时候夜神模拟器的摇一摇会中风,这时候就多点几次,直到出现下图的画面)


点击dev settings进去之后,我们可以看到一个选项是 debug server host & port for device, 中文意思就是调试服务器的地址和端口。

也就是说这时候我们的开发机器会启动一个服务端口,这是很重要的一步,网上很多文章都漏掉了,会导致连接不上的

一样在webstorm的terminal目录下输入react-native start , 执行。这一步会启动react native的服务,也就是相当于将开发机器作为一台服务器,ip使用内网ip,可以通过cmd命令ipconfig查看,端口react native默认是8081,

在上一步成功启动react native服务之后,我们就可以在debug server host & port for device选项下面配置好服务和端口了,也就是说我们的软件会自动连接上这个ip和端口所在的服务器,如下图:


5 开启hot reload

hot reload是一个神器级别的功能,你在IDE里面修改代码之后,不需要重新执行,也不需要重新打包,只需要保存一下,模拟器中的app就会自动加载最新的代码并显示出来。

也就是说,app会自动通过我们上一步配置好的服务器地址下载最新代码,所以说上一步开启react native服务非常重要。

怎么启用hot reload功能呢?接着上一步的操作,我们退回到摇一摇出来的主界面,点击enable hot reloading即可。

现在我们随便修改一下代码,就可以看到模拟器中实时显示出效果了,是不是非常牛逼!

推荐阅读更多精彩内容