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

2025-01-14 10:59:46     来源:

在原生鸿蒙应用开发中,华为针对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框架,帮助开发者高效实现多设备布局适配。

图片 1.png

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

图片 2.png

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

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

目前这两款组件库都已开源到开源鸿蒙社区(OpenHarmony社区)并上线Gitee平台,欢迎广大开发者到Gitee平台或开源鸿蒙社区直接搜索rn_multidevice_layout_scenepkg(RN多设备组件库)和web_adaptive_ui(H5多设备组件库)下载使用。未来华为将持续不断优化和扩展组件库的能力,欢迎广大开发者参与共建并提出需求和建议,共同推动鸿蒙生态的繁荣发展!

组件库链接:

RN多设备适配:https://gitee.com/openharmony-sig/rn_multidevice_layout_scenepkg

H5多设备适配:https://gitee.com/openharmony-sig/web_adaptive_ui

 

标签:

猜你喜欢

全球首个商用标杆,华为乾崑于深圳机场打造VPD泊车代驾商用试点
跳出医疗做大健康北京宣言峰会:擘画中医药创新新蓝图
三星CES 2025大放异彩 全面展示无处不在的AI魅力
海棠故事·院子泛娱乐发展座谈暨海棠幻夜品牌战略签约仪式圆满落幕
高梵暖冬行动启动 以微光大爱践行企业社会责任
双通道还分对称与非对称?它们之间有何差异
《2024快手年度数据报告》发布:生活“小题”值得大“作”,热点视频创作者达1900万
唐健——推动建筑机电工程管理创新的行业领航者
百子闹春探寻“超凡守护”,金领冠超凡宝宝童乐汇南宁站精彩开启
“雅器久成”名师名家紫砂雕刻展览会成功举办
伊利“金领冠珍护超凡宝宝童乐汇 百子闹春”乌鲁木齐站 萌趣启幕
危佳:电商领域的实践者,以创新推动行业发展
全球学子嘉游赣 登场南昌皆为英雄|同程旅行助力南昌文旅实力圈粉!
火山引擎上线鸿蒙原生智能美化解决方案 轻松提升图形视频美化体验
领航创新营销!新日再次斩获权威金奖,大展头部品牌担当
Eguoo清肺素——您的健康呼吸专家
30岁后换赛道遇AI挑战:学习为舵,营养为帆,共赴自我提升之旅
内容热度破8000、八榜登顶,爱奇艺综艺《一路繁花》开播爆火
上海虹口今雨荟璀璨启幕,焕新城市生活新体验
携手并肩再谱种业新篇 | 第四届三亚国际种业科学家大会暨2025国际种业科技博览会圆满闭幕
英雄永不谢幕,硕一凤凰U350打造钢铁侠主机
“共同发声 价值发现”资本市场高质量创新发展交流会暨同花顺2024年度评选颁奖典礼圆满落幕
五城联动,“骑”乐无穷!领克Z20联合Keep主题赛季骑行派对圆满收官
全球首个紫杉醇口服溶液正式供货,为晚期胃癌患者提供全新治疗选择
尚普咨询集团:品斛堂荣获尚普咨询系列品牌认证
“植之源”-人体清道夫新品发布会在洛阳举办
2025会客中国™城市集群力大湾区 合作交流会在深圳举行
2025中房研究院ICR年会暨社群主理人大会·购房者大会隆重举行
开新局、迎鸿运!微众企业+携手东鹏饮料为企业家定制专属“能量罐”,支持大消费产业惠民生增福祉
i百联2025年货节嗨购不停歇,“巳巳如意”迎新春