一起学RN （1）史上最全Window平台 环境搭建

网络上关于RN环境搭建的教程有很多 但是很多人按照他们的教程搭建完以后 会发现 出现各种问题 今天 就跟大家一起 来说一下 如何在Window平台上搭建RN的开发环境

（1） 准备工作

首先 我们先把安装RN需要用到的都下载到本地

Python

官网 https://www.python.org/downloads/
下载地址: https://www.python.org/ftp/python/2.7.13/python-2.7.13.amd64.msi

Node

官网:http://nodejs.cn/
下载地址:https://nodejs.org/download/release/v6.10.0/

JDK

官网:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
下载地址:
http://download.oracle.com/otn-pub/java/jdk/8u121-b13/e9e7ea248e2c4826b92b3f075a80e441/jdk-8u121-windows-x64.exe?AuthParam=1488189718_48f44f3fe3d1a8d245f28989f2bb19f2

AndroidSDK

官网:
https://developer.android.google.cn/studio/index.html#downloads

下载地址:
https://dl.google.com/android/repository/tools_r25.2.3-windows.zip

（2） 开始安装环境

首先安装Node

具体安装步骤 我这边就不写 总之一路next就行了

在安装完node之后 我们需要对其设置一下代理访问

在cmd中依次执行以下这两条命令

npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global

如果你有科学上网的话 可以无视

接下来开始安装Python

需要注意的是 我们这里要做一下勾选 这样就会将你的Python安装路径 添加到系统的环境变量当中 之后 你在cmd中输入python就可以直接使用了 而不需要我们手动去添加路径了

JDK的安装非常简单 不用多管 直接一路next

这里有一点非常需要注意

很多人在这里直接一路next以后
发现到后面的react-native init xxx项目的时候 会遇到问题 而且提示那边也没有提示的非常准确 到底是哪里出错了
实际上是因为 你系统环境变量中缺少了一个值
当你安装好JDK的时候 你需要在系统环境变量中添加
JAVA_HOME这个环境值 然后在里面填入你的JDK安装路径

不要急 这里还没有完
如果你这样设置以后 直接执行 react-native init xxx 依旧会报错
会提示你缺少tool.jar文件
这里 你需要在系统环境变量中的path值中加入自己的JDK路径

而tool.jar文件 就存放在JDK\bin目录下面 所以这样RN才能引用到
既然现在JDK这边已经没有问题了 接下来就是重头戏了

首先 随便找一个目录将刚才下载的AndroidSDK进行解压

然后首先像刚才添加JAVA_HOME一样 将AndroisSDK的解压路径添加到ANDROID_HOME里
之后我们将AndroidSDK目录下的tool文件夹也添加到系统环境变量中 因为这个目录下面有adb文件 在RN中需要调用到

AndroidSDK的目录部分 我们已经搞定了 接下来安装Android所需要的工具

运行{AndroidSDK}\tools\android.bat

我们先来看看 我们都要下载那些工具
首先build-tools是必不可少的 因为RN默认都是用23.0.1来进行编译的 所以 你可以将23版本号部分的都下载过来

至于这一部分 是不需要下载的 不管是7.0的还是6.0的都不需要
除非你是用AndroidSDK的自带模拟器来做开发 否则 不需要进行下载 接下载将这3个下载一下

其中HAXM是用来对模拟器进行加速用的 不过如果你用的不是自带模拟器的话 不安装也没关系

OK 现在 所有的环境都已经搭建完毕了 开始初始化项目吧

(3)初始化第一个项目

首先在cmd中运行一下npm来安装RN的环境
npm install -g yarn react-native-cli
我这边已经安装好了 就不多写了
接着 我们来初始化项目
在cmd中运行
react-native init xxx 后面名字任意


正在从网络请求包 这个过程 可长可短 需要等待一会

当出现这个页面的时候 说明 你的项目已经创建成功了

index.android跟index.ios分别就是你android跟ios的入口文件
我们打开来看一下里面的内容

那么 我们配置就解决了 接下来我们开始编译项目到手机

(4)开始编译

android编译
react-native run-android
ios编译
react-native run-ios

但是这里有一点需要特别注意 因为android的编译是借助gradle来完成的 所以在你第一次run-android的时候 会先对gradle进行下载 但是这里使用npm来下载是非常慢的 我这边因为已经安装过了 所以不会在跳出这个提示了 所以我这边就直接教大家如何修改吧

打开文件可以看到

这里默认是从http中进行的下载 但是这样下载是非常耗时的 所以你可以将这个下载地址复制到迅雷或者其他下载工具中 使用它们来帮助你下载 之后 将下载的文件 复制到当前目录中 并且将
distributionUrl这个值改成本地路径地址
如file:///D:/test1/android/gradle/wrapper/gradle-2.4-all.zip
然后你在重新运行一下react-native run-android
你就会发现直接跳过了刚才的下载环节
在执行中 会打开一个新的窗口 用来显示js server

这里要注意 RN从0.41开始 js server就改变了 不是像现在这个样子了 所以 如果你们新打开的窗口 跟我这个不一样的话 不要担心

到这里不得不说一下run-android都干了些什么
1 开启js server
2 adb reverse tcp:8081 tcp:8081
3 build
4 install apk
一般情况下 按照我之前的配置方法 前面3步都是不会报错的
所以 即使你最后一步报错了 也没关系 因为build已经执行了 apk应该是已经正常生成出来了
生成路径为

这里我听过很多人反应说我明明手机已经连接到电脑了 为什么run-android以后 还是会报错呢
其实这里真的没必要一定纠结于run-android
既然你apk已经成功的生成了 你这里 直接用你自己的方式去安装就可以了 比如模拟器的话 直接拖过去就可以安装了 真机的话 可以用QQ来传都可以

一般情况下 不推荐直接使用run-android来安装 因为未知性太多
至少我自己到目前为止 一次都没成功过

所以我们可以这样来
将run-android要做的事情分割开来 分别执行
比如 有些时候 我已经在手机安装了apk了 也就不需要重新编译或者安装的 如果直接运行run-android的话 又要重复一个这个步骤 开发效率反而变低了

1 开启js server
react-native start
2编译
debug:
cd android && gradlew assembleDebug
release:
cd android && gradlew assembleRelease

OK 到这里就基本可以结束了

如果有任何问题的话 都可以加群或者我的私人QQ号聊
QQ群:172185449
个人QQ:469373256
第一次码字写这么多 还是挺累的 希望我讲的能对大家有所帮助 如果大家在初始化环境的时候 有遇到其他不能解决的问题 也可以直接跟我说