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.mzph.cn/news/875739.shtml

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

相关文章

zookeeper开启SASL权限认证

目录 一、SASL介绍 二、使用 SASL 进行身份验证 2.1 服务器到服务器的身份验证 2.2 客户端到服务器身份验证 三、验证功能 一、SASL介绍 默认情况下,ZooKeeper 不使用任何形式的身份验证并允许匿名连接。但是,它支持 Java 身份验证与授权服务(JAAS)…

景联文科技入选艾瑞咨询《2024年中国AI基础数据服务产业图谱》

2024年7月,国内领先的数据服务提供商景联文科技,成功入选艾瑞咨询发布的《2024年中国AI基础数据服务产业图谱》,这一荣誉不仅是对景联文科技在AI数据服务领域卓越成就的认可,也是对公司在未来发展中持续引领行业创新的高度期待。 …

FastAPI(七十七)实战开发《在线课程学习系统》接口开发-- 课程编辑和查看评论

源码见:"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 课程编辑 先来看下课程编辑 1.判断是否登录 2.判断课程是否存在 3.是否有权限(只有自己可以修改自己的课程) 4.名称是否重复…

Docusaurus VS VuePress:哪一个更适合你的技术文档?

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Tensorflow2.0全套学习(持续更新中)

0 简介 1.学习目标 两大核心模块:深度学习经典算法与Tensorflow项目实战 从零开始,详细的网络模型架构与框架实现方法 2.tensorflow:核心开源库,深度学习框架,帮助开发和训练机器学习模型 3.版本2比1有哪些优势 …

数据库开发:MySQL基础(二)

MySQL基础(二) 一、表的关联关系 在关系型数据库中,表之间可以通过关联关系进行连接和查询。关联关系是指两个或多个表之间的关系,通过共享相同的列或键来建立连接。常见的关联关系有三种类型:一对多关系,…

2024年7月25日(Git gitlab以及分支管理 )

分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开 发人员之间进行协作。 Github 用的就是Git系统来管理它们的…

安卓嘀嗒清单v7.2.2.2高级版

软件介绍 TickTick是一款轻便高效的任务管理、日程管理(GTD)和时间管理应用,配备强大的记事和提醒功能。你可以在手机、平板、网页等多达11个平台上使用滴答清单记录大小事务、制定工作计划、整理购物清单、设置生日提醒,甚至安排…

DjangoRF实战-2-apps-users

1、用户模块 创建一个用户模块子应用,用来管理用户,和认证和授权。 1.1根目录创建apps, 为了使用方便,还需要再pycharm中设置一下资源路径,就可以自动提示 1.2注册子应用 1.3添加应用根目录到环境变量path python导…

AI绘画美女图如何带货? 分享最容易的起号方式,一定别错过!!

学习AI绘画最好的工具有两种。 一个是Midjourney,新手只需要知道提示词怎么写就可以了。 不懂得写,就直接去抄,去复制粘贴,AI绘画最值得鼓励的就是抄。 先学会抄,再考虑改,国外有很多设计师赚钱的方式就…

SpringBoot框架简单整合ShardingSphere-JDBC实现MySQL分库分表和读写分离及加密混合

1. 主从配置 1.1 主机1(IP:192.168.186.77) 1.1.1 docker-compose.yml version: 3.8services:mysql-master:image: mysql:latestcontainer_name: mysql-masterenvironment:MYSQL_ROOT_PASSWORD: 123456MYSQL_USER: masterMYSQL_PASSWORD: 123456MYSQL…

堆的基本实现

一、堆的概念 在提出堆的概念之前,首先要了解二叉树的基本概念 一颗二叉树是节点的有限集合,该集合: 1、或者为空; 2、或者由一个根节点加上两颗分别称为左子树和右子树的两颗子树构成; 堆就是一颗完全二叉树&…

【Python系列】isin用法

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

电脑屏幕录制软件哪个好?推荐3款,满足各种录制需求

大家好,今天和大家来聊一个既实用又有点神秘的话题——电脑屏幕录制软件哪个好?这是个让众多网友头疼的问题,毕竟谁不想拥有一款既好用又好玩的录制神器呢? 首先,我们得明确屏幕录制软件可不是简单地录屏而已&#xf…

VARIAN瓦里安真空Model 979 Leak Detector Instruction Manual使用说明

VARIAN瓦里安真空Model 979 Leak Detector Instruction Manual使用说明

杂项——电阻式角度传感器使用

三个引脚,分别接3.3V,GND,ADC引脚。12位ADC有4096份,将360分成4096份,再乘以单片机返回的模拟量的值,即可得到角度。 M0代码 #include "ti_msp_dl_config.h"volatile bool gCheckADC; volatile …

免费【2024】springboot 毕业生学历证明系统

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

【案例】使用React+redux实现一个Todomvc

About 大家好,我是且陶陶,今天跟大家分享一个redux的todoList案例,通过这个案例能够快速掌握redux的基本知识点🌹 ❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…❤️…

微信小程序之计算器

在日常生活中,计算器是人们广泛使用的工具,可以帮助我们快速且方便地计算金额、成本、利润等。下面将会讲解如何开发一个“计算器”微信小程序。 一、开发思路 1、界面和功能 “计算器”微信小程序的页面效果如图所示 在计算器中可以进行整数和小数的…

C++学习笔记——模板

学习视频 文章目录 模板的概念函数模板函数模板语法函数模板注意事项函数模板案例普通函数与函数模板的区别普通函数与函数模板的调用规则模板的局限性 类模板类模板与函数模板区别类模板中成员函数创建时机类模板对象做函数参数类模板与继承类模板成员函数类外实现类模板分文件…