搭建React-Native安卓开发环境

最近一直在琢磨着使用react-native开发跨平台移动App，奈何手上拮据，没有入手Mac。在window10上搭建react-native环境遇到很多坑。查阅了很多的技术博客，发现在Mac进行环境搭建居多，而且面对的react-native的版本有点老旧，react-native官网已经更新到了0.55版本。环境的搭建已经出现了较大的变动，中文官网还没有进行更新。阅读 react-native官网文档,在window10上面搭建安卓开发环境，对遇到的坑进行解决和总结。

一、 安装环境与软件版本号

系统: window10 企业版2015长期支持方案
JDK： Java SE Development Kit 8u161（http://download.oracle.com/otn-pub/java/jdk/8u161-b12/2f38c3b165be4555a1fa6e98c45e0808/jdk-8u161-windows-x64.exe）
react-native: 0.55 (http://facebook.github.io/react-native/)
AndroidStudio: AndroidStudio 3.1.1.0（https://dl.google.com/dl/android/studio/install/3.1.1.0/android-studio-ide-173.4697961-windows.exe）
NodeJS：8.11.1(主要是安装nodejs的npm包管理器)
python ：2.7.14
复制代码

二、快速开启React-Native开发方式

React-Native官网提供了两种快速开启学习移动App开发的方式，一种是使用create-react-native-app的脚手架工具快速创建一个APP项目；另外一种是通过搭建安卓编译环境，然后使用react-native-cli脚手架工具生成项目，再进行开发。两者区别在于create-react-native-app可以在没有安装和配置环境和工具(比如AndroidStudio或Xcode)就可以开启一个项目，你需要安装好Node环境（即是npm）。

另外一种是需要搭建安卓编译环境（JDK，安卓SDK，安卓模拟器等等），过程比较麻烦。官网给出建议如果是想快速了解和学习react-native，不想搭建繁杂的环境，可以选择create-react-native，该方式还具有热加载的功能，代码上的改动会即是更新到app视图上。但是并不意味着以后就不需要搭建安卓编译环境，最后app开发完成之后，还是需要对代码进行编译打包成apk。下面分别对两种方式进行说明。

1.通过create-react-native-app方式快速开启

create-react-native脚手架是通过npm进行安装的，所以在安装脚手架之前需要安装npm包管理器，可以安装最新版本的node安装npm，安装完成之后，直接在命令行终端运行以下命令:

npm install -g create-react-native-app 
复制代码

接下来在你需要建立项目的目录下，运行以下终端命令，完成项目的创建工作,下面命令相当于创建一个名为example的项目。

create-reactive-app example
复制代码

进入创建的项目目录。对项目进行启动。

cd example
npm start
复制代码

项目启动之后，会提供一个开发的服务和打印一个二维码，你可以通过在AppStore(苹果手机App商店)或者GoogleStore下载 expo软件，然后通过expo的扫描二维码来浏览自己创建的项目。expo浏览的前提是expo所连接的网络和电脑开发环境的网络必须在同一个网段，建议是同一个WiFi或者通过电脑映射的wifi信号。facebook的这种快速浏览开发项目，可以避免繁杂搭建环境，最快上手react-native。

启动项目之后，运行如下图所示：

项目代码结构如下图所示:

在项目已经启动之后，可以对使用expo扫码浏览项目运行效果，但是expo的苹果版本，注册登录之后，并没有发现scanQRCode这项功能，关于Android版本的expo需要，所以自己采用了安装安卓模拟器的方式浏览（下面介绍第二种方式介绍安装方式）。启动安卓模拟器，在项目根目录运行npm run android或者打印二维码时的提示命令a利用js引擎来编译转换成安卓原生源码。运行效果如下所示，对App.js的源码进行改动会对及时更新到视图上：

2.通过react-native-cli方式快速开启

通过react-native-cli创建项目，需要JDK，Android SDK,Node,python支持。因为react-native的编译需要JDK8及以上版本(建议8版本，比较稳定)，python2.7版本.具体如上所示。JDK和python可以自行到官网下载，比较简单。react-native官网建议通过 Chocolatey安装，不过需要。所以还是建议通过自行官网下载。安装完JDK和python之后，下面需要对androidSudio进行安装，因为我们通过AndroidStudio来安装Android SDK和安装安卓模拟器。

配置jDK路径，对react-native编译过程需要JDK的支持，我们需要把jdk路径写进path里面，在我的计算机->属性->高级系统设置->环境变量，新建一个JAVA_HOME，默认情况之下，我们JDK安装的目录是如下所示：

安装AndroidStudio3.1.1.0， AndroidStudio默认会安装最新的Android SDK，所以在下载完AndroidStudio之后，需要选择custom自定义安装的方式. 编译react-native的app和原生安卓源码混合需要 Android 6.0 (Marshmallow) SDK。而Android 6.0 (Marshmallow) SDK可以通过SDK managers进行安装。需要确定Android SDK、Android SDK Platform、Performance (Intel ® HAXM)、Android Virtual Device被选中安装，因为react-native官网上的AndroidStudio和自己安装的版本不一样，所以采用自己的安装依赖步骤，下面在configure->SdkManager下面需要安装的依赖步骤。

接下来对SDK的路径进行建立环境变量，和JAVA_HOME一样，而android sdk的默认路径已经在上图中，不做再次重述。

安装react-native-cli脚手架，通过安装create-react-native-app相类似的方式安装react-native-cli。在命令行终端运行以下命令，安装、创建项目并运行。

 npm install -g react-native-cli
 react-native-cli init  AwesomeProject
 cd AwesomeProject
 react-native run-android
复制代码

项目结构如下图所示:

安装安卓模拟器，在AndroidStudio中创建安卓模拟器，步骤如下图所示: 项目运行效果下图所示: 通过react-native-cli编译的app是apk格式的，可以从模拟器上浏览：

三、 安装安卓模拟器遇到的坑

本人电脑是台式联想拯救者系列，安装安卓虚拟器需要在BIOS开启VT虚拟化功能，然后在win10系统中要进入BIOS需要连接独立显卡，独立显卡的接口是DVI接口，所以需要留意。下面是电脑的系统配置。

遇到 Could not find tools.jar. Please check that C:\Program Files\Java\jre1.8.0_151 contains a valid JDK installation.问题，可以通过修改JAVA_HOME路径解决。

win10搭建react-native的安卓开发环境到此完结。