详解react-native在windows下的环境搭建及存在的那些坑

对于想了解学习react-native的新手来说，如何搭建react-native运行环境是个头疼的问题，看了很多文章，但是老是在搭建的过程中遇见一些操蛋的问题，让人头疼不已。下面我就简单直接的如何教你在windows下快速搭建环境。
第一步：安装nodejs。
1. 到官网下载安装包
官网地址：https://nodejs.org/en/（最好是4.1以上版本）
2.安装nodejs。安装好后，管理员窗口（开始>>搜索程序和文件输入CMD,然后回车）输入node -v 命令，会出现nodejs的一个版本信息，输入npm会出现下面一推信息，如图

出现上面图中情况表示你安装好了，如果没有，那就手动nodejs配置环境变量（如PATH = D:\RN\webapps\nodejs;这是我nodejs安装路径），再重新打开窗口输入检查是否安装配置好了。
3.安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！下面命令选其一就可了：
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

第二步：安装react-native命令行工具react-native-cli
1.下载安装react-native命令行工具react-native-cli包
在管理员窗口输入下面命令:
npm install -g react-native-cli
也可以一起下载Yarn工具命令如下（二者选其一就可以了）：
npm install -g yarn react-native-cli

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
安装完yarn后同理也要设置镜像源（二者选其一就可以了，如果没安装yarn就略过）：
yarn config set registry https://registry.npm.taobao.org –global
yarn config set disturl https://npm.taobao.org/dist –global

2. 重新打开管理员窗口输入下面命令：
react-native -v
会出现react-native-cli工具的版本信息，如图：

如果你显示的是“’react-native’ 不是内部或外部命令，也不是可运行的程序或批处理文件。”
则需要手动配置react-native命令的环境变量：
首先搜索到我们下载的react-native-cli工具文件包：一般默认在C:\Users\Administrator\AppData\Roaming\npm\下面，如图：

配置环境变量： PATH=C:\Users\Administrator\AppData\Roaming\npm；再重新打开管理员窗口查看是否配置好。

第三步：安装JAVA的JDK。
1.官方推荐的安装是Java 1.8或更高版本。
官网下载http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
下载后完成安装。
2.配置JDK环境变量
1）新建JAVA_HOME变量 ，这是我jdk的安装路径配置如下。
JAVA_HOME = D:\RN\webapps\Java\jdk1.8.0_92
注意：没有分号（；）哦。
2）配置PATH变量。 PATH = %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
3) 新建CLASSPATH变量。
CLASSPATH=.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;
3.新打开管理员窗口输入 java 或 javac 会出现下面信息，如图：

第四步：安装Android Studio
为什么要安装Android Studio呢？主要是要用到里面的SDK和模拟器。 React Native官方目前推荐需要Android Studio2.0或更高版本。
官方地址:http://www.android-studio.org/
1.下载后完成安装。
除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
在初步安装完成后，选择Custom安装项：
确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
在初步安装完成后，选择Custom安装项：

检查已安装的组件，尤其是模拟器和HAXM加速驱动。

安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。

在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。

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

除了上面的必须安装后，本人还建议在Android SDK Build Tools中勾选
Android Auto Desktop head Unit emulator,这个是管理员窗口打开AVD虚拟机的指令，以后可以省略。
2.配置android sdk的环境变量。
新建一个环境变量，变量名：ANDROID_HOME的变量。
ANDROID_HOME = D:\RN\webapps\Android\sdk
（以你安装目录为准,确认里面有tools和add-ons等多个文件夹），点击确认。
注意：没有分号（；）哦，
在PATH中配置下面变量值。
%ANDROID_HOME%\platform-tools;
%ANDROID_HOME%\tools;
%ANDROID_HOME%\emulator;
配置完成后，新打开管理员命令窗口，输入adb命令，输入android命令


出现上面情况表示你已安装配置成功。
下面就来创建配置虚拟机，如图打开Android Studio，点击图中图标，进行配置，配置好后可以先启动下看是否配置成功。

没问题后，我来教你如你用管理员命令窗口打开虚拟机。
现在可以关闭当前的Android Studio软件已打开的虚拟机，打开管理员命令窗口输入：android list avd 会出现你配置好的虚拟机的信息。如图

在图中可以看到我们创建虚拟机的名字，如图中的AVD23和 Nexus_5_API_23虚拟机的名称。
输入命令：emulator @虚拟机名称 （如 emulator @AVD23）
这时虚拟机会执行启动，是不是省略的打开Android Studio软件麻烦的步骤，嘿嘿。
完成上面所有步骤后，下面我们来开始初始化项目。

第五步：开始初始化项目。
打开管理员命令窗口，进入你想放React-native项目的目录。
输入命令：react-native init 项目名称
如： 输入react-native init AwesomeProject，等待一段时间（较慢）。

执行完成后，进入你创建的项目目录
如 ： cd AwesomeProject ，然后输入下面命令启动react-native服务器。
react-native start
这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。如图：

然后我们进行在虚拟机上跑起项目。首先启动好一个虚拟机，重新打开一个窗口，进入你刚创建的项目目录。如E:\react_native_workspace\AwesomeProject
执行启动项目命令：
react-native run-android
如图：

在这个时候，如果你网速不是很好的话，会一直卡住在这里，我一般会ctrl+c中断命令，然后打开浏览器，输入窗口里面的地址进行下载gradle-2.4-all.zip文件。下载完成后不要急着解压文件，把该文件放到
C:\Users\Administrator.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv\
目录下面，该目录结构可能在不同的系统和插件版本下有所不同，具体目录自己找哈。
然后重新执行 react-native run-android 命令，它会自动解压刚才下载的文件，如果你解压了，他又会重新下载文件。
等待完全启动后，看虚拟机，OK。

最后，祝你好运！