React-Native 环境搭建指南[阿鹏出品]

文章目录

1. 一、安装Java JDK
2. 二、安装Android SDK
3. 三、安装node
4. 四、安装react-native-cli
5. 五、创建项目
6. 六、安装安卓虚拟机环境
7. 七、react-native run-android
   1. 1、我们找到项目根目录 android>gradle>wrapper ，将压缩包放在此目录，另外编辑gradle-wrapper.properties 这个文件 ，注释掉distributionUrl这行，添加新的一行如下：
   2. 2、拷贝一份gradle-2.1-all.zip 解压到C盘任意位置，接着创建环境变量
8. 八、react-native start
9. 九、配置模拟器的WIFI和IP
10. 十、代理设置
    1. 1、gradle 代理设置 项目目录下android>gradle.properties 编辑这个文件 输入代理的IP地址和端口
    2. 2、wifi代理设置

因为公司业务的需要，不得不开始研究react-native，至于react有哪些优势呢，网上已经一大堆分析了，我就不多啰嗦了，目前这玩意是要征服三端啊，PC、IOS、安卓！如此甚火，诸多公司都开始广泛使用起来，小弟也是废了一番周折，才把环境搭建起来，DEMO跑起来。一个感受是：坑太多了，环境搭建真麻烦。。。下面给大家分享下搭建流程（这里主要是windows环境下搭建安卓，至于IOS的搭建比安卓简单多了，就不详细说了）

一、安装Java JDK

直接给出传送门去下载吧 点我点我哟，根据自己电脑的类型，选择合适的版本。安装完后，打开CMD，输入 java -version检测是否安装成功，另外成功后需要配置环境变量。

新增变量 JAVA_HOME ，变量值 C:\Program Files\Java\jdk1.8.0_73（根据自己安装路径定） 
编辑环境变量path，在后面新增 %JAVA_HOME%\bin;

二、安装Android SDK

下载Android SDK或者androiddevtools，同意安装完后需要配置环境变量而且非常重要

新增变量 ANDROID_HOME，变量值 D:\hepf\Android\sdk（SDK所在的位置）
编辑环境变量path，在后面新增（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

另外里面的资源可能有些访问不了 需要VPN或者代理 去下载！

三、安装node

去官网下载node，直接给出传送门：点我哟，下载稳定版，安装后 输入指令 node -v 来检测

四、安装react-native-cli

输入指令 npm install -g react-native-cli

五、创建项目

CMD里输入指令  react-native init yourProjectName

六、安装安卓虚拟机环境

下载genymotion-2.6.0-vbox 和 genymotion_vbox86tp_4.4.4_150610_091703.ova，前者是虚拟机，后者类似于一个镜像文件可以直接导入到虚拟机中，如果没有第二个镜像文件，可以手动通过虚拟机创建。安装后如下图所示

七、react-native run-android

回到我们刚才创建的项目目录，CMD中 输入 react-native run-android ，指行会下载一堆东西。
注意了下面是重点 界面会出现 DOWNLOADING https\://services.gradle.org/distributions/gradle-2.4-all.zip
这个包是用来编译和打包安卓程序的，而且非常大，很多人网络不好就会卡在这里，下载不了资源，我建议赋值这个链接手动把这个包下载下来。下载后放到哪里呢？

1、我们找到项目根目录 android>gradle>wrapper ，将压缩包放在此目录，另外编辑gradle-wrapper.properties 这个文件 ，注释掉distributionUrl这行，添加新的一行如下：

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
#distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
distributionUrl=gradle-2.4-all.zip

让程序运行时，直接调用本地目录下的gradle-2.1-all.zip 这个包

2、拷贝一份gradle-2.1-all.zip 解压到C盘任意位置，接着创建环境变量

增加变量 GRADLE_HOME 变量值 C:\hepf\gradle-2.4 （解压的路径）
编辑path变量 在后面增加 %GRADLE_HOME %\bin;

增加上面的环境变量的目的 ，是为了在编译过程中调用 gradle指令。

上面2个步骤配置完毕后，执行速度就非常快了，执行完毕后 程序会被打包成apk安装到模拟器中

八、react-native start

看其他人的教程中 说 先运行这个，在运行react-native run-android。
我觉得呢，这个命令可以在 react-native run-android之前执行，也可以在之后执行，并没有什么大的影响
相当于启动一个服务，动态去编译脚本、图片、安卓资源等等

九、配置模拟器的WIFI和IP

模拟器一定要链接上wifi，IP一定要和本机的IP一样，端口设置为8081，这样模拟器就能访问到
http://localhost:8081/index.android.bundle?platform=android 然后请求我们上一步开启的服务。

十、代理设置

如果本地的网络是用过代理上网的，那么就需要设置gradle 和 模拟器wifi的代理

1、gradle 代理设置 项目目录下android>gradle.properties 编辑这个文件 输入代理的IP地址和端口

android.useDeprecatedNdk=true
systemProp.http.proxyHost=192.168.20.6
systemProp.http.proxyPort=3128
systemProp.http.nonProxyHosts=localhost
#systemProp.http.nonProxyHosts=*.nonproxyrepos.com|localhost

systemProp.https.proxyHost=192.168.20.6
systemProp.https.proxyPort=3128
systemProp.https.nonProxyHosts=localhost
#systemProp.https.nonProxyHosts=*.nonproxyrepos.com|localhost

2、wifi代理设置

划出模拟器的状态栏 ，就是手机界面的状态栏，里面有个wifi 连接图标。点击wifi图标，看下面图片流程

经过这几个设置，手机模拟器就可以通过代理上网了。

总结：
可能在安装过程中 还会遇到很多细节的问题，我没有仔细写全，但大部分原因可以归纳为
1、有可能资源请求不了（需要有VPN）
2、环境变量没有配置好
3、安卓SDK没有装全
4、人品问题

阿鹏就为大家介绍到这里了，有不懂的可以留言或者加QQ群 ：86031665 ，博客首页有微信和微博联系方式欢迎大家咨询！