一、搭建RN开发环境 (0.75)

小林的编程开发日记
1,767 阅读11分钟

聊聊

RN 、Flutter、Uniapp

这三门技术栈对应着三种选择，一般公司有了app的需求，且需要跨端的话就得三选一，那么作为开发者，如何来选择呢？

（以下是个人的一些经验以及GPT的答案）

渲染性能对比

React Native（RN）

  • 渲染机制：RN 采用了桥接（Bridge）模式，JavaScript 代码通过桥接和原生平台通信。RN 的 UI 是通过调用原生组件实现的，而不是完全自定义渲染。(RN新架构会升级)
  • 渲染性能：由于使用 JavaScript 与原生代码之间的桥接模式，RN 的渲染性能通常比 Flutter 稍弱，特别是复杂 UI 结构或动画效果时可能出现卡顿。但对于大多数常见的业务场景，RN 的渲染性能是足够的。
  • 长列表渲染：RN 提供了 FlatList 和 SectionList 组件用于优化长列表渲染，支持懒加载和批量渲染，对于上下滚动的长列表有较好的性能表现。但在处理高频率的左右滑动时，桥接带来的性能开销可能会导致一些性能问题。

UniApp

  • 渲染机制：UniApp 基于 Vue.js，渲染是在 WebView 或小程序容器中完成的。不同平台（如微信小程序、H5、原生 App）有不同的渲染模式。通常 H5 和小程序是基于 DOM 渲染，原生则通过 WebView 渲染。
  • 渲染性能：在 WebView 中的渲染性能明显不如原生组件，尤其在处理大量复杂组件时，可能会出现卡顿。此外，和 Flutter 以及 RN 相比，UniApp 的渲染表现整体偏弱，尤其是涉及到高性能需求的场景（如复杂动画、视频播放）。
  • 长列表渲染：对于长列表渲染，由于 WebView 的性能限制，表现一般，左右滑动的长列表会有较高的卡顿几率。在部分平台（如微信小程序）中，小程序自身有针对长列表的性能优化，但整体性能仍然不如 RN 和 Flutter。

Flutter

  • 渲染机制：Flutter 的渲染完全通过自定义的 Skia 引擎进行，它绕过了原生 UI 系统，直接控制每一个像素的渲染。Flutter 通过其框架和 Skia 图形库直接在设备的 GPU 上进行绘制，具有极高的性能。
  • 渲染性能：由于 Flutter 是直接渲染的，没有桥接模式，渲染性能非常高，特别是在处理复杂的 UI 动画和高性能图形时，表现优越。因此，在大部分场景下，Flutter 的渲染性能是这三者中最好的，尤其是在处理大量动画、复杂组件和自定义 UI 方面。
  • 长列表渲染：Flutter 提供的 ListView 和 PageView 等组件具有出色的性能，可以流畅处理长列表和左右滑动的长列表。这得益于 Flutter 对渲染的控制权较高，能很好地进行内存优化和 GPU 加速。

对接原生能力

React Native（RN）

  • 对接原生能力：RN 通过 JavaScript 和原生代码的桥接来调用原生能力，如相机、传感器、存储、内存等。RN 社区提供了大量的第三方库（如 react-native-camera、react-native-image-picker 等）来帮助对接这些功能。性能较好，但由于 JavaScript 与原生代码的通信涉及跨桥开销，某些高频次的任务（如处理复杂相机流媒体数据）可能不如完全原生代码流畅。
  • 流畅度：在处理原生能力时，流畅度较高，但某些较重的任务可能会受到 JavaScript 引擎的影响。

UniApp

  • 对接原生能力：UniApp 可以通过插件市场或者原生插件来调用原生能力。UniApp 主要通过 WebView 容器调用原生能力，因此调用相机、内存等会比完全原生的体验要差一些。不过，官方和第三方提供了大量的插件，帮助开发者快速集成原生能力，如相机、位置服务、支付等。
  • 流畅度：由于渲染主要依赖于 WebView，某些复杂的原生能力如相机、音频处理等，性能和流畅性会受到限制，不如 RN 和 Flutter。

Flutter

  • 对接原生能力：Flutter 的平台通道机制（Platform Channels）允许 Dart 代码与平台原生代码进行高效通信（iOS 是 Swift/Objective-C，Android 是 Kotlin/Java）。Flutter 在调用相机、内存管理等原生能力时几乎与完全原生代码一致。社区也提供了丰富的插件（如 camera 插件）来对接常用的原生能力。
  • 流畅度：Flutter 由于没有 JavaScript 桥接模式，直接与原生代码通信，在处理原生功能时流畅性非常好，接近原生应用的表现。

生态社区支持

React Native（RN）

  • 生态丰富度：React Native 社区非常活跃，拥有大量的第三方库和组件，支持微信登录、支付宝支付、微信支付等常见功能。由于 RN 社区庞大，并且 Facebook 等公司也在支持，许多复杂的集成功能（如三方登录、支付、一键登录等）都有现成的解决方案。
    • 微信支付/支付宝支付：通过第三方库可以很方便地接入，比如 react-native-wechat、react-native-alipay 等。
    • 手机号一键登录：可通过中国移动的 SDK 或者阿里巴巴的 react-native-geetest 等插件集成，成熟且使用广泛。

UniApp

  • 生态丰富度：UniApp 提供了一个强大的插件市场，集成微信登录、支付宝支付、微信支付、手机号一键登录等功能也相对简单。因为 UniApp 主打国内市场，官方提供了许多本地化支持，像微信、支付宝、微博登录以及国内常用的支付接口都能很好对接。
    • 微信支付/支付宝支付：官方插件市场有标准化的插件，集成起来非常方便。
    • 手机号一键登录：UniApp 支持中国大陆主要运营商的一键登录，通过官方插件即可快速集成。

Flutter

  • 生态丰富度：Flutter 社区发展迅速，Google 官方支持的插件生态较好，涵盖了微信登录、支付宝支付、微信支付、手机号一键登录等功能，但生态相对 RN 来说还稍显年轻。
    • 微信支付/支付宝支付：通过第三方插件（如 fluwx 用于微信支付，flutter_alipay 用于支付宝支付）可以方便集成，但有时需要自己编写平台代码以满足定制需求。
    • 手机号一键登录：中国移动、阿里等提供了相应的 SDK 和插件，但可能需要手动编写原生代码部分来完成更高定制化的集成。

总结一下

  • React Native：通过 JavaScript 和原生代码桥接，UI 组件最终映射为原生组件，渲染依赖原生系统的渲染引擎。
  • UniApp：主要依赖 WebView 渲染，底层是基于 DOM 树，和 HTML5 类似的渲染机制。
  • Flutter：完全自定义渲染引擎（Skia），直接渲染到屏幕上，跳过了原生的 UI 系统，因此具有极高的性能，尤其在复杂界面和动画中表现出色。

性能/动画/原生能力： Flutter > RN >> Uni

文档(对国人友好程度)： Uni > RN > Flutter

生态/社区/活跃度： RN > Uni > Flutter

其实uni我平时用的也多，很多时候官方的API、插件、组件一堆奇奇怪怪的bug，不是说RN没有，只是RN的概率远小于Uni。且即便RN这个第三方插件有了问题，往往会有平替。

Flutter使用Dart语言，学习起来是有一些成本的，如果是前端想要做App，最优的选择就是RN。

一. 搭建RN开发环境

目前使用电脑系统是window ， 以window为演示

RN搭建开发环境文档 本篇文章也会从零到一开始搭建环境~

1. 必须要配置的环境

  • Nodejs
  • JDK
  • Android Studio

1.1 Nodejs

node官网,可以从官网下载最新的版本，只需要满足RN条件即可。

微信截图_20241029184430.png

  • 下载安装 (同意协议)

微信截图_20241029191810.png 双击安装包进行安装，并勾选协议 微信截图_20241029184552.png

  • 选择安装路径、配置环境变量

建议C盘空间充足的同学，直接使用默认的安装路径就好了，如果C盘空间比较紧张，需要安装到其他盘， 注意一定不能存在中文字符，不然可能出现不可控的bug，且一定要记住安装路径

微信截图_20241029184606.png

  • <我的电脑> - <属性> - <高级系统设置> - <环境变量> 微信截图_20241029185210.png
  • 选择<系统变量> 选择编辑 path 填入nodejs安装路径 此处为 E:\node\ ea869e5e5fd847ab9f3fda3890c213ce.png
  • 终端检查node环境 node -v npm -v

Snipaste_2024-10-29_18-58-33.png

可以出现版本号 说明node环境配置完毕

  • 配置淘宝镜像 (可选)
    • npm config get registry 查看当前npm地址
    • npm config set registry https://registry.npmmirror.com/ 配置地址为淘宝镜像

1.2 JDK

  • 选择合适的版本下载 JavaDK下载地址 Snipaste_2024-10-29_20-11-56.png

  • 安装路径和环境变量的配置和Nodejs一致 Snipaste_2024-10-29_20-12-41.png

  • 在系统变量中写入JAVA_HOME，地址填入本机安装路径 此处为 D:\javaJdk Snipaste_2024-10-30_16-35-31.png

  • 在Path中写入 %JAVA_HOME%\bin 微信截图_20241030163552.png

  • 在终端输入 javac -version 检查有无java环境，如果有说明安装完毕 2921592-2024011116320742-868960201.png

1.3 Android Studio

如果上面的 jdk 没有安装，其实在Android Studio也可以安装上jdk版本。 （AS允许多个jdk版本存在）

  • 先看RN文档对 Android Studio环境的介绍

其实文档说明的已经非常非常详细了，但是我自己安装的时候还是踩坑无数，所以我将逐步拆分各个步骤

Snipaste_2024-10-30_16-46-40.png

Android Studio下载地址

注意版本号就行，同意协议并点击下载

Snipaste_2024-10-30_16-49-37.png

安装之后先照着官网的步骤进行配置，详细来看android sdk的下载和配置

  • 首先进入 Setting 也可以用快捷键 crtl + alt + s

2921592-2024011116320742-868960201.png

  • 搜索 sdk , 选择 android sdk Snipaste_2024-10-30_16-59-59.png

  • 首先选择一个文件路径（不适用默认地址的话，一定要记住这个路径，后续会用）

  • 一定要下载 Android SDK Platform 34

  • 如果不使用官方的模拟器，就不需要下载Intel x86 Atom_64 System Image

  • 推荐使用真机开发调试 Snipaste_2024-10-30_17-08-11.png

  • 安装 SDK Tools 确保选中了 React Native 所必须的34.0.0版本 2921592-2024011116320742-868960201.png

  • 搜索 gradle 一个是gradle的地址，一个是选择jdk的版本。 Snipaste_2024-10-30_17-08-57.png

  • 配置 环境变量

新建变量名 ANDROID_HOME ,路径是 上述sdk的安装路径

Snipaste_2024-10-30_17-08-57asd.png

添加工具类到环境变量 %ANDROID_HOME%\platform-tools Snipaste_2024-10-30_17-13-02.png

至此RN0.75版本需要的环境配置完毕

2. 初始化项目

在工作文件夹（不包含中文或特殊字符）运行命令

npx @react-native-community/cli@latest init meetRN(项目名称随意起)

Snipaste_2024-10-31_11-49-38.png 全部是对勾且出现 这两行日志说明项目初始化完毕，但是需要注意，@latest会下载最新版本0.76，但是上述的一切配置都是0.75为了避免出现不可控的bug，我们还是指定版本 0.75.x 。

  • 这里运行0.75.2版本 npx react-native@0.75.2 init meetRN --version @0.75.2

Snipaste_2024-10-31_13-54-55.png

  • 下一步操作就是进入文件夹内 将 android 目录拖动到 android-studio 中进行构建版本

Snipaste_2024-10-31_11-50-22.png

  • 这里是一个漫长的过程，没有什么好的方法，很多依赖包都是国外的地址，一定要有耐心~~
  • 这两个按钮一个是 build 一个是同步文件 ，一般不需要手动点，会自动构建

Snipaste_2024-10-31_18-22-32.png

  • 构建完成的标志

Snipaste_2024-10-31_18-26-37.png

  • 运行项目之前，一定要有一台安卓设备，或者使用android studio 创建模拟器

这里就不展开赘述了，真机各个厂商都不一样思路是：设置 -> 系统设置 -> 开发者模式 -> 允许USB安装应用

使用android studio 创建模拟器时，一定要选对android的版本

  • 使用 Vscode 打开整个 meetRN 项目，在终端输入 npx react-native run-android 会自动运行在你的安卓设备上

Snipaste_2024-10-31_18-04-02.png

  • 除了vscode的终端，还会创建一个 Metro的终端，这个终端是专门用来调试RN的

Snipaste_2024-10-31_18-aa22-32.png

  • 同意安装

Snipaste_2024-10-31_18-33-21.png

  • 应用页面

Snipaste_2024-10-31_18-04-27.png

  • 找到 App.tsx文件，随意修改几处代码

Snipaste_2024-10-31_18-07-58.png

  • 观察设备 (若没更新，可在 Metro按一个小写的 r 意思是热更新一下页面,(下篇会详细讲如何调试RN)

Snipaste_2024-10-31_18-08-06.png

总结

  • 安装node 、 JDK 、android studio 这些环境不是一件轻松的事，而且每个人的电脑设备、网络可能出现各种各样的怪现象，不要慌，慢慢解决
  • RN版本一定不能轻易换~~ 本篇配置的RN版本是0.75.2
avatar
文章
阅读
粉丝