Windows下reat-native 环境配置（包含nodejs细节安装）

版本声明：

Node.js : v8.9.4

React-native: 0.53.3

Android studio 2.2.3(gradle自带的版本是2.14.1)

       关于Android下的环境配置我就不多说了，react-native中文网上说的很清楚，这里给出传送门  React-native 中文网 ，我这里说下，比较关键，

出现问题比较多的node.js的安装问题和拉取第一个项目时需要注意的小细节。

1. 下载node.js   (nodejs官网)

（1）安装：

按照提示下一步、下一步安装即可，为了方便下面的讲解，给出我的安装目录：E:\ReactNativeDevelop\nodejs\ 

（2）添加node.js环境变量：E:\ReactNativeDevelop\nodejs\

（3）检查是否安装成功：

安装完成后，cmd打开命令行窗口，运行命令node -v    npm -v，如果显示如图，证明安装成功：

2. node.js 预设置

设置 node_modules 和 node_gloable 的目录

如图，在nodejs同层目录下新建node_cache和node_global两个文件夹

使用 npm 命令 设置 cache 和 node全局存放目录

	npmconfig set cache "E:\ReactNativeDevelop\node_cache"
 
	npmconfig set prefix "E:\ReactNativeDevelop\node_global"

 

设置完后，以后所有npm安装的node_modules都会放在node_global下了，否则会默认放在C:\Users\Administrator\AppData\Roaming\npm目录下，装在C盘这不是我们期望的

3. 安装react-native 

一句命令搞定

npm install -g react-native-cli

注意，这里如果一提示正在下载gradle-2.14.1.zip文件，就赶紧CTRL+C结束吧，等他下载完，不知道让你等到什么时候了。

问题解决：

前文提到windows Android开发环境是Studio2.2.3的，自带的gradle版本是gradle-2.14.1，那么我们要想让他不下载需要将gradle-2.14.1.zip放置到你的gradle仓库中，如此拉新项目的时候才不会自动去下载。

PS: gradle仓库地址默认在C:\Users\用户名 \.gradle下，放置地址C:\Users\用户名 \.gradle\wrapper\dists，如果你在studio中设置了更改了gradle仓库地址，请按最新的地址来放置gradle-2.14.1.zip！

 

设置完gradle.zip的地址后重新运行npm install-g react-native-cli，这时就不会提示去下载gradle-2.14.1.zip文件了，成功后如图显示：

如此，我们成功的将react-native-cli安装在了E:\ReactNativeDevelop\node_global目录下

此时我们需要

(1)      添加E:\ReactNativeDevelop\node_global\node_modules至环境变量Path中

(2)      添加E:\ReactNativeDevelop\node_global至Path中，方便我们使用react-native命令

安装成功后的文件截图：

4. 拉取react-native示例项目

   使用命令

   react-native init AwesomeProject

   这里需要等待一会，成功后，会显示：

这里它会提示你进入AwesomeProject项目工程目录中 运行命令将应用跑在Android或者IOS设备中

那么我们按照提示进入AwesomeProject中，运行命令react-native run-android

这里最容易出现的问题就是react-native本地服务器连接不上之类的错误：

这里给出一张经典的报错图：

相关的问题解决见我这篇博客：React-native 完美解决 Unable to load script from assets “index.android.bundle” 和 JS server not recognize

解决完错误后，我们成功的run到了手机上：