React native 原生环境搭建（最新版本RN环境搭建，不是expo）

前言

React Native 是 Facebook 推出的一款用于开发移动应用的框架，开发者可以用 JavaScript 和 React 等技术，一次编写代码，然后同时部署到 iOS 和 Android 平台上，大大节省了开发时间和人力成本，避免了为每个平台单独编写代码的重复工作。

支持热更新功能，开发者在应用发布后，可以在不发布新版本的情况下，通过更新服务器上的代码，实现应用的部分功能更新，用户无需重新下载安装应用，就能体验到新的功能或修复后的问题。

要想学会React Native，首先react的学习是一个基础。。。什么？你还问react为什么是基础？好了你别学了。

以下流程是我这几天经过大量阅读各种文档，询问技术大牛，不断碰壁总结出来的以win10系统为例的原生rn安装流程。

环境配置

1、node版本要求，这里你自己去安装

首先你的node版本应该在18及以上，我的是18版本，安装node时应该选择稳定版本（偶数版本）

2、下载JDK17

下载链接: https://pan.baidu.com/s/16fHRvj8ItMGVMg2ujtXkag?pwd=wjl6 提取码: wjl6

在我的网盘下载好JDK17之后，进行安装，一直Next就好。

当然了，JDK17也是需要配置环境变量的

首先变量名就设置成JAVA_HOME,变量值就是你的jdk的所在路径，一般默认来说就是C:\Program Files\Java\jdk-17

其次，就是需要继续配置Path，新增%JAVA_HOME%\bin

之后我们需要验证JDK是否已经配置好了，使用win+r，输入cmd，回车！！！

输入命令，javac -version查询一下

 

因为我这里安装的最新的版本，所以你看到javac 17.0.13就成功了，到此JDK就ok了。

 

3、下载Android Studio

下载链接：https://pan.baidu.com/s/10vNR2yZnHgYBjSws-Rqmmg?pwd=wjl6 提取码: wjl6

这里Android Studio我是从官网下载的最新的，直接下载我这里的就好。接下来一路Next就好。

启动之后几个注意点，看下面！！！

 

这里第一次安装，记得选第二个！！！

如果你的页面出现这里的内容，选择第一个就好。这里是否需要接收谷歌的邮件信箱，建议点击不要发送信息，不然会收到很多垃圾邮件。

这里点击Cancel就可以了，这是因为我们还没有配置安装SDK路径所出现的警告

这里我们点击自定义安装

 之后默认路径安装就好，这里把所有选项全部勾选上，路径你想默认就默认，想自定义就自定义。

然后继续默认Next，到以下页面，第一项和第二项都要勾选同意，否则不允许下一步，然后点击Next 就好了。

 

 

 到这一步等着就好了，但是可能在最后会有东西下载失败，不用担心，我也是在这里一直失败，后来我手动下载了安装包，找到相应的位置进行的手动安装，链接我放下面。点击Finish：

 通过网盘分享的文件：haxm-windows_v7_8_0.zip
链接: https://pan.baidu.com/s/1DsC0oW5SWASSTPKZNj2G9A?pwd=wjl6 提取码: wjl6

我已经替大家下载好了，拿去用就可以，安装到以下位置：

因为我是默认安装的，你只需要找到你安装的SDK位置，在其下目录的intel目录下创建文件夹Hardware_Accelerated_Execution_Manager，将你在我网盘下载的安装包解压到这个新建的文件夹就好了。然后双击haxm-7.8.0-setup.exe进行安装就好了。

打开编译器，看到More Actions，选择SDK Manager

 

 接下来看你就按照我的安装内容来就行了，如下：

首先进行SDK Platforms中的东西，记得选中右下角的show package details将所有的选项显示。

这里一张图放不下，耐心看我的图，确保都安装了。提示：先不要点击finish，等将sdk tools选项选择完毕之后一块finish。

 

 

好，到现在sdk platforms里的东西就结束了。

下面安装sdk tooks中的东西，同样点击show package details将所有的选项显示。

 

 

 

好，到这一步，点击finish！！！

之后就是配置sdk的环境了，如下：

变量名我们就叫ANDROID_HOME就好，变量值就是你刚才的SDK路径。

 之后继续配置Path，添加%ANDROID_HOME%\platform-tools

 

 到现在为止，安卓编译器的环境也就配置好了

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

创建RN项目，命令：npx @react-native-community/cli init ‘你的项目名’。

创建完成之后，gradle-wrapper.properties文件中有个下载地址需要替换成阿里云的，否则项目启动不起来，替换成这段代码：distributionUrl=https://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.10.2-all.zip

如下：

替换完成之后，关闭项目重启，可以在App.tsx中随便修改一点代码，通过启动命令yarn android运行项目即可（Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。）

安装yarn命令：npm install -g yarn

提示一下，第一次启动项目慢得很，我竟然启动了30分钟才成功，笑死了。。。成功如下：

这样环境基本就没啥问题了，有问题下面评论，我看到会回复的！！！ 

 

总结

通过这几天的面试，发现好多公司都是使用rn的，现在大多网上都是expo框架，大家都找不到原生的rn环境配置过程，我这边配置好了，如果你那里有问题的话，请下面评论你的问题，我会尽自己最大努力帮你解决！！！