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文件中并保存

1. node_mirror: https://npmmirror.com/mirrors/node/
2. 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版本：

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

复制代码

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

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

复制代码

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

1. nvm list
2. 或者
3. nvm ls

复制代码

四、环境变量配置

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

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

        2.在cmd中分别输入如下两行代码，无任何相应，即为实行乐成

1. npm config set prefix "D:\Program Files\nodejs\node_global"
2. 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）验证环境配置是否乐成。在下令提示符中输入如下代码：

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

复制代码

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

     援引的别人的图，做到这一步忘记截图了@WHF__    如果，出现类似如下的图，也证明配置乐成了。显示“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变量属性，继承点新增，然后添加如下代码

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

复制代码

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

1. %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中

1. %ANDROID_HOME%\platform-tools
2. %ANDROID_HOME%\emulator
3. %ANDROID_HOME%\tools
4. %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卸载掉它以制止一些冲突：

1. 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参数（注意是两个杠）创建指定版本的项目。注意版本号必须准确到两个小数点。

1. 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：

1. cd AwesomeProject
2. yarn android
3. # 或者
4. 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企服之家，中国第一个企服评测及商务社交产业平台。