windows环境下搭建React-Native开发环境

前言：因为电脑是windows系统，为了开始React-Native的入坑之路，只能硬着头皮上了，搭建环境的路上走了很多的坑，现在我把我成功搭建的路子记录下来，希望帮助大家少走弯路，也让我以后再搭建的时候，有个记忆，现在正式开始

第一步：安装java sdk

（对了，这里还要安装node.js环境，因为要用到npm命令，node直接官网下载安装就好了，这里就不多做说明了）

下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

 

下载的这个

---

解压之后点击里面安装程序，一直默认就好了，如果要改变安装路径一定要记得地址路径，我的是默认路径

安装好了之后，可以测试一下是否安装好   打开命令窗口终端（按住 windows+r ） 输入java -version 回车 如果出现下图就安装成功了，如果不行，重启一下电脑再试

 

出现这个就javasdk安装成功了

---

第二步：安装Android sdk

下载地址 https://dl.google.com/android/android-sdk_r24.4.1-windows.zip

下载之后解压到一个内存空间足够大的盘符（不能带有中文字符的文件路径），因为之后会下载很多的sdk文件，接口文件，大概三四十个g。

解压之后，双击SDK Manager.exe 

 

---

会出现一个框选择好下面这些要安装的，点击安装就好了

 

这里我安装了比较多的东西，主要是在第一次搭环境的时候，报了一些很莫名的错误，我也就在第二次搭建的时候选了比较多的扩张和接口之类的

---

第三步：配置环境变量（特别重要）

鼠标右键点击计算机，选择属性之后再按下图操作

 

然后在编辑系统变量的这个框里面的变量值中操作以下步骤

1.找到Android SDK 的目录的路径复制添加到path

 

2.找到android sdk 中 platform-tools文件的路径地址添加到pah，记住一定要打分号哦，跟前一个路径区分开

例如我的路径就是F:\android-sdk_r24.4.1-windows\android-sdk-windows\platform-tools

3.找到android sdk 中 tools文件的路径地址添加到pah   最后点击确定 确定 确定 就完事了

然后打开命令终端 （windows + r）  输入adb，测试一下，只要没有报错，就成功了

我们再把java sdk配置了，按下图操作

 

我因为第一次搭建失败了，查了很久了，我添加了一个Android sdk 的系统变量，第二次搭建就成功了，不知道是不是这个原因，最好添加一下吧，以防万一

 

Android SDK 默认的应该是在C:\Users\Administrator\AppData\Local\Android\Sdk 

这个地方我也有一个疑问，为什么我的android sdk压缩包是解压在F盘里的，C盘也会有一个sdk，这个地方的配置要用c盘的sdk，记住了

第四步：安装一个模拟器 我选择的是夜神模拟器

安装夜神模拟器，安装好之后，最好将分辨率调成手机端

第五步：利用npm（cnpm，yarn）安装react-native-cli （RN脚手架），并初始化项目

打开命令窗口，输入 npm install -g react-native-cli 回车一下就自行安装了

 

---

安装好之后，打开你需要将react-native项目放到哪一个文件下，按住shift键，点击鼠标右键选择 在此处打开命令窗口 

再输入命令    react-native init 项目名称     例如: react-native init firstdemo   回车等待初始化项目，完成后你就会看到一个名叫firstdemo的文件夹

之后在firstdemo项目目录中找到android目录，创建一个文件，如下图

然后内容为：sdk.dir=android sdk目录路径，如下图，记住，一定是双斜杠，

 

第六步：激动人心的连接模拟器，运行项目的时候到了

打开项目目录，按住shift键，鼠标右键点击，选择在此处打开命令窗口，输入react-native start  （启动项目服务进程），如下图

接下来，刚刚的命令窗口别关闭了，重新打开一个命令窗口，连接夜神模拟器

6.1.1 打开夜神模拟器

6.1.2 重新打开一个命令窗口，执行命令   adb connect 127.0.0.1:62001 以连接模拟器，（这个地方主义一下，端口号62001，是夜神模拟器默认的，如果你是其他的模拟器，记得查阅一下，默认端口号是多少）如下图：

6.1.3 再执行命令 react-native run-android ,这里需要说明一下，第一次启动这个命令的话，他要下载一些依赖的东西，最好是要有t z，不然会很慢，也可能会失败，这直接关系到最后能不能成功搭建环境，我这里是已经执行过一次这个命令了，如下图：

 

成功之后，你会看到你的模拟器自动打开了一个app，但是整个页面都是红色的，想报错一样，别慌张，还有最后一步

最后再运行命令   react-native run-android  模拟器会出现app界面，

 

好了，恭喜你，环境搭建好了，开始你的RN踩坑之路吧，

第一次写，写得不好，有些乱，大家见谅啊

作者：Neral
链接：https://www.jianshu.com/p/ec31466517aa
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。