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即可。

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