React-Native环境搭建（Windows for Android）

转载请注明出处：http://blog.csdn.net/crapulencezzz/article/details/52830207

古语有云：君欲善其事，必先利其器。万事开头难，这次就来教大家怎么搭建React-Native的开发环境。由于我是在Windows平台上开发Android应用，其他平台的可以移步下面网站找寻你们对应的教程：

• React Native官方网站：https://facebook.github.io/react-native/
• React Native官方网站中文版：http://reactnative.cn/
• 江清清的技术专栏：http://www.lcode.org/react-native/

好了，废话不多说，开始今天的教程。需要安装的软件如下：

JDK
这个做过Andriod和Java开发的就不用我详细介绍了吧。
下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html
注意下载的时候区分x86和x64，x86的为32位操作系统，x64的为64位操作系统。
安装完成后配置环境变量如下：

这里是把你安装JDK的bin目录配置到path：


配置完环境变量可以试着在命令行执行下面的命令，如果出现对应的版本号说明配置成功：

其他软件的环境变量配置和上面类似，后面就不一一列举了。

Android Studio
作为Android开发者不可能不知道这个IDE工具吧。
下载地址：

• https://developer.android.com/studio/index.html（官网，需要梯子）
• http://www.androiddevtools.cn/（国内的一个不错的可以下载Android开发工具的网站）

安装完成后第一次启动Android Studio它会让你去导入本地SDK或者去官网下载SDK，注意下载安装要保证以下项目已经更新到最新或者保证是下面的版本号，如果后面出问题了可以看看这里的配置是否正确。

Tools/Android SDK Tools (24.3.3)
Tools/Android SDK Platform-tools (22)
Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1）
Android 6.0 (API 23)/SDK Platform (1)
Extras/Android Support Library(23.0.1)
Extras/Android Support Repository

另外还需要将sdk目录下的platform-tools配置到环境变量中。

Node.js
React Native是基于JS的，node.js是轻量级的Web服务器，想要RN项目跑起来就需要安装node.js。
下载地址：https://nodejs.org/en/，下载4.1或更高版本。
下载安装后检查是否安装成功以及对应的版本：

这里建议设置npm镜像地址以加速后面的过程（或者使用科学上网工具）：

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

Git
版本控制工具，不用多提了吧。
下载地址：https://git-scm.com/download/win

Python
node.js中使用GYP进行项目构建管理，而GYP是基于Python的构建工具，所以需要安装Python。
下载地址：https://www.python.org/downloads/
注意要下载2.7.x版本，貌似不支持3.x版本。

C++环境
在Windows环境下，node.js采用GYP来生成Visual Studio Solution文件，需要通过C++的编译器将其编译为二进制文件。
下载地址：http://msdn.itellyou.cn/
下载Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。如果使用VS2015，你需要在命令行中设置：

npm config set msvs_version 2015 --global

React Native命令行工具
执行下面的命令：

npm install -g react-native-cli

==================华丽的分割线==================

前面都弄完了就可以创建RN项目了。
1、进入你的工作目录，执行下面的命令就可以创建你的RN项目：

react-native init HelloRN

耐心等待数十分钟。。。

运行完后生成的包目录结构如下：

2、运行packager

react-native start

接着等。。。直到出现 React packager ready.

这时候就可以用浏览器访问：http://localhost:8081/index.android.bundle?platform=android，如果可以看见很长的一段JS代码，说明就OK了。

3、运行项目到模拟器或真机
注意这时候前面的那个命令窗口不要关闭，需要另开一个命令窗口，执行下面的命令：

react-native run-android

然后又是漫长的等待，这中间可能要等上一个小时也不为过。因为需要去网上下载gradle依赖，也还可能会报错，比如下面的：

error: closed
Could not run adb reverse: Command failed: D:\Develop\android-sdk/platform-tools/adb -s 040BBGNKRJGD reverse tcp:8081 tcp:8081

这时候就需要检查前面的SDK是否正确，环境变量是否配置等。上面的错误可以参考这个问题：http://stackoverflow.com/a/38870535/6482350

出现Starting以后你的手机或者模拟器应该会出现一个红屏页面，这是正常的，这时候摇一摇手机可以出现一个对话框，选择Dev Settings，点击Dubug server host & port for device，设置IP和端口（正在运行packager的电脑的局域网IP，端口为8081，注意这时候电脑和手机要在同一网段内）。我用的魅族MX2（Android 4.4）做的测试，发现摇一摇以后并没有任何反应，然后我就手动设置了代理，并在电脑上使用Fiddler工具保证手机代理到电脑的网络。



设置完代理后，点击红屏里的Reload，哈哈，终于出来了React Native的欢迎界面！至此，前期的搭建过程完成！