win10下搭建react-native环境

作者: HS_d119 | 来源:发表于2018-07-17 15:37 被阅读0次

第一步：安装Java

1.下载JDK，选择适应自己的机型；官网地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2.配置环境，问度娘：https://jingyan.baidu.com/article/d45ad148ba5ab169552b80d3.html

第二步：下载安装Android SDK

1.直接下载SDK Tools，然后通过SDKManager安装react-native运行所需要的环境，注意选择x64还是x86。

官网下载地址：https://developer.android.com/sdk/installing/index.html

国内配置以及安装流程：https://blog.csdn.net/naipeng/article/details/72722682/

第三步：安装node.js，git

第四步：安装react-native命令行工具

1.打开命令窗口，输入 npm install -g react-native-cli

第五步：创建react-native项目

新建一个文件夹，利用命令控制窗口进入文件夹初始化一个项目：react-native init AwesomeProject

如果你网络不怎么样，这里会耗时相当相当久，甚至经常因为网络的原因下载项目失败！所以react-native中文官网推荐你使用淘宝镜像：$ npm config set registry https://registry.npm.taobao.org

第六步：运行packager：

1. cd AwesomeProject

2. npm start

显示下图表示成功

第七步：连接设备或者模拟器这里推荐设备

再打开一个命令窗口，运行adb devices，如果正确配置了Android SDK环境变量，我们在docs命令控制行中运行应该可以看到下面界面：

我们看到列表为空，是因为我们还未连接任何设备。我通过USB接入手机，再运行看看：

我们可以看到设备号为Default0string device表示已经连接成功。

有时候我这会出现如下问题：

应该是端口号被占用，我这里总被360手机助手占用，一般我都连接成功后退出360手机助手，然后重新npm start之后重复第七步。如若adb安装成功，还是这里出现这个问题的话解决不了就百度一下或者尝试重新插手机。

第八步：编译运行Android：

AwesomeProject目录下运行$ react-native run-android，就会构建工程并自动安装到你的模拟器或者设备，（如果关闭了npm start运行窗口就会同时启动用于实现动态代码加载的Node服务）。

第一次运行的时候，会下载gradle文件，该文件下载时间太过于漫长，解决办法如下：

1.打开http://androiddevtools.cn/找到gradle-2.4-all.zip这个文件的下载地址：http://pan.baidu.com/s/1c0dcgfe，将它下载到本地。

2.用编译器打开AwesomeProject文件夹中的android文件中的gradle下的wrapper找到gradle-wrapper.properties文件，将其中的distributionUrl=https://services.gradle.org/distributions/gradle-2.4-all.zip改为distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip，让它本地离线下载。其中E:/AwesomeProject/gradle-2.4-all.zip为你下载gradle后所保存的地址。

graddle构建过程中会下载很多jar包，如果出现下载失败，多重试几次。

3.当下在完grandle后一定会报错，如图：