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

在原生鸿蒙应用开发中，华为针对 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 多设备组件库）下载使用。未来华为将持续不断优化和扩展组件库的能力，欢迎广大开发者参与共建并提出需求和建议，共同推动鸿蒙生态的繁荣发展！

组件库链接：

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

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