Windows下搭建ReactNative开发环境（Android）

学习了一段时间ReactNative，最近有空总结一下，同时给正在学习ReactNative的伙伴提供参考，少走弯路。现在网上大部分的教程都是不怎么完善，或者是Mac下的实现，然很多人对ReactNative望而却步，官方的文档也是过于简单，很多问题都没有记录，我经过自己的实践总结，本文主要记录怎么搭建ReactNative环境并且创建一个Hello World（Android）程序。

---

安装JDK

首先从Java官网下载JDK并且安装，接下来要配置JAVA_HOME环境变量。
配置方法：计算机右键 - 设置 - 高级系统设置 - 高级 - 环境变量，配置如下图：

这里要注意JAVA_HOME是全大写的，JDK最好选择v8版本，我没有尝试过v7版本不知道能否成功。这个目录是bin的父目录，也就是根目录，非bin目录。

然后打开CMD，输入

javac -version

出现如下图表示配置正常

---

安装Adnroid SDK

如果有Android Studio这个步骤可以跳过了，没有也可以单独安装Adnroid SDK或者直接安装Android Studio，但是要注意几个问题：

• 其中Android SDK Platform-tools必须是23.0.1或者以上
• 其中Android SDK Build-tools 建议安装23.0.1
• 更新Android Support Library
• 更新Android Support Repository

更新仓库的原因是在于ReactNative引用了AppCompact-V7/RecyclerView-v7等依赖库，确保这些库含有23.0.1以上的版本，可以在Android-SDK\extras\android\m2repository\com\android\support看到。
谷歌对于Android已经设立中国服务器，所以不需要设置镜像也可以快速下载了。

下载后还要配置ANDROID_HOME，操作也是和配置JDK一样：

这里的目录也是SDK的根目录，测试方法，打开CMD输入：

echo %ANDROID_HOME%

如果出现配置的目录代表配置成功：

---

安装Node.js

进入Node.js的官方下载LTS版本安装即可，很多教程说是要4.0以上，本人下载的是node-v6.10.0版本（发文时最新的LTS版本），这个比较简单，安装完成后就自动配置好了，不需要另外操作。
安装完成后可以在CMD输入：

npm

看看有没有类似信息，有则代表安装成功了：

---

安装Git for Windows

这个也是直接从官网下载安装包一路安装成功就可以了，没有什么特别需要注意的地方。

---

安装ReactNative命令行工具

上面所有操作都是搭建ReactNative的安装环境，下面我们来安装ReactNative，安装方法非常简单，直接打开CMD，输入：

npm install -g react-native-cli

这里利用npm包管理器自动帮我们下载并且安装，其中-g代表全局安装。
安装成功后应该显示：（我这里已经安装过了，所以第一次安装显示可能有区别）

这个可能有些人外国网站访问速度很慢，可以通过设置镜像服务器（淘宝提供的）来解决：

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

然后重新安装即可，也可以直接从github上下载源码然后安装，这里就不在叙述了。

---

创建第一个ReactNative项目

经过上述的操作已经搭建成功了，下面我们来创建第一个ReactNative项目。
打开CMD，输入（注意默认在当前目录创建）：

react-native init FirstProject

其中FirstProject是这个项目名，你可以改一个炫酷的名字作为你的第一个ReactNative项目。
这个步骤十分漫长，主要是下载一些文件，第一次大约10分钟左右。

初始化成功后应该如下图所示：

然后进入项目，运行ReactNative Packger

cd FirstProjectreact-native start

然后等待成功，成功后如图（不会结束命令，也不要关闭窗口）：

然后可以在浏览器上访问下面路径测试打包后的脚本是否能访问到：

http://localhost:8081/index.android.bundle?platform=android

第一次访问比较慢，可以在刚才的命令行看到编译JS的过程（图示为成功编译）：

如果正常可以在浏览器看到：

接下来就是运行Android程序了，注意不要关闭刚才ReactNative Packger，重新打开一个新的CMD，执行（cmd路径在项目中）：

react-native run-android

这个操作第一次十分漫长，主要分为下面三个操作：

• 下载Gradle
• 下载依赖
• 编译App并运行

下载Gradle这个步骤十分漫长，由于访问的外国服务器，所以可能要等待很长时间，大家也可以手动下载放到对应目录重新运行一次命令，具体这里不再叙述了。
如果你使用的是国内的手机，如无意外，最后会出现如下的错误：

这个错误是App安装失败，具体可以参考

https://github.com/facebook/react-native/issues/2720

国内的手机如果出现这个问题，我总结了2种解决方法：

• 手动安装应用到手机
• 更改Gradle版本重新运行

第一种方法很简单，直接进入

FirstProject\android\app\build\outputs\apk\

目录，利用adb安装：

adb install app-debug.apk

这样就可以安装成功了
第二种方法则是修改Gradle配置文件：
首先修改

FirstProject\android\build.gradle

其中版本号改成1.2.3，如下所示：

buildscript {    repositories {        jcenter()    }    dependencies {        classpath 'com.android.tools.build:gradle:1.2.3'    }}

然后修改下面的配置文件：

FirstProject\android\gradle\wrapper\gradle-wrapper.properties

把Gradle的版本改成2.2：

distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip

然后重新运行命令（又是一个漫长的等待，要重新下载Gradle）
如果运行成功，会看到手机（或者模拟器）启动了一个应用，而命令行提示：

不过如无意外，应该app显示红屏或者白屏或者是JS错误，这种情况是App访问不到ReactNative的Packager服务，所以要设置一下。
点击手机的菜单键（没有的可以摇一摇），选择Dev Settings，选择Debug server host & port for device：

输入电脑端的ip和端口（没有设置则为8081），可以电脑和手机连接到同一个wifi，通过ipconfig来查看电脑ip，然后确定后，重新打开一次菜单，点击Reload JS就可以看到Welcome的字眼了，如下图：

至此，你已经成功搭建了ReactNative的开发环境了。

下一篇将讲述在已有的Android项目下集成ReactNative，敬请期待。

---

声明

原创文章，欢迎转载，请保留出处。有任何错误、疑问或者建议，欢迎指出。我的邮箱:[e-mail]