一種跨平臺(tái)移動(dòng)APP開發(fā)方法的研究及實(shí)現(xiàn)

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

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

關(guān)鍵詞：跨平臺(tái)；移動(dòng)APP開發(fā)；React Native

中圖分類號(hào)：TP399 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

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

2 跨平臺(tái)開發(fā)（Cross-Platform development）

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

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

3 React Native方法（The react native method）

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

3.1 JavaScript

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

3.2 React Native架構(gòu)

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

4 系統(tǒng)實(shí)現(xiàn)（System implementation）

React Native的編程語言采用的是JavaScript的擴(kuò)展版本JSX，且目前官方支持JavaScript的標(biāo)準(zhǔn)ES6。其程序以“.js”為擴(kuò)展名，各模塊間用輸入（import）、輸出（export）語句進(jìn)行代碼復(fù)用，內(nèi)部建立頁面的虛擬DOM，用State進(jìn)行維護(hù)，并用render（）函數(shù)生成界面。下面以登錄模塊為例來看一下系統(tǒng)在安卓上的實(shí)現(xiàn)效果。

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

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模塊來進(jìn)行異步裝入以提高后續(xù)程序訪問資源的效率。

進(jìn)入切入頁面后需要建立導(dǎo)航器（Navigator）以進(jìn)行后續(xù)頁面切換。代碼如下：

01： export const RootStackNavigator=StackNavigator（

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

03： PageFace：{screen：PageFace，}， //內(nèi)容頁

04： Settings：{screen：SettingsScreen，}， //設(shè)置頁

05： }

代碼中建立的導(dǎo)航器共有三項(xiàng)，分別是Lg、PageFace、Settings，分別指向三個(gè)頁面。在程序中需要切換頁面時(shí)只需使用如下代碼即可：

this.props.navigation.navigate（'目標(biāo)頁面'）

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

圖3 登錄界面及對(duì)應(yīng)代碼

Fig.3 Login screenshot and code

5 結(jié)論（Conclusion）

使用React Native進(jìn)行移動(dòng)平臺(tái)跨平臺(tái)APP開發(fā)，可以用簡單、高效、用戶廣的JavaScript語言編寫程序，一次編寫可生成多種主流移動(dòng)平臺(tái)程序。生成的程序直接調(diào)用本地組件，其效率在理論上與本地程序基本一樣。這樣不但大大節(jié)省了系統(tǒng)開發(fā)的時(shí)間和人力、物力，進(jìn)而減小開發(fā)成本，而且開發(fā)出來的程序執(zhí)行效率高，是一種有效和高效的移動(dòng)平臺(tái)APP開發(fā)方法。

參考文獻(xiàn)（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-），男，博士，講師.研究領(lǐng)域：網(wǎng)絡(luò)安全，軟件開發(fā)，智能算法.

杜 梅（1977-），女，博士，講師.研究領(lǐng)域：軟件開發(fā)，數(shù)字圖像處理.

沈忠起（1997-），男，本科生.研究領(lǐng)域：軟件開發(fā).

楊彬彬（1993-），男，本科生.研究領(lǐng)域：軟件開發(fā).