React native 原生环境搭建(最新版本RN环境搭建,不是expo)

发布于:2025-02-10 ⋅ 阅读:(46) ⋅ 点赞:(0)

前言

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

0c714e5be86c404d853ed3dc9f632f8d.png

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

9bde3b10662b40e7ab13bb908bbda33e.png

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

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

634a3d2c48a948b2805bbad449d47057.png

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

3、下载Android Studio

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

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

启动之后几个注意点,看下面!!!

这里第一次安装,记得选第二个!!!

4e8a273f595f4ce18da380db2dea90f4.png

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

723e81a21b6b45eb8fb6fc7559d7087a.png

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

8717d6367dd24603966e64f497f70cfc.png

这里我们点击自定义安装

16fc3152aa314694a48929805cc12419.png

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

70e5375c95604d60b3474e59e19a3d7f.png

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

 78ac6a5f57a742e4897aba21cf93ccb8.png

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

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

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

dd497854a74a43af9b7e51b4fac9a5bf.png

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

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

fbd4118965d84959983a7b7a3ffd7540.png

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

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

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

b6d967e3cef04b23a25cf8d0e49943fc.png

 1c4a579e7b384a3b964105f3bd9000a0.png

50651c4a33804613a37799f8ce4d2b0b.png

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

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

f0a9e05ae4aa4e13884722aae10297a3.png

9142d71312aa4f3c89d421964cf94137.png

6db9b55c65bd44889f6df787cc1295a4.png

b584fe3c605a42348e3b2b1bc6ad4551.png

好,到这一步,点击finish!!!

之后就是配置sdk的环境了,如下:

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

a5954346c6614ab48d0d567af5aaac26.png

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

 a18d066063a44e568cdf7da4c590f5c3.png

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

如果你之前全局安装过旧的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

如下:

fbe4ee61b8394bea8b9f4670bca8bfc2.png

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

安装yarn命令:npm install -g yarn

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

d6877998ef3b422299520ac7351f1409.png

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

4、构建 APK

如果你想将应用打包为 APK 文件以便在真实设备上安装,可以使用以下命令:

cd android
./gradlew assembleRelease

构建的 APK 文件通常位于 android/app/build/outputs/apk/release/ 目录中。

总结

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


网站公告

今日签到

点亮在社区的每一天
去签到