React Native在移动端落地实践

news2024/9/19 9:28:10

在移动互联网产品迅猛发展的今天,技术的不断创新使得企业越来越注重降低成本、提升效率。为了在有限的开发资源下迅速推出高质量、用户体验好的产品,以实现公司发展,业界催生了许多移动端跨平台解决方案。这些方案不仅简化了开发流程,还极大地提升了产品的兼容性和可维护性,确保企业能够在最短时间内,以最经济的成本,将卓越的产品体验带给广大用户。

1 项目背景

随着碧桂园服务业务的增长和需求更新频率的提升,有限的开发资源已经无法满足快速开发产品的需求。在此背景下,移动端原生APP开发的不足逐渐显现,主要体现在:

  • 研发效能相对较低:同一个业务需求,需要双端开发人员各自独立实现,这在一定程度上浪费了开发资源;

  • 更新时效性低:APP更新需要经过应用市场的审核,审核过程需要一定时间,尤其iOS平台还存在被拒绝的风险;

  • 用户体验相对较差:每次需求功能上线,用户都需要实时更新APP安装包。

鉴于此,我们开始深入思考移动端跨平台优化的方向,并着手实施解决方案。

移动端跨平台技术简介

当前,移动端跨平台从底层实现上主要分为Web、原生和自渲染三大类技术。

2.1 Web渲染技术

基于WebView的实现方案,以Cordova和Ionic为代表,本质上是WebView加载网页的过程。具体流程:加载本地的index.html,加载与该html相关的资源文件,从而渲染出完整的APP界面。

  • 优势:技术门槛相对较低,对H5前端开发人员友好,跨平台一致性和高研发效率。

  • 劣势:WebView的启动和渲染流程都非常耗时,功能受限于WebView内核,在一些重交互或动画复杂场景,性能无法满足诉求,整体用户体验差。

 2.2 原生渲染技术

基于各平台自身的JavaScript解析引擎实现,以React Native和Weex为代表。这些框架在上层使用高级前端语言进行开发(如React Native采用React,Weex采用Vue),然后通过对应平台的JavaScript解析引擎对代码进行解析,在Engine层转换成原生组件进行渲染,并通过Bridge层进行通讯。

  • 优势:顶层采用H5语言,对前端开发友好。底层使用平台自己的组件渲染,性能相对较好,用户体验佳。

  • 劣势:JavaScript层与Native平台层频繁通讯带来的性能瓶颈,且对动画要求高的组件需要原生组件的支撑

2.3 自渲染技术

基于各平台底层渲染的公开API实现UI渲染引擎,以Flutter为代表。该框架在上层使用Dart语言,而底层则由Flutter实现了Skia跨平台渲染引擎,从而实现了UI层与原生环境之间的高性能数据交互。

  • 优势:Native作为宿主环境,UI组件直接通过渲染引擎进行绘制,既确保了两端的一致性,又提供了良好的性能和用户体验。

  • 劣势:上层采用Dart语言,对前端开发人员不太友好,增加了学习和上手的难度。

3 技术选型

碧桂园服务的大管家APP自2018年上线以来,已经发展成为一个拥有数十个内部功能模块的复杂应用,其中包括地图标识和轨迹等交互复杂的模块。此外,大管家APP的需求功能迭代比较频繁,因此在综合考虑技术方案时,我们关注到React Native的几个优势:

  1. 原生渲染能力,能提供接近于原生APP的用户体验;

  2. 采用React作为顶层语言,对H5开发人员友好;

  3. 可以封装现有APP原生组件,暴露给JS层使用。

基于以上优势,我们最终选择React Native作为“大管家APP”项目的技术框架,并据此进行了技术调研,以确保我们的选择是合理的。以下是我们进行技术调研时参考的一组对比数据:

4 技术实践

4.1 APP大体架构设计

大管家APP基于新框架的四层架构设计具有高度的可扩展性和业务适配能力,整合了Native APP外壳、H5页面、React Native页面以及Native页面的技术混合方案。

系统层(Native):在原生APP的底层,我们根据不同平台的API封装了一系列的Native Modules,包括Router路由组件、定位组件、H5 Bridge组件、RN Bridge组件、微信分享组件以及UI Modules如地图组件、日期组件等。

通讯层(Bridge):分别实现了H5 Bridge和RN Bridge,有效地抹平底层系统API的差异,为上层应用提供了一致的接口。

路由层(Router):实现H5通用容器(涉及到微信小程序等第三方平台)、React Native通用容器(一般场景首选)和原生页面等路由模块(复杂场景),以供上层业务场景使用。

业务层(Business):产品需求决定业务层选择。我们根据业务是否需要支持第三方平台来确定是否选择H5路由模块,如果不涉及第三方平台我们根据需求中包含复杂动画需求,选择原生路由模块,剩下场景全部使用React Native路由模块。

4.2 React Native在APP上落地

1、两端APP接入React Native

根据React Native官网指导引入相关依赖,构造React Native页面通用容器并实现容器路由。

iOS端实现部分主要流程:

  • 参考官网使用Cocoapods引入依赖(node_modules目录下React Native);

  • 引入相关头文件RCTRootView.h;

  • 定义属性变量RCTBridge和RCTRootView;

  • 实现代理RCTBridgeDelegate构造React Native通用容器。

Android端实现主要流程:

  • 在项目的build.gradle文件中为React Native和JSC引擎添加Mave源的路径,必须写在 "allprojects" 代码块内;

  • 在APP build.gradle文件中添加React Native和JSC引擎依赖;

  • 启用原生模块的自动链接;

  • 实现Android通用容器。

2、React Native工程搭建

我们采用了单工程多Bundle的设计策略(即每个页面都单独打包成一个Bundle文件),工程中内部引入了现有的iOS和Android原生APP工程,这些APP工程必须放置在React Native工程的根目录下。对于iOS和Android端,我们分别设置了一个统一的React Native页面容器,以便整合和管理。React Native工程结构如下:

3、Bundle动态更新

下面是我们实现的Bundle差分、APP加载Bundle、APP更新Bundle及后台管理流程。每一个页面Bundle=基础Bundle+差分Bundle,我们实现一个管理后台专门管理这些差分Bundle和基础Bundle,并能生成一个Bundle配置列表,随着需求的不断迭代更新,APP通过拉取配置列表实现Bundle加载和更新,实时替换刷新用户界面。

4、Bundle模块开发

我们通过对部分旧模块进行React Native改造。对于新业务模块,我们将优先选用React开发。下图是一个聊天用户列表Bundle实现示意图:

4.3 React Native落地效果

我们回归文章一开始提出的本质问题和项目目标时,我们发现使用React Native带来了以下显著优势:

1、提高移动端性能

从生日提醒页面实现数据看,文件大小的显著差异使得React Native页面在加载和启动速度上远超H5。H5页面在UI长列表绘制时会时不时出现失帧,而React Native页面在帧率和内存占用方面展现出较H5更显著的优势。

2、提升研发效能

从实践来看,React Native同时吸收H5的研发效率、动态更新和原生的UI用户体验等优势,提高了研发效率和用户体验,支撑了大前端团队的敏捷研发交付。

3、媲美原生UI体验

以下是UI层渲染节点图:

RCTRootView是iOS的视图组件,从图中可以看出,UI节点最终都是原生的视图组件来呈现的,因此渲染效果和性能是完全和原生相差无几。值得注意的是,我们在所有React Native页面中使用的下拉刷新组件是原生封装JS层调用,这些能力是H5无法做到的。

通过大管家APP项目中的React Native部分模块改造,我们成功实现了Bundle资源文件的后台管理,优化了功能的迭代更新运维过程。这一改造不仅完美落地了React Native这一移动跨平台技术,同时也充分发挥了JavaScript框架的极致性能,从而实现了用户体验、资源整合和研发效能的完美兼容。

5 总结

  1. 通过实时动态更新Bundle,用户无需更新APP即可获得最新功能和优化,极大地提升了APP终端用户体验;

  2. 使用React进行开发,实现iOS、Android及前端资源的整合,统一项目大前端技术栈,有效减少开发资源的浪费;

  3. 两端开发变成单一前端开发,理论节省一半开发时间,提高研发效能。

未来,随着业务需求的快速增长和变化,移动端跨平台技术在支持公司的敏捷交付将发挥越来越重要的作用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1952392.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

轻松学EntityFramework Core--模型创建

一、使用代码优先(Code-First)创建模型 Code-First 方法是 EF Core 提供的一种用于定义模型的方式,它允许开发人员通过编写 C# 类来定义数据库模式,再通过迁移命令生成数据库表。下面我们来一起看一下代码优先如何使用。 1.1、创…

Collention集合基础知识

Array 数组是一种连续的内存空间存储相同数据类型数据的线性数据结构 数组获取其他元素的地址值 寻址公式 a[i] baseaddress i*datatypesize 为什么数组索引从0开始 从1开始不行吗 从0开始寻址公式 a[i] baseaddress i*datatypesize 从1开始寻址公式 a[i] baseadd…

利用GPT4o Captcha工具和AI技术全面识别验证码

利用GPT4o Captcha工具和AI技术全面识别验证码 🧠🚀 摘要 GPT4o Captcha工具是一款命令行工具,通过Python和Selenium测试各种类型的验证码,包括拼图、文本、复杂文本和reCAPTCHA,并使用OpenAI GPT-4帮助解决验证码问…

yolov5-7在opencv里跑自己的onnx模型

先把模型放在如下目录 运行如下代码 import cv2 import numpy as npclass Onnx_clf:def __init__(self, onnx:strdnn_model1/plane02.onnx, img_size640, classlist:list[plane]) -> None: func: 读取onnx模型,并进行目标识别para onnx:模型路径img_size:输出图片大小,和模…

Codeforces Round 962 (Div. 3) D. Fun (数学,暴力枚举)

非常好题目,使我思考良多。 经典的数学问题,题目给出了两道数学式子,当然就是要让我们推啊。 首先纠正一个错误,当我发现了这两个式子能凑出来平方式的时候我就想着去用两个式子来互相简化,但其实这样存在以下一个错误…

数据增强和数据平衡

数据增强(Data Augmentation) 数据增强是一种通过对数据进行变换来增加数据多样性的方法。它可以提高模型的泛化能力,特别是在图像和文本处理任务中。 原理 通过数据增强技术,生成更多样本,提高模型的泛化能力。例如…

Github个人网站搭建详细教程【Github+Jekyll模板】

文章目录 前言一、介绍1 Github Pages是什么2 静态网站生成工具3 Jekyll简介Jekyll 和 GitHub 的关系 4 Mac系统Jekyll的安装及使用安装Jekyll的简单使用 二、快速搭建第一个Github Pages网站三、静态网站模板——Chirpy1 个人定制 四、WordPress迁移到Github参考资料 前言 23…

chrome浏览器驱动(所有版本)

chrome浏览器驱动 114之前版本 https://chromedriver.storage.googleapis.com/index.html 125以后 125以后版本下载链接在此,只有后面status是绿色对勾的才可以下载,驱动大版本一致就可以使用,不需版本号一模一样;下载所需版本只…

STM32智能工业监控系统教程

目录 引言环境准备智能工业监控系统基础代码实现:实现智能工业监控系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:工业监控与优化问题解决方案与优化收尾与总结 1. 引言 智能工业监控系统通…

Java集合框架2024最通俗易懂(图片超全)

集合 1.1、定义 集合就是类型统一的数据组合而成的数据结构,该数据结构可以任意的改变长度。 1.3、Set Set数据存储结构,无序,且不可以重复,元素可以为null,但是也只能出现一次,如下图: 1.3.1、HashSe…

2. 卷积神经网络无法绕开的神——LeNet

卷积神经网络无法绕开的大神——LeNet 1. 基本架构2. LeNet 53. LeNet 5 代码 1. 基本架构 特征抽取模块可学习的分类器模块 2. LeNet 5 LeNet 5: 5 表示的是5个核心层,2个卷积层,3个全连接层.核心权重层:卷积层、全连接层、循环层&#xff…

从零开始学习网络安全渗透测试之基础入门篇——(二)Web架构前后端分离站Docker容器站OSS存储负载均衡CDN加速反向代理WAF防护

Web架构 Web架构是指构建和管理Web应用程序的方法和模式。随着技术的发展,Web架构也在不断演进。当前,最常用的Web架构包括以下几种: 单页面应用(SPA): 特点:所有用户界面逻辑和数据处理都包含…

Apache Nifi挂接MQTT与Kafka实践

目录 1. 说明: 2. 方案设计: 2.1 资源配置: 2.2 交互Topics: 3. 实现步骤 3.1 Nifi 桌面 3.2 MqttToKafka 3.2.1 配置 3.2.2 测试 3.2.3 结果 3.3 KafkaToMqtt 3.3.1 配置 3.3.1 测试 3.3.1 结果 ​编辑 4. 总结&#xff…

web学习笔记(八十三)git

目录 1.Git的基本概念 2.gitee常用的命令 3.解决两个人操作不同文件造成的冲突 4.解决两个人操作同一个文件造成的冲突 1.Git的基本概念 git是一种管理代码的方式,广泛用于软件开发和版本管理。我们通常使用gitee(码云)来云管理代码。 …

使用SpringTask框架

目录 一.什么是SpringTask? 二.cron表达式: 三.SpringTask框架的使用操作: 1.导入maven坐标spring-context: 2.启动类添加 EnableScheduling 以此来开启任务调度: 3.自定义定时任务类: 普通案例&#…

如何写好技术文档 - 来自Google十多年的文档经验

[导读]本文大部分内容翻译总结自《Software Engineering at Google》第10章节 Documentation。另外,该书电子版近日已经可以免费阅读了https://qiangmzsx.github.io/Software-Engineering-at-Google/#/?idsoftware-engineering-at-google,有兴趣的同学可…

Dockerfile指令详解和Docker操作命令

1.容器的特点:1)自包含(包括应用程序及其运行环境);2)可移植;3)相互隔离;4)轻量级。 2.docker成为容器的事实标准在于:1)在运行环境上…

Unity 资源 之 Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享

精彩呈现:Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享 一、Pop It 3D 解压玩具的魅力二、双人游戏的互动乐趣三、Unity 游戏资源包的优势四、如何获取资源包 亲爱的游戏爱好者们,今天为大家带来一款令人兴奋的游戏资源——Pop It 3D 解压玩具双人带…

ubuntu串口重命名助手arm64架构(下)Qt交叉编译arm64

✨✨ Rqtz 个人主页 : 点击✨✨ 🎈PyQt系列专栏:点击🎈 🎈Qt智能车上位机专栏: 点击🎈 🎈Qt串口助手专栏:点击🎈 💫宗旨:共享IT之美,共创机器未来 目录 前言 设备介绍 查询系统架构 下载…

【JVM基础05】——组成-能不能解释一下方法区?

目录 1- 引言:方法区概述1-1 方法区是什么?(What)1-2 为什么用方法区?方法区的作用 (Why) 2- ⭐核心:详解方法区(How)2-1 能不能解释一下方法区?2-2 元空间内存溢出问题2-3 什么是常量池?2-4 运行时常量池 …