运行react-native官方Examples步骤总结(Windows)

学习react-native就跟当初学习android一样，环境搭建完毕，代码也不知道怎么写，如果也没有demo运行一下看看这是个什么东西，总觉得RN很神秘复杂的样子。FaceBook官方早已经给我们准备了很好的学习资料，就是github上的官方demo，那如何跑到模拟器上，官方的介绍是相当简洁，但既然是官方的，那就按照人家说的试着做吧，同样作为初学者的我，耗费了两天时间才把这个demo运行到模拟器上，遇到问题无数，现把步骤做一下整理，希望对童鞋们有所帮助。

（一） 前提条件

确保你已经安装了react-native的运行环境（包括Node.js，Python，Android SDK，AndroidStudio2.0以上，NDK，等等），如果没有装，请看这里。

（二） clone 代码

通过git工具，从github把代码clone到本地，执行命令：
git clone https://github.com/facebook/react-native.git
代码很多：

（三） 安装cygwin

这个软件我也没用过，它是一个能在windows平台上运行的类UNIX模拟环境，因为要执行一些shell命令，windows不支持，所以要安装这个软件。先到官网下载，根据自己电脑选择32位/64位的，下载完之后，开始安装：基本都是默认，点击“下一步”，

安装路径也是默认就行：

一直“下一步”，直到这里，选择下面这个url：

这里需要选择要安装的组件：gcc、gcc-mingw、binutils、gdb，这四个是必须的：

选好组件之后，开始安装，我把4个组件全选了，安装的很慢
安装成功之后，配置环境变量：C:\cygwin64\bin（根据自己的安装路径而定，这个是默认的）

测试是否安装成功，打开cmd命令行窗口，输入bash，回车

这样就是成功安装而且配置好了。

（三） Android NDK

编译react-native需要用到NDK，如果已经你已经安装且配置过了“ANDROID_NDK”环境变量，这一步就过了，如果没安装的话，点击这里，（准备好VPN）,然后配置“ANDROID_NDK”环境变量

（四）添加项目依赖 node_modules

环境备好之后开始编译刚才clone到本地的项目

4.1

添加Node依赖模块，该命令行需要切到react-native项目根目录下，执行命令：

npm install

这个可能执行很久，耐心等待，执行成功大致是这个界面，就是下载了一堆项目依赖文件

（五）编译项目

这里也是我碰到错误最多的地方，前面几步几乎不会出现问题，好了按正常步骤开始执行。
打开刚才安装的cygwin，桌面上有快捷方式，进入到项目根目录下

执行命令（需要打开你的android模拟器）

./gradlew :Examples:UIExplorer:android:app:installDebug

这个项目里包含了好几个demo， UIExplorer 只是其中一个demo的名称，可以自行进入项目实际目录查看，运行其他demo只需切换项目名称即可。
这一步会执行很久，先看一下执行正常的界面：

我的用时是17秒，因为之前我已经编译过一次了，执行成功，紧接着，输入

./packager/packager.sh

打包成功！可以在模拟器上看到react-native这个app

太开心了，迫不及待地点开看看

当然了，这是没有出问题的情况，这个命令 ./gradlew :Examples:UIExplorer:android:app:installDebug
会出现诸多问题，我碰到的就是执行task downloadBoost这个下载任务失败，这个任务下载的react-native项目启动时的一些文件，都是C++的代码文件，如果不能自动下载的话，那就手动来吧，打开react-native\ReactAndroid目录，下面有个build.gradle，很熟悉吧~~~，找到30多行的位置，就可以看到这个
task downloadBoost任务了，

把这个url复制一下，放到浏览器地址栏，可以直接下载这个boost压缩文件，大概100多M，下载完成之后，放到这里

如果没有的话，自己造一个目录就行。仅仅放到这里还不行，最关键的一步就是，设置到环境变量，让react-native编译的时候能自动找到它，我们可以在build.gradle文件中看到这两行

System.getenv("REACT_NATIVE_DEPENDENCIES")这句话就是获取REACT_NATIVE_DEPENDENCIES的环境变量，作为react-native的启动目录，上面的代码注释的很清楚，不要感觉配置文件看起来很难的样子，我一开始也很抵触研读这些东西，其实只要认真，耐心看完，是可以看懂的，下面配置环境变量就很简单啦，把路径：D:\AndroidStudioProjects\ReactGitDemo\react-native\ReactAndroid\build\downloads（注意：这个路径是我的！！！）设置到REACT_NATIVE_DEPENDENCIES就可以了

下面，重新打开cygwin，重新执行./gradlew :Examples:UIExplorer:android:app:installDebug命令，应该差不多可以了，如果出现其他问题的话，这里是官方issue的集中营，搜关键字试一下，会有你想要的答案。

最后，我想说的是，万事开头难，既然想学react-native的话，就不要害怕碰到问题，目前这门技术还不算是非常成熟，但是我觉得如果我们能在react-native普及之前学会它，那我们获得的收获才能最大化，我也是一路摸索着学习的，进度很慢，但肯定会越来越好的。

我也是个初学者，这篇文章里如有错误之后请大家帮忙指出，个人QQ：294958260，也欢迎大家一起讨论，共同学习！