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官方网站
https://i-blog.csdnimg.cn/direct/de04adf636ac43da8494061a76b0ac8a.png
第二步：安装NVM与Node.js
为方便不同项目所需Node.js版本不同，降低后续项目要给Node.js降级的麻烦，先安装NVM管理Node.js，NVM可以很方便的切换版本。
一、安装NVM
1.下载NVM包：Releases · coreybutler/nvm-windows · GitHub；找到V1.1.11版本
https://i-blog.csdnimg.cn/direct/ca1f5598edc14024ad76bb19acc2e2cd.png
2.在D盘（只管不要在C盘）创建一个文件夹定名为NVM，点击下载好的nvm-setup.exe，将其下载在刚才创建的NVM文件夹中
https://i-blog.csdnimg.cn/direct/29257eff37dd4b51b11cf65518a4a351.png
https://i-blog.csdnimg.cn/direct/ae1e678f33e74ba49e85ff5ad1970782.png
https://i-blog.csdnimg.cn/direct/385fe3541dbc4a3cb5e150ffd059c089.png
https://i-blog.csdnimg.cn/direct/ce47545d052144848a614d04b3612a1a.png
然后直接点击install即可
3.安装完nvm后先不要着急安装node版本。
(1) 找到NVM安装路径
(2) 找到 setting.txt 文件https://i-blog.csdnimg.cn/direct/60ddf99e85744a1c9ee0214578bb2408.png
(3) 新增两行信息，配置下载源，将下述两行下载镜像新增在setting.txt文件中并保存
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/ https://i-blog.csdnimg.cn/direct/ff73a9f3573748b3aa0ae5b73eab7dbe.png
4.检查nvm是否安装完成；
win + R，调用cmd，输入nvm，出现下面这一堆就体现安装乐成了。
https://i-blog.csdnimg.cn/direct/d6c5f0e674aa46caa063809a6f178406.png
二、使用NVM安装Node.js
1.起首，win + R，调用cmd，输入“nvm list available”，查询可插入版本号，LST体现可插入稳固版本。【如未指定版本，发起安装LTS下的版本】
https://i-blog.csdnimg.cn/direct/97bd9b9536c748a2bde7be1d05be84ed.png
2.安装指定node.js版本，必须在14以上，输入“nvm install 16.14.0”
https://i-blog.csdnimg.cn/direct/9904fe04f6c641dab40701c96497776c.png
3.输入“nvm use 16.17.0”，切换Node.js版本
4.安装完成后可以分别输入下令行 “node -v” 和“npm -v”，用以查验node.js以及对应npm是否安装乐成
https://i-blog.csdnimg.cn/direct/10feb450ea8c4388a3149172e729f77a.png
三、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文件，属性-安全-编辑-允许-应用-确定
https://i-blog.csdnimg.cn/direct/79f868d1a4144cb88763a9e8082ffe26.png
1.创建两个文件夹，分别定名为“node_cache”、“node_global”，用以保存从镜像源安装的东西https://i-blog.csdnimg.cn/direct/b398d25bbc2746dda426a0d58dd017f5.png
2.在cmd中分别输入如下两行代码，无任何相应，即为实行乐成
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache" https://i-blog.csdnimg.cn/direct/bc58cb56b5524f55849db53bb61ad44a.png
3.设置环境变量：
(1) 右键此电脑–属性–高级系统设置–高级–环境变量–系统变量，添加变量名为：NODE_PATH,变量值为npm安装路径：D:\Program Files\nodejs\node_moduleshttps://i-blog.csdnimg.cn/direct/a89be06edc364e0b9b370abb3ac4e158.png
(2) 编辑用户变量的 path，将默认的 C 盘下的 C:\Users\用户名\AppData\Roaming\npm 修改为 D:\Program Files\nodejs\node_global
https://i-blog.csdnimg.cn/direct/cfbb16e55f1248b3a81038990e542edf.png
(3) 在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】
https://i-blog.csdnimg.cn/direct/c7c45bed612d405fb2be4c69088c57f2.png
（4）验证环境配置是否乐成。在下令提示符中输入如下代码：
npm install express -g // -g代表全局安装 如果，出现类似下图中的情况，即为配置乐成
https://i-blog.csdnimg.cn/direct/207440adb25042049240585178460d45.png 援引的别人的图，做到这一步忘记截图了@WHF__ 如果，出现类似如下的图，也证明配置乐成了。显示“changed 69 packages, and audited”表明npm已经全局安装了Express，并且还对安装的包进行了安全审计。
下令实行完毕后，npm会输出一个总结，其中包罗一些关于审计结果的信息。你可以查看这些信息以了解是否有任何高风险的安全问题被发现。
可以通过查看输出中的found 0 vulnerabilities来确定是否所有依赖项都是安全的。
https://i-blog.csdnimg.cn/direct/314a4612d0d24cd981f3d7cc495f78d6.png
至此，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
https://i-blog.csdnimg.cn/direct/5ccd0ed7fc894eaca9d87ca4bcc7e657.png
2. 这里我选择下载Java17，页面往下滑动找到Java17
https://i-blog.csdnimg.cn/direct/973c81d8a7ec4c45ba1b35417f729bc7.png
3. 下面开始安装JDK，牢记路径上不要有中文！！！双击下载好的.exe文件
https://i-blog.csdnimg.cn/direct/25da32694e6f4075a921dfa1a57dc807.png 4. 路径设置为D盘，在D盘下创建一个Java文件夹，将JDK安装在此文件夹下，路径可以设置成如下：
https://i-blog.csdnimg.cn/direct/7a09842693824fac9c6ae2b14fcd4c89.png
然后点击下一步，下载完成即可
三、环境配置
1. 右键点击【我的电脑】>【属性】>【高级系统设置】>【环境变量】
https://i-blog.csdnimg.cn/direct/d1f8b8f5a244405890e62cf9e0dcbcc9.png
2. 在系统变量下面新增一个变量，变量名是JAVA_HOME，变量值为D:\Java\JDK
https://i-blog.csdnimg.cn/direct/6fc78f89df4d4442a247faa067600290.png
3. 新增长一个CLASSPATH变量属性，继承点新增，然后添加如下代码
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar https://i-blog.csdnimg.cn/direct/f62cad9cfb7d422799475b449f15450c.png
4.找到系统变量中的Path变量，双击进入，点击新建，输入如下一行代码，然后全部点击确认，环境变量配置完成。
%JAVA_HOME%\bin https://i-blog.csdnimg.cn/direct/8b2fec3884fc4085a22fcf9741e8b076.png
四、验证是否配置乐成
按下window键+R，在运行栏中输入cmd，在下令窗口中输入java -version，出现如下内容，即为安装乐成。
https://i-blog.csdnimg.cn/direct/ef1ed2577f26491a88d630abe0fd762b.png
至此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
https://i-blog.csdnimg.cn/direct/d909082a2e0d4863af35b8cf23f1885e.png
https://i-blog.csdnimg.cn/direct/e5c9ac146365430d92662d348cf22672.png
在SDK Tools一栏下，勾选如下两个选项，然后apply，然后点ok完成SDK配置
https://i-blog.csdnimg.cn/direct/e046a2fd223a49ccb073d19d45ef2574.png
二、环境配置
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。
1.和上面一样的操作，打开环境变量。创建一个名为ANDROID_HOME的环境变量，路径如果和我设置的一样就是D:\AndroidStudio\SDK，以个人Android SDK Location为准。
https://i-blog.csdnimg.cn/direct/6a3ee95abcc5404aaecd47aff467b822.png
2.把下列工具目次添加到用户变量Path中
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin https://i-blog.csdnimg.cn/direct/570a0596a036481ab18966f8dd49ce25.png
至此，整个React Native环境以及相关依赖搭建完成，下面实验创建项目。
第五步：React Native
一、Yarn
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。
在终端下令行输入"npm install -g yarn"，出现如下内容，即为安装乐成。
https://i-blog.csdnimg.cn/direct/6fab4b4b5cf042f7acc42aa28d4bdf61.png
（项目创建运行部门从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"来查看可用的虚拟装备，它的图标看起来像下面这样：
https://i-blog.csdnimg.cn/direct/eb6e020197f34e12a37471df7c9319da.png
如果你刚刚才安装 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环境搭建完成，可以实验创建自己的项目了！
感谢各人的支持！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]