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://xiahunao.cn/news/3266630.html

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

相关文章

使用AI大模型统计英语四六级试题高频词汇

引子 前些年我做过商品搜索,当时为了优化一些搜索词和搜索关联提示,接触到一点NLP的知识。所以后来有一场非全日制的研究生考试,为了高效的复习英语单词,我爬取了往年的历史真题数据,以及其他模拟等各种试题的数据。然…

【零基础必看的前端教程】——JavaScript(八)函数

欢迎大家打开前端的新篇章——JavaScript,JavaScript与HTML、CSS合称为前端三大件,JavaScript是前端的重中之重,小洪将继续以零基础视角,带你循序渐进学习前端知识,一看就懂,小白也能转行做前端&#xff01…

【PyTorch】基于YOLO的多目标检测项目(二)

【PyTorch】基于YOLO的多目标检测项目(一) 【PyTorch】基于YOLO的多目标检测项目(二) YOLO-v3网络由跨距为2的卷积层、跳跃连接层和上采样层组成,没有池化层。网络接收一幅416 * 416的图像作为输入,并提供三…

nacos2.x作为配置中心和服务注册和发现以及springcloud使用

目录 一、nacos是什么 二、windows下安装配置nacos 1、准备 2、安装nacos 3、配置nacos 4、启动并且访问nacos 三、springcloud使用nacos作为配置中心 四、springcloud使用nacos进行服务注册与发现 五、springcloud使用nacos进行服务消费 六、nacos的一些高级配置 1…

pytorch-梯度下降

梯度下降 y x 2 ∗ s i n ( x ) y ′ 2 x s i n x x 2 c o s x x 1 x − Δ y ′ ( x ) 其中 Δ 表示学习率, y ′ ( x ) 代表 y 在 x 点处关于 x 的梯度。 y x^2 * sin(x) \\ y 2xsinxx^2cosx \\ x_1 x - \Delta y(x) \\ 其中 \Delta 表示学习率&#xff0c…

nginx 启动 ssl 模块

文章目录 前言nginx 启动 ssl 模块1. 下载2. 启动 ssl 模块 步骤3. 验证前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差,实在白嫖的话,那欢迎常来啊!!! nginx 启动 ssl 模块 1. 下载 下载…

土耳其云手机提升TikTok电商效率

在数字化飞速发展的今天,TikTok不仅是一个社交平台,更是一个巨大的电商市场。随着TikTok电商功能在全球范围内的扩展,土耳其的商家和内容创作者正面临着前所未有的机遇。本文将详细介绍土耳其云手机怎样帮助商家抓住机遇,实现业务…

vscode回退不显示了,不方便操作

一、后退前进按钮 顶部显示&#xff0c;方便调试 <—— ——> 文件-> 首选项 -> 设置->commandcenter->勾选 Window: Title Bar Style->custom 将native —>custom

Pytorch使用教学4-张量的索引

1 张量的符号索引 张量也是有序序列&#xff0c;我们可以根据每个元素在系统内的顺序位置&#xff0c;来找出特定的元素&#xff0c;也就是索引。 1.1 一维张量的索引 一维张量由零维张量构成 一维张量索引与Python中的索引一样是是从左到右&#xff0c;从0开始的&#xff…

MSP430M03507最小系统板的keil环境搭配,用keil编辑ti单片机

转载自嘉立创MSP430M03507开发手册 这篇文章只是因为我的keil版本与嘉立创的不一样&#xff0c;所以添加了我自己遇到的问题解析 先说说为什么要用keil编辑&#xff0c;因为ti单片机自己的ccs编译环境需要对应仿真器&#xff0c;那个加芯片都240了&#xff0c;哪有那么多钱买…

谷粒商城实战笔记-踩坑-跨域问题

一&#xff0c;When allowCredentials is true, allowedOrigins cannot contain the special value “*” since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider u…

华东科技杂志华东科技杂志社华东科技编辑部2024年第12期目录

主编的话 造梦国际创新科技之“港” 李岩; 5 焦点 华东视界 6-7 焦点_产业风暴 新材料 8 前沿产品 8 人工智能 9 电子信息 9 生物医药 9 焦点_科技人物 Demis Hassabis&#xff1a;界定AI角色 李冲; 10-15 观点_专题策划 沪港科创“乘数效…

uniapp开发精选短视频视频小程序实战笔记20240725,实现顶部轮播图和热门短剧

创建项目 创建项目,叫video_app。 在pages.json里面修改一下标题: 新建search搜索页面和me我的页面。 此时界面预览效果如下: 引入静态资源 主要是static里面的内容,全部复制过来。 配置底部导航栏 pages.json,放到顶层,和全部样式同级: "tabBar&quo…

基于OSS前端直传的分片上传以及断点续传

一、大文件分片上传 原型 大文件如果直接上传的话由于nginx的限制会导致响应500报错&#xff0c;或者响应时间过长导致响应超时 并且大文件上传有如下缺点 上传时间长: 对于大文件&#xff0c;直接上传可能需要较长时间&#xff0c;特别是在网络速度较慢或不稳定的情况下。这…

演出票务代理需要办理哪些资质?

疫情开放之后&#xff0c;演出行业应该当属今年最火的行业了&#xff0c;你看看今年各地举办的演唱会&#xff0c;光上海今年要举办177场、北京106场、广州94场等&#xff0c;经统计&#xff0c;全国上半年演唱会场次总和为500多场&#xff0c;而下半年已开、待开的演唱会竟达1…

手机怎么设置不同的ip地址

在数字化日益深入的今天&#xff0c;智能手机已成为我们生活、工作和学习中不可或缺的设备。然而&#xff0c;随着网络应用的广泛和深入&#xff0c;我们有时需要为手机设置不同的IP地址来满足特定需求。比如&#xff0c;避免网络限制、提高网络安全、或者进行网络测试等。本文…

ROM修改进阶教程------修改rom 开机自动安装指定apk 自启脚本完整步骤解析

rom修改的初期认识 在解包修改系统分区过程中。很多客户需求刷完rom后自动安装指定apk。这种与内置apk有区别。而且一些极个别apk无法内置。今天对这种修改rom刷入机型后第一次启动后自动安装指定apk的需求做个步骤解析。 在前期博文中我有做过说明。官方系统固件解…

ChatGPT的原理和成本

ChatGPT就是人机交互的一个底层系统&#xff0c;某种程度上可以类比于操作系统。在这个操作系统上&#xff0c;人与AI之间的交互用的是人的语言&#xff0c;不再是冷冰冰的机器语言&#xff0c;或者高级机器语言&#xff0c;当然&#xff0c;在未来的十来年内&#xff0c;机器语…

喜讯!云起无垠入选《嘶吼2024网络安全产业图谱》

近日&#xff0c;嘶吼安全产业研究院正式发布了《嘶吼2024网络安全产业图谱》&#xff0c;旨在全面展示网络安全产业的构成及其重要组成部分&#xff0c;探索网络安全产业的竞争格局和发展前景。云起无垠凭借技术创新和行业影响力荣膺入选&#xff0c;证明了公司在网络安全领域…

经纬恒润与奇瑞汽车签订新能源项目重点供应商合作协议,共同开启合作新篇章

近日&#xff0c;2024年国家级芜湖经开区汽车零部件生态大会成功举行&#xff0c;经纬恒润受邀出席&#xff0c;与行业各伙伴齐聚经开区&#xff0c;同绘发展蓝图&#xff0c;助力经开区汽车产业高质量发展。会上&#xff0c;经纬恒润与奇瑞汽车签署合作协议&#xff0c;成为奇…