React Native环境配置完整版（超详细）

第一步：打开React Native官方网站

第二步：安装NVM与Node.js

一、安装NVM

二、使用NVM安装Node.js

三、NVM使用说明

四、环境变量配置

第三步：安装JDK

一、JDK介绍

二、下载与安装JDK

三、环境配置

四、验证是否配置成功

第四步：安装Android Studio

一、基础安装

二、环境配置

第五步：React Native

一、Yarn

二、创建新项目

三、准备 Android 设备

四、编译并运行 React Native 应用

五、修改项目

第一步：打开React Native官方网站

第二步：安装NVM与Node.js

为方便不同项目所需Node.js版本不同，降低后续项目要给Node.js降级的麻烦，先安装NVM管理Node.js，NVM可以很方便的切换版本。

一、安装NVM

1.下载NVM包：Releases · coreybutler/nvm-windows · GitHub；找到V1.1.11版本

2.在D盘（尽量不要在C盘）创建一个文件夹命名为NVM，点击下载好的nvm-setup.exe，将其下载在刚才建立的NVM文件夹中

然后直接点击install即可

3.安装完nvm后先不要着急安装node版本。

(1) 找到NVM安装路径

(2) 找到 `setting.txt` 文件

(3) 新增两行信息，配置下载源，将下述两行下载镜像新增在setting.txt文件中并保存

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

4.检查nvm是否安装完成；

win + R，调用cmd，输入`nvm`，出现下面这一堆就表示安装成功了。

二、使用NVM安装Node.js

1.首先，win + R，调用cmd，输入“nvm list available”，查询可插入版本号，LST表示可插入稳定版本。【如未指定版本，建议安装LTS下的版本】

2.安装指定node.js版本，必须在14以上，输入“nvm install 16.14.0”

3.输入“nvm use 16.17.0”，切换Node.js版本

4.安装完成后可以分别输入命令行 “node -v” 和“npm -v”，用以检验node.js以及对应npm是否安装成功

三、NVM使用说明

1.安装指定node.js版本：

nvm install <指定Node.js版本号>

2.删除指定node.js版本：

nvm uninstall <指定Node.js版本号>

3.查看当前已安装的node.js版本，带*号的是正在使用的：

nvm list
或者
nvm ls

四、环境变量配置

在进行环境配置之前，设置文件权限，避免之后报错。右键D盘Program Files文件下的nodejs文件，属性-安全-编辑-允许-应用-确定

1.创建两个文件夹，分别命名为“node_cache”、“node_global”，用以保存从镜像源安装的东西

2.在cmd中分别输入如下两行代码，无任何响应，即为执行成功

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

3.设置环境变量：

(1) 右键此电脑–属性–高级系统设置–高级–环境变量–系统变量，添加变量名为：NODE_PATH,变量值为npm安装路径：D:\Program Files\nodejs\node_modules

(2) 编辑用户变量的 path，将默认的 C 盘下的 C:\Users\用户名\AppData\Roaming\npm 修改为 D:\Program Files\nodejs\node_global

(3) 在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】

（4）验证环境配置是否成功。在命令提示符中输入如下代码：

npm install express -g   // -g代表全局安装

如果，出现类似下图中的情况，即为配置成功

如果，出现类似如下的图，也证明配置成功了。显示“changed 69 packages, and audited”表明npm已经全局安装了Express，并且还对安装的包进行了安全审计。

命令执行完毕后，npm会输出一个总结，其中包括一些关于审计结果的信息。你可以查看这些信息以了解是否有任何高风险的安全问题被发现。

可以通过查看输出中的found 0 vulnerabilities来确定是否所有依赖项都是安全的。

至此，NVM和Node.js配置完成

如果大家nvm切换node版本时，显示切换成功，实际没有切换成功，大家可以参考下面这篇文章改正！解决nvm切换node版本失败的终极办法，亲测有效！_node切换不成功怎么办-CSDN博客

第三步：安装JDK

一、JDK介绍

较常用的四个JDK版本

1. JDK8（=Java8=JDK1.8），这个版本较为成熟稳定，是JDK的一个重要长期支持版本(LTS)，在生产环境中使用非常广泛；

2. JDK11，增加了大量实用的新特性，包括新的 ZGC、云计算监控诊断、Http Client、支持Unicode 10.0.0等，一共包含 17 个 JDK 增强提案；

3. JDK17，最新长期支持版本，具有switch 新增模式，增加 Realed class 密封类，Parallel GC 默认启用已经浮点运算更加严格；

4. JDK18，短期版本，增加了服务提供者接口，默认字符集为UTF-8；

（建议下载JDK17一下的版本）

二、下载与安装JDK

1. 进入Oracle官网下载页面：Java Downloads | Oracle

2. 这里我选择下载Java17，页面往下滑动找到Java17

3. 下面开始安装JDK，切记路径上不要有中文！！！双击下载好的.exe文件

4. 路径设置为D盘，在D盘下创建一个Java文件夹，将JDK安装在此文件夹下，路径可以设置成如下：

然后点击下一步，下载完成即可

三、环境配置

1. 右键点击【我的电脑】>【属性】>【高级系统设置】>【环境变量】

2. 在系统变量下面新增一个变量，变量名是JAVA_HOME，变量值为D:\Java\JDK

3. 新增加一个CLASSPATH变量属性，继续点新增，然后添加如下代码

.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

4.找到系统变量中的Path变量，双击进入，点击新建，输入如下一行代码，然后全部点击确认，环境变量配置完成。

%JAVA_HOME%\bin

四、验证是否配置成功

按下window键+R，在运行栏中输入cmd，在命令窗口中输入java -version，出现如下内容，即为安装成功。

至此JDK安装成功

第四步：安装Android Studio

一、基础安装

1.安装及基础配置

大家可以跟着这个博主进行安装，我初次安装Android Studio就是跟着这个博主进行的，内容十分详细，只要一步一步跟着来，Android Studio安装肯定成功。该博主在安装SDK的时候没有改SDK安装位置的操作，大家在下载SDK前记得自行更改SDK下载地址到部署之前建立的SDK文件夹。

Android Studio 卸载 / 安装细节问题参考_android studio卸载-CSDN博客

2.React Native所需的SDK配置

在SDK Platforms一栏下勾选下列三个选项，然后apply

在SDK Tools一栏下，勾选如下两个选项，然后apply，然后点ok完成SDK配置

二、环境配置

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

1.和上面一样的操作，打开环境变量。创建一个名为`ANDROID_HOME`的环境变量，路径如果和我设置的一样就是D:\AndroidStudio\SDK，以个人Android SDK Location为准。

2.把下列工具目录添加到用户变量Path中

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

至此，整个React Native环境以及相关依赖搭建完成，下面尝试创建项目。

第五步：React Native

一、Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

在终端命令行输入"npm install -g yarn"，出现如下内容，即为安装成功。

（项目创建运行部分从React Native处提取，方便大家一次性尝试）

二、创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：
npm uninstall -g react-native-cli @react-native-community/cli

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：

必须要看的注意事项一：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。

必须要看的注意事项二：请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

必须要看的注意事项三：请不要使用一些移植的终端环境，例如git bash或mingw等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。

[可选参数] 指定版本或项目模板

你可以使用--version参数（注意是两个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。

npx @react-native-community/cli init AwesomeProject --version X.XX.X

还可以使用--template来使用一些社区提供的模板。

三、准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。

1. 使用 Android 真机

你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照在设备上运行这篇文档的说明操作即可。

2. 使用 Android 模拟器

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择Tiramisu API Level 33 image.

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

四、编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android：

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理（类似 webpack）。Metro服务也可以使用yarn start命令单独启动。

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。

npx react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。

译注：建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你无法正常运行，遇到奇奇怪怪的红屏错误，先回头仔细对照文档检查，然后可以看看问题讨论区。不同时期不同版本可能会碰到不同的问题，我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令，那样会导致代码完全无法刷新。

五、修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的文本编辑器打开App.js并随便改上几行
按两下 R 键，或是在开发者菜单中选择 Reload，就可以看到你的最新修改。

至此，整个React Native环境搭建完成，可以尝试创建自己的项目了！

感谢大家的支持！