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

06-02 1923阅读

前言

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

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

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

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

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

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

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

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

3、下载Android Studio

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

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

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

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

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

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

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

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

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

这里我们点击自定义安装

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

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

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

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

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

 到这一步等着就好了,但是可能在最后会有东西下载失败,不用担心,我也是在这里一直失败,后来我手动下载了安装包,找到相应的位置进行的手动安装,链接我放下面。点击Finish:React native 原生环境搭建(最新版本RN环境搭建,不是expo)

 通过网盘分享的文件:haxm-windows_v7_8_0.zip

链接: https://pan.baidu.com/s/1DsC0oW5SWASSTPKZNj2G9A?pwd=wjl6 提取码: wjl6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如下:

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

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

安装yarn命令:npm install -g yarn

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

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

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

4、构建 APK

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

cd android
./gradlew assembleRelease

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

总结

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

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。

目录[+]

取消
微信二维码
微信二维码
支付宝二维码