RN/H5多設備自適應組件庫來了，高效實現(xiàn)鴻蒙原生應用多設備精致體驗

在原生鴻蒙應用開發(fā)中，華為針對ArkUI框架推出了一整套針對多設備適配的完善能力（如“一多”能力）以及高階組件（如分欄、邊看邊評等），幫助開發(fā)者輕松實現(xiàn)“一次開發(fā)，多端部署”。然而，當前鴻蒙生態(tài)仍存在大量用跨平臺框架開發(fā)的應用，部分頁面采用React Native（RN）和H5等框架開發(fā)，這些框架在系統(tǒng)級的多設備適配能力上相對有限，導致在折疊機、平板等設備上的適配效率不如ArkUI框架高效，從而影響了應用在不同設備上的體驗一致性。

為了解決這一問題，華為2D場景化解決方案團隊面向RN/H5多設備適配場景，推出了一系列自適應組件庫、sample等開發(fā)者場景化解決方案。該方案在RN、H5等框架上提供了接近原生多設備適配的斷點機制和高階UI組件庫，幫助RN、H5應用的開發(fā)者更高效地進行多設備適配，為折疊屏、平板等多種設備的消費者帶來精心打磨的精致體驗。

針對基于H5框架的開發(fā)者，華為提供了包括斷點能力封裝和H5多設備組件在內(nèi)的多設備適配方案。其中斷點能力封裝可根據(jù)屏幕尺寸將屏幕類型分為xs、sm、md、lg、xl、xxl六種，開發(fā)者可以通過預置的斷點hook，根據(jù)不同屏幕類型調(diào)整頁面內(nèi)容。H5多設備組件則包括類挪移布局組件、頁簽欄組件、網(wǎng)格自適應布局組件等。這些組件采用Web Component技術開發(fā)，能夠快速適配到Vue2、Vue3、React等多種Web框架，幫助開發(fā)者高效實現(xiàn)多設備布局適配。

針對RN框架的開發(fā)者，華為不僅提供了斷點能力封裝，還帶來了針對折疊屏的自適應高階組件以及獲取折疊屏折痕區(qū)域、折疊狀態(tài)、設備是否可折疊等API接口，使開發(fā)者能夠高效應對各種設備的布局適配需求。

RN/H5多設備/自適應組件庫的推出，對鴻蒙原生應用開發(fā)意義重大。首先，它解決了鴻蒙原生應用在混合開發(fā)頁面上多設備體驗割裂的問題。有了這些組件庫，無論是原生頁面還是基于RN和H5等用跨平臺框架的混合開發(fā)頁面，開發(fā)者都可以通過它高效實現(xiàn)一致的多設備響應式體驗，從而開發(fā)出更精致的、適配多設備的鴻蒙原生應用。

其次，通過預置的斷點機制和自適應組件，開發(fā)者無需從頭編寫復雜的多設備適配代碼，大大減少了開發(fā)成本和學習成本，尤其是在適配折疊屏、平板等多種設備時，開發(fā)者可以更加高效地完成布局調(diào)整。

目前這兩款組件庫都已開源到開源鴻蒙社區(qū)（OpenHarmony社區(qū)）并上線Gitee平臺，歡迎廣大開發(fā)者到Gitee平臺或開源鴻蒙社區(qū)直接搜索rn_multidevice_layout_scenepkg（RN多設備組件庫）和web_adaptive_ui（H5多設備組件庫）下載使用。未來華為將持續(xù)不斷優(yōu)化和擴展組件庫的能力，歡迎廣大開發(fā)者參與共建并提出需求和建議，共同推動鴻蒙生態(tài)的繁榮發(fā)展！