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）

     然后漫长的安装......

     这里可以设置镜像，加速下载，例如：http://www.cnblogs.com/liongis/p/3659813.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