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 工作原理

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

一、安装Java JDK

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

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

二、安装Android SDK

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

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

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

三、安装node

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

四、安装react-native-cli

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

五、创建项目

1
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这行,添加新的一行如下:
1
2
3
4
5
6
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盘任意位置,接着创建环境变量
1
2
增加变量 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 然后请求我们上一步开启的服务。

配置IP和端口

十、代理设置

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

1、gradle 代理设置 项目目录下android>gradle.properties 编辑这个文件 输入代理的IP地址和端口
1
2
3
4
5
6
7
8
9
10
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 ,博客首页有微信和微博联系方式欢迎大家咨询!