一種跨平臺移動APP開發React Native方法的實現

陳磊

（WalmartLabs 加利福尼亞州森尼維爾市 94086）

React Native 的思路就是在不同平臺下使用平臺自帶的UI 軟組件。它的優點是性能體驗高于Hybrid，不遜色于原生，這種模式和Hybrid 有極大的差異。Hybrid 的view 層實際上是dom，但這種模式的view 層是虛擬dom，所以性能高于Hybrid，這種模式是由JS編寫而成的，它有獨特的語法，所以只需要一次學習就可以同時開發Android 和iso，這個模式是由Facebook 統一發起的，所以在一個統一社區內有較好的資源。但是它也存在著無可避免的一些缺點，是不同平臺代碼有所區別，這種模式實際上還是來源于JS 的寫原生，所以android 和ios 中的原生代碼會有所區別，對開發技術人員有一定的要求。

1 跨平臺開發的概念

跨平臺主要是為了解決不同操作系統間軟件轉移的問題，簡單理解就是一個虛擬的技能能夠解決同一段代碼在不同平臺的運行效果。但是移動平臺計算資源緊張，所以直接應用Java 和web 到移動平臺是不可行的，Hybrid 這種方法被提出，這它是利用本地軟件框架來運行遠程web 內容，在應用的過程中，它能夠對本地資源進行訪問，但是這種方法的執行效率很低，在切合本地程序具有差異性等諸多原因造成了開發的效率很低。因此利用這種方法無法有效保障跨平臺開發的有效進行。另外一種借助編程語言編程生成不同平臺程序的方法有效地解決了跨平臺問題。這種方式在解決跨平臺問題中非常有利，在使用過程中會增加一些輔助程序，但是它的執行效率和本地原生的程序是一樣的。通用編程語言編程生成不同平臺本地程序的方法中，最有效的方法就是React Native。

2 React Native的技術的優缺點

React native 技術的優勢就是調試簡單，IPA 安裝好后不需要再進行過度的翻譯，只需要reload，就可以在云服務器下載JS 代碼，呈現改變代碼之后的效果。在調試的時候非常方便，修改代碼之后，保存頁面就會跟隨著修改的結果進行變化。它的CSS—layout 布局降低了學習成本，減少了代碼量，但是ios 或android 開發者在剛接觸的時候需要做出一些改變來適應這種技術變化。跨平臺無論是android 或是ios 系統編寫出一套代碼就能夠在不同平臺上進行應用，有Facebook 作為強大資源支撐在未來，有強勁的發展前景。

圖1：React Native 架構圖

圖2：React Native 程序通信機制

但是React native 存在著一些不足，由于是腳本的語言，雖然有諸多優點，但調試起來非常的不便捷，不容易查錯。在官網上對文檔的介紹非常粗糙，缺乏對細節的描述，如果遇到了難以解決的問題，無法找到對應的解決方法。它的升級非常困難，比如將React native 從0.42 版本升到最近的0.5 版本，就需要全部更新，然后對相關的控件進行升級，統一調整，這樣會花費大量的精力。

3 React Native方法的說明

3.1 React Native的介紹

這種利用React Native 來進行移動跨平臺開發的方法，是在2015年由Facebook 公司推出的程序庫。在當前的web UI 領域取得了巨大的成就，主要是符合當前創新化的發展背景，改變了人們對傳統移動開發平臺的印象。React Native 的實例說明，它已經在多項平臺中得到了應用。在這個過程中，涉及到了JSX，JS 語言中結合了HTML 和CSS 元素，這種被擴展的Javascript 語言就被稱為是JSX 語法。javascript 內存中維護了一個Virtual DOM，與真實顯示DOM 保持相對應關系，當界面發生變化時，由于效率極高的DOM 算法就避免重新繪制。同時在使用過程中，組件也可以用好幾種方式表明，可以是一個包含render 方法的類，也可以是一個簡單的函數，通過屬性Props 和狀態state 傳遞數據。同時只要更新組件state，然后根據state 重新渲染用戶界面，就不用再次操作DOM，Props 是不可改變的，子組件只能通過props 傳遞數據。React Native 的安裝和運行有特殊的環境：node （version>10）；brew install node；Watchman ；brew install watchman；react-natviecli ；npm install -g yarn react-native-cli。在react native 使用過程中，只有滿足以上的運行或安裝特殊環境要求，才能夠有效地進行使用。

3.2 Javascript編程語言

它作為一種高級解釋型的編程語言，是以原型和函數先行的語言支持面向對象編程命令式編程及函數式編程。常用的庫有jQuery、JSer、dojo、prototype 等。Javascript 是React Native 的編程語言，這種語言簡單易學，它是在外部初期就已經存在的一種腳本語言。但是在開始的時候，只是作為一種web 動態化的輔助性語言而使用的。但是javascript 最大的特點就是發展，它能在普通中迸發出創造力。在21世紀初期，Ajax 概念被提出，這種編程方式讓人們發現了網頁編程還有如此創新的方法。當前非常多的創新化編程概念都能在javascript 中得到體現，Javascript 發展到當今時代，已經在計算機的諸多領域進行了應用，成為當前最受歡迎的編程語言之一。

3.3 React Native構架以及優化

React Native 利用各移動平臺自身優勢完成了跨平臺開發，避免了重復制造的情況出現。主要構架如圖一所示。APP 程序可以通過React 訪問React Native，然后通過javascript 運行庫移動操作不同的程序。當程序運行的過程中，可以對不同的渠道靈活選擇，滿足程序要求。它之所以能夠操作Android 的和ISO 程序，主要是由于利用中間橋javascript 溝通，完成它們之間的交互，中間橋作為一個有效的溝通渠道，實現了本地語言和javascript 之間的溝通。如圖2所示，通過中間橋，本地語言Java object—c 和javascript 之間可以實現一個互動。

現有的架構它存在一些局限性，例如不能將javascript 的邏輯直接和許多需要同步的Never API 集成，也無法讓React Native 應用調用native 實現函數，還存在著不必要的復制。對React native構架的優化，需要對每一層進行相應的調試優化，React 層增強javascript 安全，javascript 層引入JSI 能夠讓它替換不同的javascript引擎，Bridge 層劃分為Fabric and toTurboModules 部分，分別對于UI 渲染和Native 模塊。Native 層精簡核心模塊，將非核心獨立作為社區進行更新維護。

4 系統實現說明

React Native 的編程語言采用的是javascript 擴展版本的JSX，所以它的程序采取JS 為命名。利用render 函數生成相關界面，用state 維護界面，同時在不同模塊之間輸出的語句能夠進行重復使用。在這個過程中，所涉及到的內容主要通過系統在android 中的實現效果進行相關的分析研究。準備工作在系統啟動前要全部做好，如下裝好代碼：

The first step : _Load resource synchronous = asynchronous()=>{

Then: Promise of return.all([

Furthermore: Asset.Load asynchrony

Next: require('./assets/images/mail1.png'),

Then: Same code as last step

The sixth step: Font.loadAsync

The seventh step: Ionicons.font,

The eighth step : {'space-mono':require('./assets/fonts/

SpaceMono-Regular.ttf') },

The last step: ]),]); };

通過以上的異步裝入代碼，能夠看到這主要利用EXPO 的ASSET 模塊，提高后續程序的訪問效率。在完成該步驟的相關工作之后，要進一步的進入到切入界面，建立導航器進行后續的界面切換工作，在這個過程中所需要進行的代碼如下圖所示:

The first step: export const RootStackNavigator=StackNavigat

or(

Then: {Lg:{screen:LgScreen,},

Furthermore: PageFace:{screen:PageFace,},

Next: Settings:{screen:SettingsScreen,},

Eventually: }

在以上代碼中，有Lg，PageFace ，Settings，三大項導航器，這分別指向了三個界面，這三大項的導航器也只入了三個界面，操作程序只需要簡單敲好代碼即可。

5 結束語

React native 可以多平臺共用，像網頁一樣隨時更新，隨時發布。受到了諸多公司和開發人員的推崇，它能夠提高程序開發的工作效率，又能幫助公司有效縮小成本，這會成為一個優秀的框架在未來的軟件開發中。這種程序能夠被有效應用，一次編寫就能夠在多個移動平臺進行應用，最重要的是它的運行效率和本地程序完全相同。在這些優點下。利用React native 跨平臺移動APP 開發方法節省了開發的人力時間成本，能夠在當前社會得到廣泛的應用。