React Native for Android on Windows 配置开发安装总结

配置开发安装总结（由于当前react-native更新较快，目前是针对2015年11月底时的reacti-native android for windows版本，有些内容可能过时）
官方的安装指导在此处：http://facebook.github.io/react-native/docs/android-setup.html#content
但是在Windows下安装远没有这么简单。下文是在window7 x64下的安装体验。

目录：
1、开发IDE:Webstorm
2、开发环境安装、配置
3、初始化工程
4、初始化工程时遇到的一些问题
5、初始化成功后，开发中常见的一些问题

1、开发IDE:webstorm
当前sublime或者webstorm都较为优秀，本文选用webstorm，建议用最新的11版本
1）es6语法支持
由于常常用es6语法，在setting-》Languages & Frameworks-》JavaScript-》Libraries。勾选 ECMAScript 6。



2）增加对JSX语法支持。
在setting-》Languages & Frameworks-》JavaScript



这时代码区域不会报语法错、格式化也会自动对齐等，例如：



2、开发环境安装、配置 （没有可靠FQ的同学请浏览完本文后慎行）
1）npm和node升级
npm：npm升级到最新版本，这个很有必要，npm update –g
node：react native官方要求node>=4.0，建议直接安装node的最新版本（官网下载很慢，而且几乎很难成功，我这里有个云盘上的5.0 64x版本地址：https://yunpan.cn/c3TcJvAbHDuBW （提取码：ca15））

2）安装JDK
可直接去官网上下载：
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
注意X86版本还是X64版本。

配置好jdk环境变量：
例如我的jdk安装地址为：C:\Program Files (x86)\Java\jdk1.8.0_60\bin
系统变量-》新建 JAVA_HOME 变量，值为：C:\Program Files (x86)\Java\jdk1.8.0_60\bin
然后再把JAVA_HOME添加到PATH中。%JAVA_HOME%

3）安装Android SDK
安装sdk-manager 和sdk:
http://developer.android.com/sdk/index.html
或者上360软件管家
http://androiddevtools.cn/

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

4）安装android sdk packages
android sdk安装完毕之后，打开SDK manager，需要安装一些工具、扩展以及android版本。
建议Tools和Extras全勾选（官方文档中推荐只安装一些固定包）
android版本根据需要选择安装（选一两个就成，每个都上G，下图我安装了6.0和5.1.1）
然后漫长的安装......
这里可以设置镜像，加速下载，例如：/article/5010749.html



5）安装android模拟器（如果是真机调试，这一步就不需要了）
可以选用官方推荐的模拟器，Genymotion（https://www.genymotion.com/），此模拟器之前在mac下配合visual box使用过，启动很快
下边是使用android的自带的avd创建模拟器：



创建完毕后，选择一个模拟器，点start即打开模拟器，在模拟器上有几个常用的快捷键：
F2：即打开react-native开发工具栏
Home：相当于android的home
Esc：相当于退出
更多请参照：http://wenku.baidu.com/view/9b46094533687e21af45a909.html

6）之后就是安装react-native
npm install react-native-cli -g ( 需要命令行 git)

3、初始化工程
构建一个名为hello的react-native工程，理想的正常的步骤：
1）到工程开发目录下 react-native init hello
2）以上成功后，然后在hello目录下，命令行 运行react-natvie start或者npm start
此处启动React Chrome Developer Tools需要的一个远程调试服务，有点类似于Weinre。启动之后，可以访问http://localhost:8081/debugger-ui看下
3）在hello目录下，命令行运行react-native run-android，如果成功在模拟器或者真机上启动了应用，即初始化成功了
此时需要提前把android模拟器打开或者真机usb连接到电脑。

但是实时上，往往会出现很多问题，即如下部分的内容。

4、初始化工程时遇到的一些问题

主要就是一些外部依赖或者网络问题。建议安装一些内容，基本就避免下边的错误。要安装的依赖：
git
node(4.0以上版本)
npm(用最新版本)
python(2.5~3.0)
java jdk，android sdk( 各种package)
.net framework 2.0 SDK

如果没有上边内容，可能报以下我遇到的问题：
1）带命令行的git。如果安装完没自己加入环境变量path中，需要自行添加。
2）需要安装python(版本必须在2.5~3.0之间)，之前我装的是3.4.3版本，无奈只好退回到2.7，并加入环境变量



3）需要安装.net framework 2.0 SDK, visual studio 2005（事实上，只要高于这个版本就成），否则在react-native start时会提示如下



4）在react-native run-android时，好几次就报一个okhttp.jar错误，不要气馁，找个好点的FQ软件，多试验几次就ok了



5）初始化工程时会碰见停在如下地方，....此处可能需要长时间等待 。超时时间 运行大概10分钟，如果超时后提示下载失败，再实验几次（我在此处重试了好几次）



喜大普奔的是，这个只需要下载一回，之后这个项目再运行时，就不需要下载这么多东西了。如果下载过程出错，再运行下载时，已下载成功的包，无需再下载了。
另外，如果一直下载不成功，可以借用我在云盘上的一个测试工程：https://yunpan.cn/c3TBeBI39t57q （提取码：a98d）
下载下来后，在模拟器或者真机上安装此文件夹下的apk：hello\android\app\build\outputs\apk
然后就可以用此hello做测试开发，只是工程名只能叫hello了，也许只需将node-modules拷贝到你的工程目录下即可（目前没测试）。


5、初始化成功后，开发中常见的一些问题
1）只能开一个模拟器，如果真机usb调试打开，需要关闭。在cmd中运行，adb devices，保证只有一个设备：



2）Debug server host for device设置
关于红屏幕，只要出错，模拟器会在屏幕上提示错误，此处如果run-android、提示如下错误。
需要设置下：按F2->Dev Settings->Debug server host for device ，设置一个Debug server host for device为你电脑的ip地址。



3）关于React Chrome Developer Tools的使用。
现在就是react native在chrome的扩展工具React Chrome Developer Tools目前在windows下还是无法使用
（http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html ），当运行 react-native start时，在浏览器中键入http://localhost:8081/debugger-ui，会报一个如下的错误。



但是可以代理android的日志：启用Debug in Chrome,可在控制台看android程序的日志。
此处推荐可用android的ddms工具或者monitor也可以查看日志：
具体位置在android的sdk/tools中（如：D:\Program Files (x86)\Android\android-sdk\tools），在cmd中运行：ddms或者monitor后，可查看当前应用的调试日志，例如如下：



4）远程调试服务经常挂掉：
控制台常常会提示一些挂掉原因，一般只需重启就成，这个会常常挂掉。
此时模拟器或者真机中报如下connect错误，需要重新运行下react-native start或者npm start