Win7上React Native Android开发环境搭建

最近有时间来学习React Native,首先从搭建开发环境开始。由于没有Mac,只好在Windows上搭建开发环境，官方文档说Facebook的工程师并未特意针对Windows平台做兼容，看来即便不做iOS也还是有必要搞一台Mac了。

主要参考资料

• React Native官网
• React Native中文网

如果英文好的话可以直接去看官网，喜欢看中文的可以看上面的中文站，翻译比较准确，内容也比较新。

Win7上搭建React Native Android开发环境

首先说明一下，本人电脑是32位Win7操作系统，由于平时做Android开发，因此JDK、SDK等已经安装好了，根据文档说明开始安装各项必需的环境。

安装JDK

做Android开发的这个已经有了。

安装Android SDK

这个也是必须的，做Android开发的肯定也已安装了。这里有一点要注意，需要为SDK配置环境变量，名称为ANDROID_HOME，值为SDK路径，不然编译APK时会报错。之前Android开发配置的环境变量名称为ANDROID_SDK_HOME，这个不能被React Native使用。当然如果不想配置环境变量，可以从Android Studio工程里将local.properties文件拷到RN项目的android文件夹里。

安装Git

这个也是平时常用的，已有，注意windows平台要选择Git for Windows。

安装Python

文档建议python版本为2.7.x，之前做爬虫时也安装过，只要版本合适也不需要重新安装。

安装node.js

由于搭建过Hexo博客，因此node.js我也已经装好了，建议安装最新版本。

安装C++环境

教程上说编译node.js的C++模块时会用到，电脑上装过CodeBlocks，已带有MinGW模块，因此也不需要安装了。

一路上下来，发现很多需要的模块以前都已安装好了，莫非就是为React Native准备的，哈哈！

安装React Native命令行工具

为了下载速度，可以使用淘宝的镜像，先做如下设置：

npm config set registry https:registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

然后安装RN命令行工具：

npm install -g react-native-cli

这个过程很快就可以完成，接下来就是创建RN工程了，可以先cd到想要创建工程的目录，然后使用如下命令：

react-native init AwesomeProject

工程名称可以随便定义，这里使用了官网的示例名称，这个过程比较长，因为会下载React Native库及Gradle相关的东西，教程上说大概需数十分钟吧，我等了大概十分钟，还没创建好，就回家了，第二天已全部下载好了，大概120多M。不过再次创建一个新的工程时就比较快了，两三分钟可以搞定。

必备环境的版本详情

我最终的环境版本是这样的：

• react-native-cli: 0.1.10
• react-native: 0.18.1
• node.js: 5.3.0
• python: 3.4.3

RN for Android demo调试

启动服务

使用如下命令，来启动packager

react-native start

在命令行窗口可以发现为该服务分配了8081端口，可以通过浏览器访问http://localhost:8081/index.android.bundle?platform=android来查看服务是否正常启动，如果没有正常启动，那么就不要安装App了，安装了也不会正常运行。

我在这里遇到一个错误，当在浏览器中打开上述url时，返回如下错误：

解决方案是删除工程中\node_modules\react-deep-force-update目录下的.babelrc文件。之后再在浏览器中访问上述url，会显示如下界面，说明服务已成功启动。

安装App

可以将App安装到Android自带的模拟器或者Genymotion，我更习惯直接用真机调试，因此需要USB将手机连接到电脑，之后运行如下命令(建议新开一个命令行窗口，并保持服务处于启动状态)，可将APK安装到手机上：

react-native run-android

这个过程跟Android Studio上编译构建APK是类似的。

真机运行App

这里要注意，测试运行时需要保证手机跟电脑在同一个局域网内，需要根据手机版本做不同的设置，具体如下：

5.0及以上设备

运行如下命令：

adb reverse tcp:8081 tcp:8081

然后就不需要其他配置了，点击Reload JS就可以加载示例界面，查看运行效果。

5.0以下设备

1. 首次打开应用，会看到一个红屏的错误页面，这是正常的
2. 如果手机没有Menu键的话，可以通过摇动手机打开调试菜单，在模拟器上可以通过按F2调出
3. 点击进入Dev Settings
4. 点击Debug server host for device
5. 输入电脑的id地址，并附上8081的端口号
6. 返回初始界面，再次摇出调试菜单，点击Reload JS,即可加载具体的界面内容

运行结果如下：

修改js内容，在手机端重新加载

使用你喜欢的js编辑器，如Sublime Text，简单修改js里面的文本内容，之后保存。在Android手机上点击Reload JS,则客户端已经同步更新，这一过程并不需要重启电脑上的服务，相当方便。如过React Native技术成熟之后，用这种方式进行热修复和版本更新，岂不是太爽！我简单修改了一点文本内容，显示如下：

React Native,Learn once, write anywhere, Please enjoy it!