React Native在移动端落地实践

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

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.rhkb.cn/news/386343.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#基于SkiaSharp实现印章管理(5)

印章中最常见的特殊形状通常是五角星,空心、实心的都可能存在,本文学习并实现在印章内部绘制五角星形状。   百度五角星的绘制方法,主要分为三种:   1)五角星各点坐标固定,直接调用编程语言的绘制线条或…

校车购票小程序的设计

管理员账户功能包括:系统首页,个人中心,学生管理,我的乘车信息管理,车辆信息管理,座位管理,系统管理 微信端账号功能包括:系统首页,车辆信息,我的 开发系统…

推荐一款专注批量推送消息的轻量工具,支持主流平台的消息推送,简单、高效、低成本(附源码)

前言 在数字化时代,企业和个人面临着日益增长的消息推送需求。然而,现有的推送处理方案往往存在一些挑战和不足,如cao作复杂、成本高昂、缺乏灵活性等。这些问题不仅影响了推送效率,也增加了用户的负担。此外,随着工作…

SpringCloud+Vue3主子表插入数据(芋道)

目的:多表联查获取到每个班级里面所有的学生上课的信息。点击消课插入到消课主表和消课子表,主表记录班级信息,消课人员信息,上课时间。子表记录上课学员的信息,学员姓名、手机号、班级名称、班级类型、上课时间、老师…

词的向量化和文本向量化

词的向量化和文本向量化 向量化one-hot编码提前准备词表不提前准备词表one-hot缺点 词向量简介词向量的定义和目标word embedding和word vector的区别onehot编码与词向量关系构建 训练方式1(基于语言模型)训练方式2(基于窗口)CBOW…

Javascript前端面试基础(八)

window.onload和$(document).ready区别 window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕 window.onload 触发时机:window.onload 事件会在整个页面&#xf…

[css3] 如何设置边框颜色渐变

div {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1; }参考: 5种CSS实现渐变色边框(Gradient borders方法的汇总

银行贷款信用评分不足?大数据帮你找回失去的“分”

在这个信息爆炸的时代,无论是个人还是企业,数据都成为了衡量信用和评估风险的重要依据。贷款、融资、求职甚至是日常消费,都可能因为一份好的数据报告而变得更加顺畅。那么,如何高效地查询自己的大数据,面对评分不足时…

文件上传漏洞(ctfshow web151-161)

Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152: 考点:后端不能单一校验 就是要传图片格式,抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …

uniapp时间戳转时间

时间戳转时间 utils页面 function timestampToTime(time) { const date new Date(time); const year date.getFullYear(); const month String(date.getMonth() 1).padStart(2, 0); // 月份从0开始,所以要加1,并补齐0 const day String(date…

尚庭公寓(五)

图片上传管理 由于公寓、房间等实体均包含图片信息,所以在新增或修改公寓、房间信息时,需要上传图片,因此我们需要实现一个上传图片的接口。 **1. 图片上传流程** 下图展示了新增房间或公寓时,上传图片的流程。 可以看出图片上传…

深度学习Week21——学习DenseNet算法

文章目录 深度学习Week21——学习DenseNet算法 一、前言 二、我的环境 三、学习DenseNet算法 四、代码复现 4.1 配置数据集 4.2 构建模型 五、模型应用与评估 5.1 编写训练函数 5.2 编写测试函数 5.3 训练模型 5.4 结果可视化 一、前言 🍨 本文为🔗365天…

第一个设计模式——单例模式

目录 一、特点: 二、实现单例模式步骤 三、饿汉式 四、懒汉式 五、双重检查锁 六、静态内部类 七、枚举 八、可能被反序列化和反射破坏什么意思? 九、如何解决呢? 一、特点: 唯一性,单例模式确保程序中只有一…

Qt自定义带前后缀图标的PushButton

写在前面 Qt提供QPushButton不满足带前后缀图标的需求,因此考虑自定义实现带前后缀图标的PushButton,方便后续快速使用。 效果如下: 同时可设置前后缀图标和文本之间间隙: 代码实现 通过前文介绍的Qt样式表底层实现 可以得…

HiveSQL中last_value和first_value函数的应用

概述 今天做一个数据分析,其中有一列数据有些有数据有些没数据,因此我们需要把每数据的进行补充进来因此我们需要使用last_value 函数和over 结合使用,但是遇到一个比较奇葩的问题不能按照预期进行处理。 新说原因: 由于我们要处…

vue3-环境变量-JavaScript-axio-基础使用-lzstring-字符串压缩-python

文章目录 1.Vue3环境变量1.1.简介1.2.全局变量的引用1.3.package.json文件 2.axio2.1.promise2.2.安装2.3.配置2.3.1.全局 axios 默认值2.3.2.响应信息格式 2.4.Axios的拦截器2.4.1.请求拦截器2.4.2.响应拦截器2.4.3.移除拦截器2.4.4.自定义实例添加拦截器 3.lz-string3.1.java…

java项目数据库 mysql 迁移到 达梦

目录 一、下载安装达梦数据库 1、下载 2、解压 3、安装 二、迁移 三、更改SpringBoot 的 yml文件 1、达梦创建用户 2、修改yml 一、下载安装达梦数据库 1、下载 下载地址 https://eco.dameng.com/download/ 点击下载 开发版 (X86平台) , 然后选择操作系统并点击立…

“科技创新‘圳’在变革”2025深圳电子展

电子产业作为现代社会的核心驱动力之一,正以前所未有的速度发展。在这样的背景下,深圳作为中国的经济特区和创新高地,又一次迎来了备受瞩目的盛会——2025深圳电子展览会。本次展览会定于2025年4月9日至11日,在深圳会展中心&#…

剪画小程序:手机提取人声和伴奏

在音乐的海洋中,我们常常渴望更纯粹地感受歌手的嗓音魅力。 如今,有了 剪画,人声分离不再是难题! 想象一下,当您沉浸在一首动人的歌曲中,却希望更清晰地捕捉到歌手声音中的每一个微妙情感。 无论是经典老…

算能端侧 AI 盒子 Stable Diffusion 一秒一张图:AirBox BM1684X

本篇文章聊聊基于 端侧 AI 计算设备,20~30 瓦功耗运行大模型的算能 AirBox。 写在前面 去年的双十二的时候,在群里看到了一张照片,“手掌大小的 NUC”,但是能够跑大模型。 这个草就种下了。 今年 7 月初的时候,在上…