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

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

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

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

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

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

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

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

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

9、要求。這一過程中APP首先要運行本地系統(tǒng)支持的語言（在安卓中是Java，在蘋果中則是Object-C），然后本地語言通過中間橋與JavaScript容器通信，最終完成與JavaScript的交互，如圖2所示。endprint4 系統(tǒng)實現(xiàn)（System implementation）React Native的編程語言采用的是JavaScript的擴展版本JSX，且目前官方支持JavaScript的標準ES6。其程序以“.js”為擴展名，各模塊間用輸入（import）、輸出（export）語句進行代碼復(fù)用，內(nèi)部建立頁面的虛擬DOM，用State進行維護，并用render（）函數(shù)生成界面。下面以登錄

10、模塊為例來看一下系統(tǒng)在安卓上的實現(xiàn)效果。登錄模塊涉及了React Native界面裝入、控件顯示及界面切換的方法。系統(tǒng)啟動時，從根目錄的App.js開始執(zhí)行，在其中需要安排好系統(tǒng)啟動前的準備工作（如大圖片的異步裝入）并指定具體切入的界面位置。異步裝入代碼如下：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模塊來進行異步裝入以提高后續(xù)程序訪問資源的效率。進入切入頁面后需要建立導(dǎo)航器（Navigator）以進行后續(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)航器共有三項，分別是Lg、PageFace、Settings，分別指向三個頁面。在程序中需要切換頁面時只需使用如下代碼即可：ps.navigation.navigate（目標頁面）登錄頁面及其對應(yīng)代碼的一些情況如圖3所示。用戶名和密碼輸入框使用組件，密碼框需設(shè)定其secureTextEntry屬性為true，前方的圖標需用設(shè)置該行容器樣式為行布局的方式來進行固定。圖3 登錄界面及對應(yīng)代碼Fig.3 Login screenshot and code5 結(jié)論（

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