ReactNative之基于引用共享組件開發實踐

黃磊 盧方偉 肖偉

摘? ? 要：React原生組件機制，并提出基于ReactNative跨平臺組件開發規范的，將組件映射到相同的原生引用對象，實現同地址的組件的共享。

關鍵詞：共享組件;ReactNatve;狀態管理;混合開發;組件引用;跨平臺

引言

隨著移動互聯網的快速發展，尤其是智能手機設備硬件的更新換代，用戶的體驗和層次的魚龍混雜，讓手機端開發者和平臺大大增加了開發成本。實現同樣的功能，因此保證開發成本和體驗的一致性變成了一個核心點，本文著重講述基于ReactNative跨平臺基礎上，解決多個組件之間的內存共享問題，從根本上提升App體驗。

一 RN介紹

React Native（以下簡稱RN）是由Facebook公司2015年推出的開源的跨平臺移動應用開發框架，可以實現基于JS開發應用，并可同時運行于IOS端和安卓端兩大主流的手機操作系統，真正實現了一次編碼，多平臺運行，RN最終編譯成的是一個真正的移動應用。RN所使用的基礎UI組件和原生是完全一致，JS在其中的作用就是跟原生UI關聯起來，從而生產出整個App的業務邏輯。

二 組件原理

RN框架主要分三層，原生層、通信層、業務層，原生層主要提供了UI渲染器控制器以及一些其他的基礎功能庫，均被封裝成RN模塊、注冊、橋等。通信層主要執行原生與JS的通信工作。業務層主要實現的是跟業務相關的組件和工具庫使用，通過JS編寫的虛擬Dom來構建模塊和組件，虛擬Dom是內存中的一種輕量級表現形式，可以通過不同的渲染引擎生成具有一致性的UI。并且借助React的狀態管理特性，對原生UI的屬性和邏輯進行更新。

三 組件共享原理

RN組件分為JS組件和原生組件，普通的RN組件并沒有存在組件共享問題，但由于RN的組件的狀態管理都有UI控制器控制器管理，原生的布局控制已經完全被接管，所以原則上是不能通過原生方法去改變組件的布局，所有的邏輯都要在JS端完成。目前開放的所有RN組件并沒有提供真正的Native共享功能，現有的開發者開源的共享組件方案也并非是真實組件共享，只是基于同一個虛擬Dom的原生組件復制，映射到內存地址是完全不同的兩個Native對象，并非真正意義上的同一個對象，也可以說是同引用（內存中同一地址）。

四 共享組件實現

在RN框架基礎上，遵循RN的組件開發規范，我們將創建一個原生組件，這個原生組件既是源組件也是鏡像組件。這個組件具有兩個特殊屬性源標記和目標標記，在觸發共享時這兩個標記要必須相同，它們是共享的一個橋梁。在Native端有一個臨時的存儲對象，當觸發共享時，源組件對象會被臨時存儲到存儲中，當鏡像組件開始渲染時會將源組件對象從存儲中取出，并且放置到鏡像組件中作為子組件。雖然作為鏡像組件的子組件，它的狀態管理卻不能被鏡像組件所接管，它還是由源組件所控制，所以要通過鏡像組件的狀態管理通過JS再傳給源組件，源組件去動態更改源組件對象的狀態和尺寸。

我們將創建3個原生類文件，分別是模塊管理、組件管理器、原生組件，兩個JS的React原生組件（源組件和鏡像組件），模塊管理主要負責擴展RN組件或者模塊的控制管理，組件管理是對Native和JS端的屬性、方法、通信、事件等統一管理，原生組件則是基于RN組件的原生View。模塊管理主要用于RN擴展庫管理，組件管理器會創建真實的View實例，組件類主要用于組件的實體UI部分，其中會處理原生組件的具體功能，包含組件對象掛起以及放置。JS端當源組件設置源的時候，即將源組件的視圖置為掛起狀態，原生組件則體現為將View臨時存儲到存儲中。當鏡像組件尺寸需要發生變化時，能夠同步尺寸給源組件，然后通過源的控制器去控制View的尺寸變化。

五 組件使用

基于RN的三方視頻組件并不能很好的支持全屏，或者說不能自定義全屏，在自定義播放器UI后，全屏模式并不能展示我自定義的UI組件，例如控制進度條、彈幕、分享、評論等。再如WebView早期的版本并沒有全屏的支持，IOS本身目前版本也沒有支持，利用共享組件就可以創建一個全屏鏡像組件，就將WebView共享為全屏狀態。而且在鏡像組件中我們可以處理屏幕旋轉，以及組件位置的更換。

源組件實現代碼部分，點擊掛起源組件，在執行掛起操作的同時生成一個唯一的源，可將這個唯一的源攜帶到任何一個組件作為源。當鏡像組件渲染時源組件的View就會自動將源組件的View添加作為子View展示出來，當鏡像組件釋放時會觸發Native共享組件的釋放，同時會將鏡像原生組件的子View重新恢復到源組件中，這樣就同步了RN的生命周期。

六 結論

RN現在是最火的跨平臺框架之一，但是還是有很多未解決的問題。這就是這篇文章的價值所在。以上就是基于引用的共享組件實現過程，我們已經將這個共享組件實際應用于項目中。基于引用的共享組件簡單但是不平凡，它的作用大大的超過了代碼量本身，它是滄海一粟但是卻是眾多組件的一個亮點。

參考文獻：

[1]焦鋒.react native在app開發中的應用研究[J].數字技術與應用，2017（06）：109.

[2]嚴新巧.基于移動開發現狀探討React Native[J].電腦知識與技術，2016，12（32）：76-77+82.

[3]周雪.現代跨平臺開發技術在移動終端層面的應用.現代工業經濟和信息化，2019，9（1）：73-74.

[4]趙林靜.跨平臺移動應用開發的優勢與不足.信息與電腦，2018（9）：123-124.

[5]張龍，張晗.跨平臺響應式前端框架技術的研究與應用.電子設計工程，2018，26（22）：6-9.

[6]王欣，曲萍.移動互聯網混合開發技術的方向.科技資訊，2018，16（1）：8-8.