RN/H5多設(shè)備自適應(yīng)組件庫(kù)來(lái)了，高效實(shí)現(xiàn)鴻蒙原生應(yīng)用多設(shè)備精致體驗(yàn)

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

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

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

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

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

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

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