0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

华为推出RN/H5多设备自适应组件库

HarmonyOS开发者 来源:HarmonyOS开发者技术 2025-01-16 14:46 207次阅读

在原生鸿蒙应用开发中,华为针对ArkUI框架推出了一整套针对多设备适配的完善能力(如“一多”能力)以及高阶组件(如分栏、边看边评等),帮助开发者轻松实现“一次开发,多端部署”。然而,当前鸿蒙生态仍存在大量用跨平台框架开发的应用,部分页面采用React Native(RN)和H5等框架开发,这些框架在系统级的多设备适配能力上相对有限,导致在折叠机、平板等设备上的适配效率不如ArkUI框架高效,从而影响了应用在不同设备上的体验一致性。

为了解决这一问题,华为2D场景化解决方案团队面向RN/H5多设备适配场景,推出了一系列自适应组件库、sample等开发者场景化解决方案。该方案在RN、H5等框架上提供了接近原生多设备适配的断点机制和高阶UI组件库,帮助RN、H5应用的开发者更高效地进行多设备适配,为折叠屏、平板等多种设备的消费者带来精心打磨的精致体验。

针对基于H5框架的开发者,华为提供了包括断点能力封装和H5多设备组件在内的多设备适配方案。其中断点能力封装可根据屏幕尺寸将屏幕类型分为xs、sm、md、lg、xl、xxl六种,开发者可以通过预置的断点hook,根据不同屏幕类型调整页面内容。H5多设备组件则包括类挪移布局组件、页签栏组件、网格自适应布局组件等。这些组件采用Web Component技术开发,能够快速适配到Vue2、Vue3、React等多种Web框架,帮助开发者高效实现多设备布局适配。

针对RN框架的开发者,华为不仅提供了断点能力封装,还带来了针对折叠屏的自适应高阶组件以及获取折叠屏折痕区域、折叠状态、设备是否可折叠等API接口,使开发者能够高效应对各种设备的布局适配需求。

RN/H5多设备/自适应组件库的推出,对鸿蒙原生应用开发意义重大。首先,它解决了鸿蒙原生应用在混合开发页面上多设备体验割裂的问题。有了这些组件库,无论是原生页面还是基于RN和H5等用跨平台框架的混合开发页面,开发者都可以通过它高效实现一致的多设备响应式体验,从而开发出更精致的、适配多设备的鸿蒙原生应用。

其次,通过预置的断点机制和自适应组件,开发者无需从头编写复杂的多设备适配代码,大大减少了开发成本和学习成本,尤其是在适配折叠屏、平板等多种设备时,开发者可以更加高效地完成布局调整。

目前这两款组件库都已开源到开源鸿蒙社区(OpenHarmony社区)并上线Gitee平台,欢迎广大开发者到Gitee平台或开源鸿蒙社区直接搜索rn_multidevice_layout_scenepkg(RN多设备组件库)和web_adaptive_ui(H5多设备组件库)下载使用。

未来华为将持续不断优化和扩展组件库的能力,欢迎广大开发者参与共建并提出需求和建议,共同推动鸿蒙生态的繁荣发展!

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 华为
    +关注

    关注

    216

    文章

    34530

    浏览量

    252749
  • 开发者
    +关注

    关注

    1

    文章

    590

    浏览量

    17074
  • 鸿蒙
    +关注

    关注

    57

    文章

    2392

    浏览量

    42998

原文标题:RN/H5多设备自适应组件库来了,高效实现鸿蒙原生应用多设备精致体验

文章出处:【微信号:HarmonyOS_Dev,微信公众号:HarmonyOS开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    相关推荐

    基于自适应优化的高速交叉矩阵设计

    提出了一种基于自适应优化的交叉矩阵传输设计,采用AHB协议并引入自适应突发传输调整和自适应优先级调整的创新机制。通过动态调整突发传输的长度和优先级分配,实现了对数据流的有效管理,提升了系统的带宽
    的头像 发表于 01-18 10:24 110次阅读

    华为云 Flexus 云服务器 X 实例搭建部署 H5 美妆护肤分销商城、前端 uniapp

    准备国庆之际,客户要搭个 H5 商城系统,这系统好不容易开发好啦,就差选个合适的服务器上线。那可真是挑花了眼,不知道哪款性价比高呀!就像在琳琅满目的选择前。最终慧眼识珠,选择了华为云 Flexus
    的头像 发表于 12-30 14:53 93次阅读
    <b class='flag-5'>华为</b>云 Flexus 云服务器 X 实例搭建部署 <b class='flag-5'>H5</b> 美妆护肤分销商城、前端 uniapp

    空间光调制器自适应激光光束整形

    调制器(SLM)在控制和调制激光方面具有无限的可能: 自适应光学 超分辨显微镜 光镊 激光材料处理 量子光学 SLM光束整形: 将一个高斯光束转换成高帽轮廓 VirtualLab
    发表于 12-12 10:33

    步进电机如何自适应控制?步进电机如何细分驱动控制?

    步进电机是一种将电脉冲信号转换为角位移或线位移的电机,广泛应用于各种自动化控制系统中。为了提高步进电机的性能,自适应控制和细分驱动控制是两种重要的技术手段。 一、步进电机的自适应控制 自适应控制
    的头像 发表于 10-23 10:04 740次阅读

    AMD Versal自适应SoC CPM5 QDMA的Tandem PCIe启动流程介绍

    本文将从硬件设计和驱动使用两个方面介绍基于 CPM5 QDMA 的 AMD Versal 自适应 SoC 的 Tandem 设计和启动流程。
    的头像 发表于 09-18 10:07 640次阅读
    AMD Versal<b class='flag-5'>自适应</b>SoC CPM<b class='flag-5'>5</b> QDMA的Tandem PCIe启动流程介绍

    第二代AMD Versal Prime系列自适应SoC的亮点

    Versal Prime 系列自适应 SoC 在视频相关指标中提供了至高 2 倍的性能1,充分释放创造力,是打造通道 4K 和 8K 内容捕获、制作和分发设备的理想芯片平台。
    的头像 发表于 09-14 15:32 485次阅读
    第二代AMD Versal Prime系列<b class='flag-5'>自适应</b>SoC的亮点

    如何在自己的固件中增加wifi自适应性相关功能,以通过wifi自适应认证测试?

    目前官方提供了自适应测试固件 ESP_Adaptivity_v2.0_26M_20160322.bin 用于进行 wifi 自适应认证测试. 请问如何在自己的固件中增加 wifi 自适应性相关功能,以通过 wifi
    发表于 07-12 08:29

    鸿蒙OS开发:【一次开发,多端部署】(设备自适应能力)简单介绍

    本示例是《一次开发,多端部署》的配套示例代码,展示了[页面开发的一多能力],包括自适应布局、响应式布局、典型布局场景以及资源文件使用。
    的头像 发表于 05-21 14:59 2547次阅读
    鸿蒙OS开发:【一次开发,多端部署】(<b class='flag-5'>多</b><b class='flag-5'>设备</b><b class='flag-5'>自适应</b>能力)简单介绍

    鸿蒙OS开发:【一次开发,多端部署】(设备自适应能力)实例

    此Demo展示在JS中的设备自适应能力,包括资源限定词、原子布局和响应式布局。
    的头像 发表于 05-20 18:27 1422次阅读
    鸿蒙OS开发:【一次开发,多端部署】(<b class='flag-5'>多</b><b class='flag-5'>设备</b><b class='flag-5'>自适应</b>能力)实例

    HarmonyOS开发案例:【Web组件实现抽奖】

    基于ArkTS的声明式开发范式的样例,主要介绍了Web组件如何加载本地和云端H5小程序。
    的头像 发表于 05-09 18:31 1424次阅读
    HarmonyOS开发案例:【Web<b class='flag-5'>组件</b>实现抽奖】

    鸿蒙OS实战开发:【设备自适应服务卡片】

    服务卡片的布局和使用,其中卡片内容显示使用了一次开发,多端部署的能力实现设备自适应。 用到了卡片扩展模块接口,[@ohos.app.form.FormExtensionAbility
    的头像 发表于 04-09 09:20 920次阅读
    鸿蒙OS实战开发:【<b class='flag-5'>多</b><b class='flag-5'>设备</b><b class='flag-5'>自适应</b>服务卡片】

    华为模数据 GeminiDB 架构与应用实践直播问答实录

    模数据作为一种新兴的数据管理解决方案,正在受到越来越多的关注。而华为模数据 GeminiDB 基于云原生数据
    的头像 发表于 04-08 18:25 1199次阅读

    什么是自适应光学?自适应光学原理与方法的发展

    目前,世界上大型的望远镜系统都采用了自适应光学技术,自适应光学的出现为补偿动态波前扰动,提高光波质量提供了新的研究方向。 60多年来,自适应光学技术获得蓬勃发展,现已应用于天文学、空间光学、激光、生物医学等领域。
    发表于 03-11 10:27 2254次阅读

    STM32CubeMX的H5的ThreadX例程在哪里找?

    在STM32CubeMX的Software Packs Component Selector中没有找到H5的ThreadX例程,哪位小伙伴知道在哪里可以下载到H5上移植ThreadX的相关例程?
    发表于 03-08 06:31

    CX3是如何从接收到的MIPI传感器信号中重建测试点信号(H8、G6、H5)的?

    请问一下 CX3是如何从接收到的 MIPI 传感器信号中重建测试点信号(H8、G6、H5)的? 我的假设是 H8 将使用配置的 PCLK 持续计时(例如 72MHz)和以下内容(例如 VSYNC
    发表于 02-23 07:57