Windows搭建react-native（RN）环境，RN版本0.55，jdk8，node12.2.0,Android Studio

前言

在一台电脑windows上搭建react-native环境，尤其对于第一次搭建的同学来说非常非常繁琐和复杂。以下文章我将尽可能的说好每一步该如何创建，过程中可能遇到的错误，也给出一些解决办法。
读者也一定要一步一步根据步骤来，确保自己问题是在那一步就有问题。

笔者之所以搭建此环境的原因也是因为接手有一个RN的项目，我需要将该项目跑起来，而且还要学会IOS打包和Android打包。
跑起来都不行那又怎么打包？所以本章也介绍一下该如何把一个RN项目跑起来。

先介绍笔者用到的哪些软件和版本：

软件	版本
vscode	–
node	12.2.0
jdk	8
Android Studio	2021.2.1
需要运行的RN项目的react-native版本	0.55.4

软件下载直通车（除了vscode）：
https://pan.baidu.com/s/1TlVzuhQ71l2GGeWZ2ozukg
提取码：kgxs

操作系统	版本
windows	win10

因为原来项目的版本也不是特别高，从官方文档也可以看出，高版本的react-native版本所要求的node版本和jdk版本也是不一样的。所以你项目对应的什么版本最好就参考官网文档所对应的版本。我参考是0.64这个版本。要求的也就是node版本大于12，jdk版本大于1.8。

如何看你项目react-native版本是多少？

在package.json文件里就可以看到

---

安装node

以笔者为例，在node官网找到对应的12.2.0node版本，如果读者会nvm就直接用nvm下载即可。

nvm的使用

里面介绍了什么是nvm？
为什么要用nvm？
如何安装nvm？
nvm常用指令有哪些？
也已经在里面介绍的很详细了，最后补充的就是使用版本的时候，要以管理员身份运行。如使用指令：nvm use 12.2.0。

言归正传

安装完成后，键盘按下【win+r】输入cmd后回车（以下简说打开cmd），输入node -v后回车。

显示如下信息证明安装成功，否则请自行检查（以下简说自检）。

---

修改npm镜像

npm镜像默认是国外的链接，可以设置为淘宝镜像源以加速下载过程。因为部分下载可能因为网络原因而导致下载不成功。

打开cmd，可选择输入以下命令：

设置淘宝镜像源：
npx nrm use taobao

查看当前npm地址：
npm config get registry

还原为初始的npm地址：
npx nrm use npm

---

下载Yarn

在cmd窗口运行以下命令

npm install -g yarn

---

安装jdk8

安装jdk8的时候一直默认下一步就好了，也不要修改路径，笔者这里不做详细安装教程。

安装好后就配置环境变量，以win10为例：
右键此电脑->高级系统设置(可能因为电脑分辨率问题导致出现位置不一样)->(下方的)系统环境变量
新建JAVA_HOME，路径一般默认为：C:\Java\jdk1.8.0_73，如果不是就按你实际安装的路径为准，
新建CLASSPATH，输入：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
编辑PATH，增加：%JAVA_HOME%\bin;和%JAVA_HOME%\jre\bin;
然后一直点击缺点以关闭你刚刚打开的窗口。除了下图一

高级系统设置：

jdk路径

---

自检jdk是否安装好

打开cmd，输入java -verison，出现以下即为安装好且配置成功。

---

安装Android Studio

这里安装没有太大问题，笔者可以参考给你们我下载的SDK。

按图示操作




按图示操作

就这些了，没截图就是没下载的

---

创建第一个虚拟机

默认列表是没有的，需要点击Create device

选择phone，尺寸自行选择，然后next

选择系统，然后next

点击Finish，后等待下载完成，应该再点击Finish即可，此时列表应该就可以看到你刚刚创建的设备。

如上图，默认是没有8.8GB的，但是你运行后加载系统就变大了，就先这样可以继续下一步了。

---

配置SDK环境变量

参考上面步骤到系统变量。
新建ANDROID_HOME，路径为你的sdk路径，如果忘记了你的sdk可以看下图的提示。

编辑Path，新增下面的变量。

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

依旧点击确定关闭所有窗口。

---

自检SDK环境配置

打开cmd，输入set android，前面是你刚新建的变量名，后面是你的sdk路径。

---

自测RN环境

安装脚手架
打开vscode的终端或者cmd，输入npm i -g react-native-cli 回车，
等待下载完成可自测是否安装成功，依旧再vscode的终端或者cmd输入react-native -v回车，此时可以查看你安装脚手架的版本和当前项目的react-native版本。如下图：

出现图上信息，表明安装脚手架成功。

---

初始化你的第一个RN项目

安装指定脚手架版本一般都会显示找不到资源，如下图

所以你用以上命令安装的脚手架版本也是最新的，从官网你也可以看到，不同的RN项目node版本和jdk版本也是不同的，所以初始化你的第一个RN项目需要指定版本创建。可参考官网。

vscode终端输入npx react-native init myProject --version 0.55.4，如果没有初始化指定版本的项目你的项目就无法创建成功，文件夹就一个package.json文件，因为你安装node版本并不是高版本，所以一点要注意初始化指定版本的RN项目。

按照命令npx react-native init myProject --version 0.55.4等待项目初始化完成。

命令介绍：npx react-native init 项目名 --version 0.xx.xx
一定要初始化到两个点，一个点就莫名奇妙就报错

注意：你的初始化项目的路径一定不要有中文！！！，否则运行起来会报错。

---

连接手机或虚拟机

笔者先介绍真机调式安装，最后再介绍虚拟机。
在运行项目之前，得确保你电脑是否连接上了手机。

在教程之前需要注意的是：
无论你选择用真机还是有虚拟机都需要注意的是，你要看你电脑配置，如果电脑配置不高建议使用真机而不用虚拟机。对于你电脑的运行内存小于8G的我建议使用真机。

真机：
如果是真机请确保你手机已经进行了如下设置（以Android手机为例）：
1、准备一条USB数据线连接你的电脑
2、在开发者选项中打开USB调试，没有找到开发者选项请自行百度。
3、勾选文件管理（部分手机就在下拉通知栏里即可直接勾选）

大致就这三个步骤，具体实现的方法因手机品牌而异，需要你自行解决。

虚拟机：
打开Android Studio，如下图进行操作：

运行你刚刚创建的虚拟机

首次虚拟机初始化时间较长，需要耐心等待，直到虚拟机手机显示桌面即可继续进行下一步，如下图。

可能遇到的错误：
说你的VT没有开启，具体错误描述忘了，大致意思就是你没有开启虚拟技术支持。可以先自己检查一下自己电脑上有没有开启。

具体方法是：
1、右键任务栏选择任务管理器

选择性能，看虚拟化是否启用，如下图。
已启用就是已开启，未启动可能就是导致你的虚拟机无法启动且弹框报错的原因了，可参考此文章解决。
不同电脑品牌可能打开方式不同，具体需要你自己百度解决。
可百度搜索关键词电脑如何打开VT？或电脑如何打开Virtualization Technology？。

注：此步骤一般需要进入BIOS设置的。

---

测试是否连接设备成功（手机/虚拟机）

打开cmd，输入adb devices，连接成功信息可参考下图。

未连接到设备：

成功连接到设备：

如果出现端口占用情况可分别输入以下命令：
adb kill-server
adb devices

出现以下信息，代表重启完成且连接到设备：

可能遇到的问题：

会报adb命令识别不了，我这里提供一种解决方法：

在你的sdk路径（忘了路径可以往上看）下的platform-tools文件夹，复制图中的三样文件到C:\用户\你的用户名，如笔者的：C:\Users\admin。如下图：


再次输入以上命令看看能不能识别。如果还是不行，可参考此文章。
还是不行，请自行百度解决，也可能因为你上面sdk环境配置有问题

---

运行项目

进入你创建的项目文件夹，笔者就是myProject，如cd 你的项目名，
在终端输入react-native run-android，第一次构建时间较长，请耐心等待，可能会弹出node使用网络需求，你点击允许即可。随后会弹出node的黑窗口，一定不要关闭！！！
继续等待代码跑完，然后自动就会在你的虚拟机或者真机上安装。

注：真机如果没打开文件管理不会弹出安装界面。
此时你关注node的黑窗口有进度在跑，你安装时候可能会有进度条在跑，你安装完成后也会有进度条在跑，等待黑窗口上的进度条跑完即可。如下图：

成功跑完代码，安装好后会是这个样子：

此时代表你电脑的RN环境终于配置好了。

可能遇到的错误：
如果安装完成后，打开安装的软件是红屏的，可以先结束该软件进程再打开试试，或者关闭node黑窗口，再重新执行一次react-native run-android。

---

可能遇到的错误总结

出现此上图错误因为中文路径。

---

出现上图错误可能因为react-native init xxx --version xx.xx初始化的项目是有问题的。
可以试试用这条命令初始化项目：npx react-native init --version xx.xx.xx 初始化项目
（版本要具体到两个小数点！！！）

尾声

如果你觉得本篇文章对你有帮助，记得点赞收藏哦~
有问题欢迎留言指出。