一種跨平臺移動APP開發方法的研究及實現

曹蔚然++杜梅++沈忠起++楊彬彬

摘 要：本文針對移動平臺APP開發需同時兼顧多種平臺的現狀，對一種跨平臺移動APP開發方法——React Native方法進行了初步研究。文章介紹了該方法提出的背景、解決問題的思路、用到的編程語言和程序庫的軟件架構，指出了該方法的巧妙之處、優越性，以及所用語言的發展趨勢，最后給出了用該方法實現的跨平臺移動APP系統的一個模塊實例，并結合模塊程序代碼和界面講解了該方法實現的一些細節。系統的實現證明了這種跨平臺移動APP開發方法的有效性和實用性。

關鍵詞：跨平臺；移動APP開發；React Native

中圖分類號：TP399 文獻標識碼：A

1 引言（Introduction）

當今移動平臺APP開發炙手可熱，而且溫度還在不斷攀升。在安卓成為世界第一大移動平臺后，主流的移動平臺儼然成為安卓和蘋果的天下。安卓平臺用戶人數眾多，市場巨大，但其免費政策使得盈利成為一個值得思考的問題；蘋果平臺使用者在世界范圍內人數雖少，但在美英等發達國家卻反超安卓，同時其收費政策使得其使用者大多“不差錢兒”，所以盈利又似乎是唾手可得的事情。選安卓還是選蘋果是擺在每一個移動平臺開發團隊面前的兩難選擇，更別說還有其他的移動平臺，如微軟的Windows Phone。兩大主流移動平臺API大相徑庭，學習曲線都較陡峭，同時各平臺API更新換代頻繁，新技術、新問題層出不窮，所以想同時開發兩個平臺的軟件就得維護兩支開發隊伍，這種“事倍功半”的“奢侈”開發方式并不是一般規模的開發團隊能承受得了的事情。于是尋找一種能有效節省人力、物力的跨平臺APP開發方法成為移動平臺APP開發中一個值得探索的問題。

2 跨平臺開發（Cross-Platform development）

跨平臺的概念由來已久。當年，為了解決不同操作系統間軟件移植的問題，Java提出了JVM的概念。一個虛擬機很好地解決了同一段代碼在不同平臺上運行出相同效果的問題。然而虛擬機是有代價的，即效率。虛擬機需要解釋中間代碼來運行軟件。相比于機器碼直接運行，這種解釋運行效率要低很多，顯現出來就是軟件運行反應慢[1]。這種效率的降低同樣體現在以HTML為核心的Web上。Web也是跨平臺的，但執行效率與本地程序相比不可同日而語，而且Web訪問本地資源有著安全上的先天制約[2]。

移動平臺計算資源緊張，這些問題顯得更為突出，所以直接應用Java和Web到移動平臺是不行的。于是一個變通的被稱為混合（Hybrid）的方法被提出。該方法是通過本地的一個軟件框架來運行遠程Web內容并加以交互以達到訪問本地資源的目的。但這種方法與本地程序相比，首先是執行效率低的問題，其次是用戶界面重復開發且與本地程序不易一致的問題[3]。另一種方法是通過使用一種通用的編程語言進行編程，然后生成不同移動平臺的本地程序的辦法來解決跨平臺的問題[4]。這種方法有很大的優勢。首先，雖然會增加少量輔助程序，但因為生成的是本地程序，其執行效率總體來說與本地原生程序一樣；其次，由于其使用的是本地的UI，所以界面與本地原生程序完全一致。這種方法中React Native是最早提出也是目前最好的解決方案[5，6]。

3 React Native方法（The react native method）

React Native是應用React Native來進行移動跨平臺開發的方法。React Native是由Facebook公司在2015年推出的一組程序庫，用以把其JavaScript庫React引入主流移動平臺的開發中。這之前其React庫已經在Web UI領域取得相當大的成功。React Native的推出改變了人們對移動平臺開發的固有觀念，為移動跨平臺開發注入了新的活力[5]。

3.1 JavaScript

React Native主要使用JavaScript語言進行編程。JavaScript語言是一種在Web初期就已經存在的腳本語言。它簡單易學，功能強大，早期便吸引了大量使用者。但由于最初其僅是作為一種Web動態化的輔助語言出現，因此使用者雖然多，但大多是業余程序員或其他行業的愛好者，并沒有引起多少專業程序員的重視。然而，JavaScript神奇的地方在于其發展，總是能平凡中出神奇，一直處在計算機語言發展的潮頭浪尖。2005年，Ajax概念被提出。這種神奇的編程方式在當年立即就刷爆了大眾的眼球，讓人們知道原來網頁編程還可以這樣做。這之后其發展可謂一發而不可收，不但不斷涌現出各種神奇的框架和程序庫，其語言本身也發展迅速，許多最新的編程理念都能在JavaScript中得以體現。時至今日，JavaScript已發展到計算機的許多領域，不但能做其他編程語言能做的事，而且還通常做得更好，其跟隨者中專業程序員大量增加，編出的各種應用、框架及庫的質量越來越高，儼然已成為最受歡迎的編程語言之一。JavaScript能取得今天的成績和許多因素有關，但讓其走出網頁走向更多領域卻與一個項目有著直接的關系，即V8項目。V8項目是一個JavaScript引擎項目，它能讓JavaScript以接近甚至等于本地程序的效率得以執行，這直接擴大了JavaScript的應用范圍并產生了絕對的競爭力。以此為基礎加之Node.js的出現直接促進了React Native的產生[7]。

3.2 React Native架構

React Native抓住當前移動平臺開發的特點，很巧妙地利用各移動平臺自身的優勢來完成跨平臺開發任務，避免了“重復制造輪子”。其程序架構情況如圖1所示。APP程序一般通過React來訪問React Native，然后通過JavaScript運行時庫來訪問底層移動操作系統以達到調用本地組件運行的目的[8]。當然程序的運行還有多種渠道可靈活選擇，以滿足豐富的程序要求。這一過程中APP首先要運行本地系統支持的語言（在安卓中是Java，在蘋果中則是Object-C），然后本地語言通過中間橋與JavaScript容器通信，最終完成與JavaScript的交互，如圖2所示。endprint

4 系統實現（System implementation）

React Native的編程語言采用的是JavaScript的擴展版本JSX，且目前官方支持JavaScript的標準ES6。其程序以“.js”為擴展名，各模塊間用輸入（import）、輸出（export）語句進行代碼復用，內部建立頁面的虛擬DOM，用State進行維護，并用render（）函數生成界面。下面以登錄模塊為例來看一下系統在安卓上的實現效果。

登錄模塊涉及了React Native界面裝入、控件顯示及界面切換的方法。系統啟動時，從根目錄的App.js開始執行，在其中需要安排好系統啟動前的準備工作（如大圖片的異步裝入）并指定具體切入的界面位置。異步裝入代碼如下：

01： _loadResourcesAsync=async（）=>{

02： return Promise.all（[

03： Asset.loadAsync（[ //異步裝入圖片

04： require（'./assets/images/mail1.png'），

05： require（'./assets/images/lock1.png'）， ]），

06： Font.loadAsync（[ //異步裝入字體

07： Ionicons.font，

08： {'space-mono'：require（'./assets/fonts/SpaceMono-Regular.ttf'） }，

09： ]），]）； }；

代碼中使用了React Native庫expo的Asset模塊來進行異步裝入以提高后續程序訪問資源的效率。

進入切入頁面后需要建立導航器（Navigator）以進行后續頁面切換。代碼如下：

01： export const RootStackNavigator=StackNavigator（

02： {Lg：{screen：LgScreen，}， //登錄頁面

03： PageFace：{screen：PageFace，}， //內容頁

04： Settings：{screen：SettingsScreen，}， //設置頁

05： }

代碼中建立的導航器共有三項，分別是Lg、PageFace、Settings，分別指向三個頁面。在程序中需要切換頁面時只需使用如下代碼即可：

this.props.navigation.navigate（'目標頁面'）

登錄頁面及其對應代碼的一些情況如圖3所示。用戶名和密碼輸入框使用組件，密碼框需設定其secureTextEntry屬性為true，前方的圖標需用設置該行容器樣式為行布局的方式來進行固定。

圖3 登錄界面及對應代碼

Fig.3 Login screenshot and code

5 結論（Conclusion）

使用React Native進行移動平臺跨平臺APP開發，可以用簡單、高效、用戶廣的JavaScript語言編寫程序，一次編寫可生成多種主流移動平臺程序。生成的程序直接調用本地組件，其效率在理論上與本地程序基本一樣。這樣不但大大節省了系統開發的時間和人力、物力，進而減小開發成本，而且開發出來的程序執行效率高，是一種有效和高效的移動平臺APP開發方法。

參考文獻（References）

[1] Manson J，Pugh W，Adve S V.The java memory model[J].Acm Sigplan Notices，2005，40（1）：378-391.

[2] Grensing-Pophal L.HTML5[J].Econtent，2011，34（2）：10.

[3] Ghatol R，Patel Y.Beginning PhoneGap：Mobile web framework for JavaScript and HTML5[M].Apress，2012：1-16.

[4] Eisenman B.Writing cross-platform apps with react native[EB/OL].https：//www.infoq.com/articles/react-native-introduction，2016-02-25.

[5] Wikipedia.React（JavaScript library）[EB/OL].https：//en.wikipedia.org/wiki/React_（JavaScript_library），2017-09-28.

[6] Occhino T.React Native：Bringing modern web techniques to mobile[EB/OL].https：//code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile，2015-02-08.

[7] Wikipedia.JavaScript[EB/OL].https：//en.wikipedia.org/wiki/JavaScript，2017-09-26.

[8] Lakshmanan S.Introduction to React Native[EB/OL].https：//www.slideshare.net/sambhu7/introduction-to-react-native-71847255，2017-02-7.

作者簡介：

曹蔚然（1974-），男，博士，講師.研究領域：網絡安全，軟件開發，智能算法.

杜 梅（1977-），女，博士，講師.研究領域：軟件開發，數字圖像處理.

沈忠起（1997-），男，本科生.研究領域：軟件開發.

楊彬彬（1993-），男，本科生.研究領域：軟件開發.