技術(shù)報(bào)告一種跨平臺移動APP開發(fā)方法及實(shí)現(xiàn)

1、計(jì)劃類別 項(xiàng)目編號 項(xiàng)目技術(shù)報(bào)告課題名稱 項(xiàng)目主持人 承擔(dān)單位 題目：一種跨平臺移動APP開發(fā)方法的研究及實(shí)現(xiàn)本文針對移動平臺APP開發(fā)需同時兼顧多種平臺的現(xiàn)狀，對一種跨平臺移動APP開發(fā)方法React Native方法進(jìn)行了初步研究。文章介紹了該方法提出的背景、解決問題的思路、用到的編程語言和程序庫的軟件架構(gòu)，指出了該方法的巧妙之處、優(yōu)越性，以及所用語言的發(fā)展趨勢，最后給出了用該方法實(shí)現(xiàn)的跨平臺移動APP系統(tǒng)的一個模塊實(shí)例，并結(jié)合模塊程序代碼和界面講解了該方法實(shí)現(xiàn)的一些細(xì)節(jié)。系統(tǒng)的實(shí)現(xiàn)證明了這種跨平臺移動APP開發(fā)方法的有效性和實(shí)用性。關(guān)鍵詞：跨平臺；移動APP開發(fā)；React Native

2、1 引言（Introduction）當(dāng)今移動平臺APP開發(fā)炙手可熱，而且溫度還在不斷攀升。在安卓成為世界第一大移動平臺后，主流的移動平臺儼然成為安卓和蘋果的天下。安卓平臺用戶人數(shù)眾多，市場巨大，但其免費(fèi)政策使得盈利成為一個值得思考的問題；蘋果平臺使用者在世界范圍內(nèi)人數(shù)雖少，但在美英等發(fā)達(dá)國家卻反超安卓，同時其收費(fèi)政策使得其使用者大多“不差錢兒”，所以盈利又似乎是唾手可得的事情。選安卓還是選蘋果是擺在每一個移動平臺開發(fā)團(tuán)隊(duì)面前的兩難選擇，更別說還有其他的移動平臺，如微軟的Windows Phone。兩大主流移動平臺API大相徑庭，學(xué)習(xí)曲線都較陡峭，同時各平臺API更新?lián)Q代頻繁，新技術(shù)、新問題層出

3、不窮，所以想同時開發(fā)兩個平臺的軟件就得維護(hù)兩支開發(fā)隊(duì)伍，這種“事倍功半”的“奢侈”開發(fā)方式并不是一般規(guī)模的開發(fā)團(tuán)隊(duì)能承受得了的事情。于是尋找一種能有效節(jié)省人力、物力的跨平臺APP開發(fā)方法成為移動平臺APP開發(fā)中一個值得探索的問題。2 跨平臺開發(fā)（Cross-Platform development）跨平臺的概念由來已久。當(dāng)年，為了解決不同操作系統(tǒng)間軟件移植的問題，Java提出了JVM的概念。一個虛擬機(jī)很好地解決了同一段代碼在不同平臺上運(yùn)行出相同效果的問題。然而虛擬機(jī)是有代價(jià)的，即效率。虛擬機(jī)需要解釋中間代碼來運(yùn)行軟件。相比于機(jī)器碼直接運(yùn)行，這種解釋運(yùn)行效率要低很多，顯現(xiàn)出來就是軟件運(yùn)行反應(yīng)慢1

4、。這種效率的降低同樣體現(xiàn)在以HTML為核心的Web上。Web也是跨平臺的，但執(zhí)行效率與本地程序相比不可同日而語，而且Web訪問本地資源有著安全上的先天制約2。移動平臺計(jì)算資源緊張，這些問題顯得更為突出，所以直接應(yīng)用Java和Web到移動平臺是不行的。于是一個變通的被稱為混合（Hybrid）的方法被提出。該方法是通過本地的一個軟件框架來運(yùn)行遠(yuǎn)程Web內(nèi)容并加以交互以達(dá)到訪問本地資源的目的。但這種方法與本地程序相比，首先是執(zhí)行效率低的問題，其次是用戶界面重復(fù)開發(fā)且與本地程序不易一致的問題3。另一種方法是通過使用一種通用的編程語言進(jìn)行編程，然后生成不同移動平臺的本地程序的辦法來解決跨平臺的問題4。這

5、種方法有很大的優(yōu)勢。首先，雖然會增加少量輔助程序，但因?yàn)樯傻氖潜镜爻绦颍鋱?zhí)行效率總體來說與本地原生程序一樣；其次，由于其使用的是本地的UI，所以界面與本地原生程序完全一致。這種方法中React Native是最早提出也是目前最好的解決方案5，6。3 React Native方法（The react native method）React Native是應(yīng)用React Native來進(jìn)行移動跨平臺開發(fā)的方法。React Native是由Facebook公司在2015年推出的一組程序庫，用以把其JavaScript庫React引入主流移動平臺的開發(fā)中。這之前其React庫已經(jīng)在Web UI領(lǐng)域

6、取得相當(dāng)大的成功。React Native的推出改變了人們對移動平臺開發(fā)的固有觀念，為移動跨平臺開發(fā)注入了新的活力5。3.1 JavaScriptReact Native主要使用JavaScript語言進(jìn)行編程。JavaScript語言是一種在Web初期就已經(jīng)存在的腳本語言。它簡單易學(xué)，功能強(qiáng)大，早期便吸引了大量使用者。但由于最初其僅是作為一種Web動態(tài)化的輔助語言出現(xiàn)，因此使用者雖然多，但大多是業(yè)余程序員或其他行業(yè)的愛好者，并沒有引起多少專業(yè)程序員的重視。然而，JavaScript神奇的地方在于其發(fā)展，總是能平凡中出神奇，一直處在計(jì)算機(jī)語言發(fā)展的潮頭浪尖。2005年，Ajax概念被提出。這種

7、神奇的編程方式在當(dāng)年立即就刷爆了大眾的眼球，讓人們知道原來網(wǎng)頁編程還可以這樣做。這之后其發(fā)展可謂一發(fā)而不可收，不但不斷涌現(xiàn)出各種神奇的框架和程序庫，其語言本身也發(fā)展迅速，許多最新的編程理念都能在JavaScript中得以體現(xiàn)。時至今日，JavaScript已發(fā)展到計(jì)算機(jī)的許多領(lǐng)域，不但能做其他編程語言能做的事，而且還通常做得更好，其跟隨者中專業(yè)程序員大量增加，編出的各種應(yīng)用、框架及庫的質(zhì)量越來越高，儼然已成為最受歡迎的編程語言之一。JavaScript能取得今天的成績和許多因素有關(guān)，但讓其走出網(wǎng)頁走向更多領(lǐng)域卻與一個項(xiàng)目有著直接的關(guān)系，即V8項(xiàng)目。V8項(xiàng)目是一個JavaScript引擎項(xiàng)目，它

8、能讓JavaScript以接近甚至等于本地程序的效率得以執(zhí)行，這直接擴(kuò)大了JavaScript的應(yīng)用范圍并產(chǎn)生了絕對的競爭力。以此為基礎(chǔ)加之Node.js的出現(xiàn)直接促進(jìn)了React Native的產(chǎn)生7。3.2 React Native架構(gòu)React Native抓住當(dāng)前移動平臺開發(fā)的特點(diǎn)，很巧妙地利用各移動平臺自身的優(yōu)勢來完成跨平臺開發(fā)任務(wù)，避免了“重復(fù)制造輪子”。其程序架構(gòu)情況如圖1所示。APP程序一般通過React來訪問React Native，然后通過JavaScript運(yùn)行時庫來訪問底層移動操作系統(tǒng)以達(dá)到調(diào)用本地組件運(yùn)行的目的8。當(dāng)然程序的運(yùn)行還有多種渠道可靈活選擇，以滿足豐富的程序

9、要求。這一過程中APP首先要運(yùn)行本地系統(tǒng)支持的語言（在安卓中是Java，在蘋果中則是Object-C），然后本地語言通過中間橋與JavaScript容器通信，最終完成與JavaScript的交互，如圖2所示。endprint4 系統(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ù)生成界面。下面以登錄

10、模塊為例來看一下系統(tǒng)在安卓上的實(shí)現(xiàn)效果。登錄模塊涉及了React Native界面裝入、控件顯示及界面切換的方法。系統(tǒng)啟動時，從根目錄的App.js開始執(zhí)行，在其中需要安排好系統(tǒ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： Fo

11、nt.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：scr

12、een：PageFace， /內(nèi)容頁04： Settings：screen：SettingsScreen， /設(shè)置頁05： 代碼中建立的導(dǎo)航器共有三項(xiàng)，分別是Lg、PageFace、Settings，分別指向三個頁面。在程序中需要切換頁面時只需使用如下代碼即可：ps.navigation.navigate（目標(biāo)頁面）登錄頁面及其對應(yīng)代碼的一些情況如圖3所示。用戶名和密碼輸入框使用組件，密碼框需設(shè)定其secureTextEntry屬性為true，前方的圖標(biāo)需用設(shè)置該行容器樣式為行布局的方式來進(jìn)行固定。圖3 登錄界面及對應(yīng)代碼Fig.3 Login screenshot and code5 結(jié)論（

13、Conclusion）使用React Native進(jìn)行移動平臺跨平臺APP開發(fā)，可以用簡單、高效、用戶廣的JavaScript語言編寫程序，一次編寫可生成多種主流移動平臺程序。生成的程序直接調(diào)用本地組件，其效率在理論上與本地程序基本一樣。這樣不但大大節(jié)省了系統(tǒng)開發(fā)的時間和人力、物力，進(jìn)而減小開發(fā)成本，而且開發(fā)出來的程序執(zhí)行效率高，是一種有效和高效的移動平臺APP開發(fā)方法。參考文獻(xiàn)（References）1 Manson J，Pugh W，Adve S V.The java memory modelJ.Acm Sigplan Notices，2005，40（1）：378-391.2 Grensi

14、ng-Pophal L.HTML5J.Econtent，2011，34（2）：10.3 Ghatol R，Patel Y.Beginning PhoneGap：Mobile web framework for JavaScript and HTML5M.Apress，2012：1-16.4 Eisenman B.Writing cross-platform apps with react nativeEB/OL.https：/articles/react-native-introduction，2016-02-25.5 Wikipedia.React（JavaScript library）EB/OL.https：/wiki/React_（JavaScript_library），2017-09-28.6 Occhino T.React Native：Bringing modern web techniques to mobileEB/OL.https：/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile，2015-02-08.7 Wikipedia.JavaScriptEB/OL.https：/wiki/JavaScript，2017-09-26.8 Lakshman