Windows下搭建React Native真机测试环境

一、准备

1、Java SE安装包
2、Android Studio
4、NodeJS
5、Git for Windows软件

说明一下：
我们需要Java开发环境，因为我们这里是开发Android应用。
使用Android Studio是为了Android的SDK。注意的是安装完Android Studio后，记得配置Android SDK环境变量ANDROID_HOME。
安装NodeJS是因为我们需要npm工具，而NodeJS自带npm。
最后的Git，我们会使用Git的shell来运行npm工具。

二、React Native步骤及问题解决

1、安装react-native命令行工具

npm install -g react-native-cli  

2、初始化项目

初始化项目，其实就是创建新项目的过程。我这里创建的是一个名为BlueBasket的项目。这个过程有点慢。

react-native init BlueBasket

初始化成功后，项目文件如图：

3、启动项目

进入到项目目录里面后，执行start命令。

cd BlueBasket

react-native start  

启动出现上面的信息后，打开下面的链接：
http://localhost:8081/index.android.bundle?platform=android

链接页面如下图说明启动已成功。

4、运行Android项目

保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行。

react-native run-android

如果你是安装我这个教程执行到这里的话，可能会出现下面的问题。

图片问题重点是：

You have not accepted the license agreements of the following SDK components

出现这个问题是因为从Android Gradle plugin 2.2.0开始，gradle会自动加载需要的SDK, build-tools，但是因为没有接受license，导致加载依赖终止。现在我们要做的是让Gradle自动接受所有的license。

license存放在$ANDROID_HOME/licenses下。

• Windows下创建license

mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

• Linux下创建license

mkdir "$ANDROID_HOME/licenses"
echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"

解决这问题后，我们启动Android虚拟机或使用USB连接手机。重新运行Android项目。

如果没有启动Android虚拟机或连接手机的话，会出下以下问题。

我使用的是真机测试。APP安装到手机后，出现如下图：

摇晃设备或按Menu键可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。

成功后如图：

后面我们修改了React Native一些信息后，我们不需要每次都重新运行Android项目，只需要修改后摇一摇reload一下就能显示最新的内容。这 就是React Native热更新。

5、Android Studio 使用

如果你手头上不有Android机子，想使用虚拟机来开发。
Android Studio无需配置，只需import，不过import时候注意目录，是在ReactNative项目根目录的android目录下，否则Android Studio无法编译调试。