React-native在Windows下Android环境的安装调试

    在第一次使用react-native时，遇到的问题就是在运行react-native run-android时报错

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine java version from '9.0.1'.

    网上有些人说这是由于Android Studio的gradle版本过低，与Java 9.0不兼容，建议升级gradle版本，然而升级之后gradle的sync又出现了错误，由于对gradle使用不是很熟悉，我选择第二种解决办法，降低java版本。

    在Windows程序卸载中将Java 9卸载，重启电脑，到官网下载Java 8，之后报错消失。下面记录安装配置react-native的过程：

1、安装配置JDK、SDK

从官网下载安装Java 8，按照安装提示点击下一步，直到安装完成JDK、JRE。

配置环境变量：在Windows环境变量中添加变量JAVA_HOME，路径为JDK的安装位置，并在系统环境变量PATH中添加%JAVA_HOME%\bin。

再添加环境变量CLASSPATH：

.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

在安卓官网下载SDK，按提示安装，注意react-native要求必须有Android6.0（API23）。

在环境变量中添加ANDROID_HOME路径为SDK安装位置，并在PATH中添加%ANDROID_HOME%\platform-tools与%ANDROID_HOME%\tools

2、安装react-native

JavaScript的编译需要node，react-native下载需要npm，而npm集成在node中，所以需要安装node。从Node官网下载node.js，按下一步提示完成安装。

配置npm镜像位置，由于npm仓库在国外网站，将npm配置为淘宝镜像，可以加速npm的执行以及在项目初始化时下载速度：

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

之后通过npm全局安装react-native脚手架工具：

npm install -g react-native-cli

3、创建项目

    进入到项目所放置的文件夹，按下shift+鼠标右键，在此处打开power shell窗口，在power shell中输入

react-native init 项目名称

    此过程大约十几分钟，之后就可以看到在目录下建好了react-native项目。

    注意：项目名称需要为英文，且文件夹路径中不要包含中文。

             react-native命令要在powershell或以管理员身份运行，否则会出现读取权限之类的错误。

4、运行项目

4.1虚拟机运行

    首先启动react-native本地服务器：在项目所在文件夹下的命令行内输入react-native start或者npm start，可以看到项目的后台服务器启动，并且在localhost:8081端口可以看到返回数据。如果直接运行，会看到红色的屏幕，上面提示

    Unable to load script from asset ‘index.android.bundel'.Make sure your bundle is packaged correctly or you're running a package server.

    打开AndroidStudio，导入项目中的android文件夹，等待gradle构建完成后，点击绿色的运行按钮，启动虚拟机，就可以在虚拟机中看到项目界面了。

4.2真机调试

首先在手机设置开发者选项中打开usb调试并允许通过usb安装应用，将手机通过USB线连接到电脑，在命令行输入adb devices可以看到连接的设备。

然后在项目所在文件夹下打开命令行输入react-native run-android，可以看到它会自动打开一个服务器窗口，并且编译安装到手机上。

    1、通过USB调试（仅适用于Android 5.0以上）

        在命令行输入adb reverse tcp:8081 tcp:8081，不需要其他设置，点击reload就可以看到界面了。

    2、通过WIFI调试

        如果在调试时不想通过USB连接电脑，可以利用WIFI来调试，确保手机与笔记本在同一个局域网下，在手机APP中上打开菜单（没有菜单按钮的可以晃动手机），选择Dev settings->Debug server host & port for device，输入你笔记本的IP地址+:8081，例如：192.168.1.1:8081。接着reload，这样就从电脑服务器同步到你的手机上。在菜单中Enable Live Reaload开启实时重载，当你在电脑上修改了界面时，手机端会自动加载。  

4.3在WebStorm中启动ReactNative项目   

    react-native开发的主要代码是Javascript，我们依旧使用前端开发工具webstorm。在webstorm中已经集成了react-native工具，可以快速启动项目而不需要再打开命令行工具手动启动。在webstormIDE右上方有个Edit Configurations的按钮，点开之后添加React-Native工程，按提示配置完成后点击运行即可启动ReactNative，这时候可以在虚拟机或真机上查看。