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

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

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

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

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

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

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

組件庫鏈接：

RN多設(shè)備適配：https://gitee.com/openharmony-sig/rn_multidevice_layout_scenepkg

H5多設(shè)備適配：https://gitee.com/openharmony-sig/web_adaptive_ui