在Windows平台搭建ReactNative全套开发环境

前言

本文将基于以下应用，搭建ReactNative在Windows平台下的开发环境，截止至发稿日期，全部采用2018年最新的应用环境，并调整了搭建顺序，加快搭建速度，优化国外网络下载速度。本环境在Windows7 和Windows 10系统平台上均已测试成功，分享给大家。

1.所需开发环境

Git（用于下载React Native）
Android Studio（开发安卓代码）
Genymotion（安装程序运行模拟器，非必须安装）
Node.js（v8.9.3）
React Native Command Line Tools（v2.01）
WebStorm （最好用的JS编辑器）

2.安装Git

GIt用于下载安装 React Native，在安装过程中注意勾选”Run Git from Windows Command Prompt”，这样才会把git命令添加到PATH环境变量中。

下载安装：https://gitforwindows.org/

3.安装Android Studio

①下载AndroidStudio

谷歌中国下载地址已恢复正常使用，下载安装即可：
https://developer.android.google.cn/studio/index.html

②修改Android Studio中SDK默认路径

系统盘有剩余几十G空间的直接跳过此步骤亦可。

SDK默认在系统盘（可能需要10~20G），如果系统盘空间不足，最好提前将SDK移动到其他盘。方法如下：
在Tools->Android ->SDK Manager修改一下，若用Genymotion，也要统一SDK位置（下方有提示）。

③在Android Studio中下载API 23.01（必须此版本）

打开Android Studio（或在SDK目录中，打开SDKmanager下载亦可）

在Tools->Android ->SDK Manager中下载部分API 23（不要全部勾选下载，浪费磁盘空间）：
在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选：
Google APIs、
Android SDK Platform 23、
Intel x86 Atom System Image、
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image(共5项必装)

这里写图片描述

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选
Android SDK Build-Tools 23.0.1（必须是这个版本）。
Android Support Repository（共2项必装）

这里写图片描述

④配置Android SDK的环境变量

这里写图片描述

⑤配置Android tools环境变量

将tools目录加入到Path中，方便使用Android工具，例如android avd或是adb logcat等。
这里写图片描述

⑥启动一款Android模拟器

运行项目需要先启动模拟器，可以选择AndroidStudio自带模拟器或者第三方模拟器，如Genymotion等

方式一：创建Android Studio自带虚拟机

Android Studio创建虚拟机关键选项：

注：用Android Studio自带的模拟器，最好选择Api 6.0 以上的版本，6.0以下版本，需要在开发者模式中配置nodejs包管理地址，徒增麻烦。

这里写图片描述

方式二：下载和安装Genymotion

选择带VirtualBox版下载安装：https://www.genymotion.com/download

注：genymotion需要依赖VirtualBox虚拟机，若未曾安装VirtualBox，请选择带VirtualBox版。

安装完后，将Genymotion中绑定的Android SDK修改为自己的。
这里写图片描述

启动虚拟机后，在终端执行命令“adb devices”可以看到，说明就可以调试了(该命令需要将sdk\platform-tools加入环境变量)。

4.安装和配置Node.js

①根据电脑系统，下载并安装：

http://nodejs.cn/download/
注：下载.msi格式可以自动添加环境变量。

②验证是否安装成功

终端cmd下输入：npm -v

若出现版本号，则成功。若不成功，将安装目录加入环境变量再试试。
这里写图片描述

注：NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题

③设置连个标签和缓存文件夹：

在安装目录下创建两个文件夹：
名字为：node_cache 和 node_global；
绑定两个文件夹，在终端执行命令（需修改为你的安装路径）：
npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"
测试：
执行命令，能安装模块则成功：npm install express -g
这里写图片描述

④配置环境变量：

将安装目录加入系统Path ：
D:\Program Files\nodejs;
将文件夹node_global加入用户环境变量Path中：
将node_global路径加入Path，后加一个英文分号：
D:\Program Files\nodejs\node_global;
这里写图片描述

将镜像地址改为国内的淘宝镜像，提高下载速度：

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

npm config set registry https://registry.npm.taobao.org --global

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

注：上述配置信息保存在：C:\Users\54121.npmrc

测试：终端输入命令，成功则出现下图提示：
node

require('express')
这里写图片描述

5.安装React Native

①选择一个安装路径，创建名为 react-native 文件夹

例：在“D:\Program Files\“下，创建react-native文件夹，作为react-native的目录。
这里写图片描述

②在上述文件夹中，将RN从GIt克隆到本地，在终端执行命令：

D：
cd D:\Program Files\react-native
git clone https://github.com/facebook/react-native.git

这里写图片描述

③进入安装目录,执行命令安装：

D：

cd D:\Program Files\react-native\react-native-cli && npm install -g

这里写图片描述

④用 react-native –help 可以查看命令,若出现下方提示，则成功。

这里写图片描述

若出现下方提示，表示环境变量配置的node_global文件夹没有配置好，需重新配置：
这里写图片描述

6.创建第一个React Native项目

①自己选定一个工作空间的文件夹

本文选择”F:\ReactNativeWorkspace“
注：工作空间文件夹最好不要和react-native的安装目录在一个磁盘，否则可能出现”operation not permitted“的错误（小坑）。

②创建一个项目

在终端进入此文件夹，执行命令：react-native init hello，出现下图所示即成功。
这里写图片描述

注1：此过程React Native 自动下载依赖包（约70M），速度取决于连接国外的网速，由于我们将镜像优化为淘宝的镜像，只需10秒就完了。否则可能需要接近一个小时。

注2：创建新项目（执行react-native init ）报错，可以清一下缓存再试：npm cache clean –force；再次提示，若一直报错“npm ERR! Error: EPERM: operation not permitted”，换个磁盘重新创建项目，不和RN安装目录在同一磁盘，成功解决。

注3：如果出现““Error: EPERM: operation not permitted”，原因还可能是项目名首字母出现大写，项目名需作为包名，需要小写，编译如下图：
这里写图片描述

ReactNative会自动创建名为“ReactNativeDemo”的项目，创建完成如下图：
这里写图片描述

7.通过终端命令行运行项目

①初次启动需将项目模块下载到该项目中

终端进入自己项目根目录，执行本地安装命令：npm install

这里写图片描述

②启动模拟器

终端启动命令：
获得模拟器名称（需将SDK\tool文件夹加入环境变量）：

emulator -list-avds

这里写图片描述
进入SDK的tool目录下，并启动模拟器，执行命令：
G:

cd G:\adt-bundle-windows-x86_64-20140321\sdk\tools && emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_23

这里写图片描述

③进入项目目录运行项目，运行项目：

运行项目命令：
cd I:\Workspace\ReactNativeProjects

react-native run-android

成功运行项目后，如下图：
这里写图片描述

若出现错误：“Make sure you have an Android emulator running or a device connected”，
这里写图片描述

注：node.js访问地址,可以在浏览器中打开，若出现未报错的JS代码，说明nodeJS服务启动成功：
http://localhost:8081/app.js?platform=android&dev=true&hot=false&minify=false

nodeJS服务终端显示如下：
这里写图片描述

模拟器显示如下：

这里写图片描述

8.通过Android Studio运行React Native项目

①打开项目，通过 File->open File ,找到项目文件下的android，打开项目。

这里写图片描述

注：若包启动管理器出现异常，则先进入项目根目录下，执行 npm start，启动包管理器服务器。

注：若提示更新gradle，先选择忽略，升级后可能造成与RN版本不匹配问题。

9.安装 WebStorm JS编辑器

①下载地址

点击下载

②激活，需要联网

点击第三个选项 license server，然后输入地址：
http://idea.singee77.com 或者 http://im.js.cn:8888
点击discover server，然后点击Activate，如果能成功进入软件，说明成功了。

③使用Webstorm运行项目

open项目，找到项目路径。
然后启动模拟器，共享一个启动模拟器的命令行，将其保存为.bat文件，直接双击就可以启动Android Studio自带模拟器了,而不用通过Android Studio启动，方便快捷，将G盘修改为你模拟器所在盘符和所在目录即可。
G:
cd G:\adt-bundle-windows-x86_64-20140321\sdk\tools && emulator -netdelay none -netspeed full -avd Nexus_5_API_23
点击运行即可，WS自带终端窗口，非常方便。

10结束语

这一套系统算是搭建完成了，将来开发推荐使用ES6或者ES7吧，与时俱进。本文整合NodeJS包管理工具、ReactNative命令行工具、Git、Android SDK、Android 模拟器，形成一套完整的跨平台WebApp开发平台，关于IOS平台部分，以后再出，祝顺利。