在Windows下搭建React Native Android开发环境[踩坑]

注释：随着react-native版本的更新，网上许多教程都有些许问题，现在根据自身的踩坑经历，重新整理一下

在Windows下搭建React Native Android开发环境

React Native Android

安装JDK

从Java官网之JDK下载列表下载JDK并安装。请注意选择x86还是x64版本。我在这里直接接受了 @天地之灵_邓鋆 的推荐将JDK的bin目录加入到了系统PATH环境变量。注意：下载链接不能直接使用，需要先接受协议（这里有存入cookies），可以通过Java官网之JDK下载列表下载JDK。

设置环境变量PATH：jdk的位置。例如：（PATH => D:\Program Files\Java\jdk1.8.0_60\bin）

安装Android SDK(jdk和sdk的环境变量很重要，一定要正确安装)

单独安装Android SDK，在墙的环境下，为了速度我选择了使用androiddevtools。

设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）
设置环境变量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

为了避免一些其他问题，最好再设置环境变量ANDROID_SDK_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）

安装React-native-cli

npm install -g react-native-cli

初始化项目

react-native init reactNative

初始化很慢，不要着急，正常情况下十几分钟，如果出现问题，要重新删除根目录下node_modules，重新初始化

运行packager

cd reactNative
react-native start

最新的版本只要在项目根目录下运行 react-native start 就ok了， 注意，后边的热加载的日志也会在这里打印出来，如果没有日志，就说明虚拟机连接本地开发环境有问题

Run android app

cd reactNative
react-native run-android

如果没有安装安卓模拟器，这里可以直接使用真机安装测试，（官方的模拟器能卡到爆炸，启动要半个小时，最好不要使用）
这个过程很漫长，等等等……

说说虚拟机，现在最流行的模拟器是 genymotion，百度下载时候最好不要下载带有虚拟机的版本，genymotion 正常单独的文件大小是20多M，虚拟机vitrualBox的版本要是4.2.12的才能避免我半天欲仙欲死的各种奇葩问题, 期待你不要出现  unable to start the virtual device  这种没有一点提示的蛋疼问题吧

安卓调试

目前Windows下无法自动打开chrome进行调试，所以手动打开chrome，访问如下地址：http://localhost:8081/debugger-ui 即可。

报错了

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: D:\Program Files\Andro
id SDK Tools

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 10 mins 42.463 secs
Could not install the app on the device, see the error above.

解决办法就是安装Android-23，对于上一篇关于ionic的文是需要Android-22。

又报错了

Could not find com.android.support:appcompat-v7:版本号.

安装Android Support Libraries和Android Support Repository

build成功，安装上apk后界面红了

解决办法

选择菜单：Dev settings

选择项：Debug server host for device

设置编译环境PC的IP地址，最新的版本需要加上端口号了,  一般为： localhost:8081

确保手机与编译环境在同一WIFI环境下（IP段相同），packager在运行状态下，重启APP

初始化欢迎界面就出来了，后面继续学习中……按上面文章的操作处理后，如果一直连不上，用PC上的浏览器访问一下地址http://localhost:8081/index.android.bundle?platform=android，浏览器能正常访问但手机访问时在packager的DOS窗口没有看到log输出，那么你可以尝试使用下面的命令：

adb reverse tcp:8081 tcp:8081

参考网址：http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

最后还有一个监控问题：在你编辑完js文件时，不能 快速点击保存，这样的话，会导致packager监控失败导致错误，出现红色界面