Windows环境下Android的ReactNative开发环境搭建

注意：本文档仅适用于WINDOWS环境下的Android开发环境搭建

最近在研究React Native的开发，因为本人之前一直是做java开发，app开发还是第一次，没有一点经验，从零到一，在官网上、论坛里找帖子找各位大牛的博客一点点搭建并开始第一次开发。一开始在开发环境的搭建上也走了不少弯路，首先SDK的安装和配置就看的稀里糊涂，不知道哪些必须装哪些选择性安装，导致最后安装完，sdk文件夹达到惊人的70.1G，鄙视自己一下。。。。。。

现在，趁热打铁，我根据自己的搭建步骤，写一下WINDOWS环境下Android的React Native开发环境的搭建。里面还写了一些自己遇到的问题。给大家做个参考，欢迎大家批评指正。

1.确认本机jdk版本，最好是1.8及以上

2.sdk下载、安装及配置

SDK下载地址：http://www.androiddevtools.cn/

 

 

 

安装版或者压缩版均可。

安装完毕后，打开目录下的SDK Manager.exe文件。如下图所示

 

我们需要通过Android SDK Manager安装一些必须的工具，下面分三个截图进行展示

 

                            图1

如图1所示，Tools文件夹里面的Android SDK Tools（这个我们在之前的一步已经下载好了的，一般不会让你再安装了，不过有可能会让你更新），然后就是Android SDK Platform-tools和Android SDK Build-tools，一般只需要下载最新的版本就行了。这里，Android SDK Build-tools,我除了26.0.1，还安装了23.0.1，因为在后续的项目搭建、运行中，提示缺少23.0.1，所以再次打开Android SDK Manager，安装了23.0.1.

 

                              图2

然后是Android API的选择，主要是创建模拟器时需要的文件，因为是向下兼容的，所以一般选择最新版下载即可。这里我先安装了Android8.0.0，后续又安装了6.0，是因为第一次搭建开发环境，初次启动项目的时候报错，提示缺少SDK Build-tools 23.0.1以及缺少Android SDK Platform 23的支持，所以也安装了Android6.0的SDK Platform。SDK Platform下面的“xxxxx System Image”，如果不用安卓自带模拟器的话，可以不用安装，如果选择安装，速度很慢，占用空间也很大。

 

 

                            图3

如图3所示，需要选择安装附加的库、驱动等，建议全部安装。

 

因为上述所有功能是需要从google的服务器上进行下载，有可能因为连接不上而会无法下载（我在安装的过程中没有遇到这种情况）。如果遇到这种情况（如下图），

 

 

这时可以选择一些Android SDK的国内镜像服务器来下载安装：

1、中科院开源协会镜像站地址:

IPV4/IPV6 : http://mirrors.opencas.ac.cn 端口：80

2、北京化工大学镜像服务器地址：

IPv4: http://ubuntu.buct.edu.cn/  端口：80

IPv4: http://ubuntu.buct.cn/  端口：80

IPv6: http://ubuntu.buct6.edu.cn/  端口：80

3、大连东软信息学院镜像服务器地址:

http://mirrors.neusoft.edu.cn  端口：80

 

具体操作见下图：

 

 

接着选择Close，关闭对话框，再重新启动SDK Manager。

 

 

                         安装完成后的目录结构

 

由于直接使用SDK Manager在线下载安装的方式，所以安装过程比较长。我第一次搭建，安装完毕之后，system-images目录下，android-23文件夹占了31.1G,android-26的文件夹占了10G，后来发现，如果不用Android自带模拟器的话，是不需要安装SDK Platform下面的“xxxxx System Image”这些东西的。

最后全部安装完毕之后，大概有2.13G。

 

由于下载过程很缓慢，所以，如果有相应功能的压缩包，可以直接解压缩，放到相应目录下，然后在SDK Manager中，点击Tools，选择options，点击Clear Cache清除缓存，重启SDK Manager。

 

安装完毕后，要配置sdk的环境变量。

ANDROID_HOME：Android SDK Manager的位置。

比如：E:\DEV\android-sdk-windows

然后，需要在Path变量后添加：

%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

配置完毕后，在命令提示行输入adb version验证是否配置成功。如下图：

 

 

3.安装Node.js

直接下载安装即可，下载地址：https://nodejs.org/en/

安装完毕后，输入node -v验证安装是否成功。如下图

 

4.安装Git

下载地址：https://git-for-windows.github.io/

在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中。如下图

 

安装过程，一路next即可。

5.安装react-native命令行工具react-native-cli

接下来是clone React-native-cli了，建议将react-native-cli克隆到某个盘，不要在c盘直接clone 

1）在命令行中进入想要安装React Native的目录

2）输入git clone https://github.com/facebook/react-native.git，等待下载 

 

3) 进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g 

安装完毕后，就可以使用react-native命令了

 

6.创建React Native项目

进入你希望创建项目的目录后，输入react-native init xxxxxxxxxxx，这里“xxxxx”代表项目名称。比如，这里，我在E:\workspace99目录下，新建一个名为“ZyRNProject”的项目，进入目录，我们敲入命令：“react-native init ZyRNProject”

成功后如下图所示

 

 

 

7.下载安装安卓模拟器

建议安装第三方的安卓模拟器，比Android自带模拟器要好用，占用资源也少。这里，我使用的是Genymotion模拟器。在官网下载，需要先注册一个帐号，个人版不收费。

8.运行package

命令行，进入项目目录，输入：react-native start，等待一段时间

 

 

浏览器访问http://localhost:8081/index.android.bundle?platform=android

如果可以访问，表示服务端已经可以了。如下图

 

9.运行项目

新打开一个命令行（刚刚打开的package不要关闭）

进入项目目录，输入react-native run-android在输入此命令前，要先打开模拟器！

 

如果是第一次运行，首先会下载gradle，命令提示符窗口会出现很多省略号，时间较长，不要着急，这是正常的。

 

运行成功，如下图所示

 

如果运行失败，具体错误信息会在命令提示符窗口中显示。我在第一次运行过程中，提示“SDK NOT Found”，而事实是我已经将sdk安装并配置好，版本检查也没错。这时我把两个命令提示符窗口关闭，重复第8、9两步，问题解决。

运行成功后，模拟器上会出现如下图的展示：

 

如果需要重新加载，可以使用组合键：Ctrl+M，选择Reload。

 

10.IDE安装以及添加插件

这里，我选用的Visual Studio Code

下载地址：https://code.visualstudio.com/Updates 

 

安装完毕之后，需要添加插件（也叫扩展）。打开VSCode，在左侧，我们点击扩展按钮

 

在这里，我们可以搜索需要的扩展进行安装，也可以对已安装的扩展进行管理，上图中可以看到我已经安装的扩展，我们首先需要安装的扩展是“React Native Tools”。

扩展安装完毕之后，需要重启VSCode，扩展才能生效。扩展除了在线安装，还支持本地扩展的安装。

11.项目导入

VSCode安装配置完毕，选择“文件”》“打开文件夹”，选择我们的项目，就可以打开我们的项目，进行开发了。

注意：如果是从SVN、TFS或者Git等版本控制服务器上获取下来的项目，要先用命令行进入到项目目录，执行“npm install”命令才可运行。