潘婷婷

（無(wú)錫城市職業(yè)技術(shù)學(xué)院，江蘇 無(wú)錫 214000）

React Native在APP開(kāi)發(fā)中的應(yīng)用研究

潘婷婷

（無(wú)錫城市職業(yè)技術(shù)學(xué)院，江蘇 無(wú)錫 214000）

目前，APP開(kāi)發(fā)是移動(dòng)互聯(lián)網(wǎng)發(fā)展的重要內(nèi)容，進(jìn)行移動(dòng)開(kāi)發(fā)的方法也非常的多，如IOS，Android。文章介紹了一種新型的開(kāi)發(fā)框架—React Native，用Java語(yǔ)言就能同時(shí)編寫(xiě)IOS，Android以及后臺(tái)應(yīng)用程序。相對(duì)傳統(tǒng)開(kāi)發(fā)方式，這種方式更加簡(jiǎn)單、便捷，且學(xué)習(xí)成本低廉。

React Native；APP開(kāi)發(fā)；Java

1 APP發(fā)展概況

自從2007 年1月喬布斯揭開(kāi)iPhone的面紗以來(lái)，移動(dòng)時(shí)代的大潮滾滾向前，各種不同的系統(tǒng)平臺(tái)，不同的技術(shù)路線(xiàn)，自然是層出不窮、迅猛發(fā)展業(yè)。如今，環(huán)境越來(lái)越社交化、開(kāi)放化，消費(fèi)者在移動(dòng)APP應(yīng)用上花費(fèi)的時(shí)間超過(guò)移動(dòng)Web，從數(shù)據(jù)上來(lái)看，應(yīng)用程序APP不管是下載速度，還是創(chuàng)新速度，都在加快，移動(dòng)應(yīng)用程序扮演著至關(guān)重要的角色。目前，移動(dòng)應(yīng)用程序開(kāi)發(fā)人員主要構(gòu)建了3種類(lèi)型的應(yīng)用程序。

原生應(yīng)用程序：是指能直接運(yùn)行于當(dāng)前操作系統(tǒng)（比如IOS或安卓）的應(yīng)用程序，使用相應(yīng)平臺(tái)支持的開(kāi)發(fā)工具和語(yǔ)言（比如IOS平臺(tái)支持Xcode和Objective-C，安卓平臺(tái)支持Eclipse和Java）。原生應(yīng)用程序外觀和性能都是最佳的。

HTML5應(yīng)用程序：HTML5應(yīng)用程序使用標(biāo)準(zhǔn)的Web技術(shù)，通常是HTML5，JavaScript和CSS。這種只編寫(xiě)一次、可到處運(yùn)行的移動(dòng)開(kāi)發(fā)方法構(gòu)建的跨平臺(tái)移動(dòng)應(yīng)用程序可以在多個(gè)設(shè)備上運(yùn)行。雖然開(kāi)發(fā)人員單單使用HTML5和JavaScript就能構(gòu)建功能復(fù)雜的應(yīng)用程序，但是對(duì)于HTML5不論是蘋(píng)果還是谷歌，沒(méi)有那么多驅(qū)動(dòng)力推動(dòng)自己向HTML5發(fā)展。通過(guò)所謂中間件平臺(tái)，無(wú)法和本地APP操作系統(tǒng)競(jìng)爭(zhēng)。從整個(gè)實(shí)用和用戶(hù)體驗(yàn)維度，不論是性能、耗電，HTML5都有很大缺陷。

混合應(yīng)用程序：混合開(kāi)發(fā)集原生和HTML5兩者的優(yōu)點(diǎn)（及缺點(diǎn)）。定義的混合應(yīng)用程序是一種Web應(yīng)用程序，主要使用HTML5和JavaScript構(gòu)建而成，然后封裝在細(xì)薄的原生容器里面，可通過(guò)容器來(lái)訪(fǎng)問(wèn)原生平臺(tái)功能。

總之，原生應(yīng)用程序提供了最佳功能和用戶(hù)體驗(yàn)，有一些功能如多點(diǎn)觸控、快速圖形API、內(nèi)置部件、說(shuō)明文檔等功能只有原生應(yīng)用程序才能提供。但是原生應(yīng)用程序的開(kāi)發(fā)需要使用集成開(kāi)發(fā)環(huán)境，對(duì)于初學(xué)者而言，無(wú)論是學(xué)習(xí)IOS還是安卓都是比較困難的，并且需要付出較大的成本代價(jià)。在這種環(huán)境下，F(xiàn)acebook推出了React Native開(kāi)源框架，React Native應(yīng)用能夠?yàn)閃indows，Xbox、智能電視和可穿戴設(shè)備編譯使用。它的宣傳語(yǔ)是“Learn Once，Write Any Where”，學(xué)習(xí)成本只有一次，卻完成了所有開(kāi)發(fā)角色的統(tǒng)一。

2 React Native的優(yōu)勢(shì)

2.1 環(huán)境配置簡(jiǎn)單

相比于原生開(kāi)發(fā)，使用RN進(jìn)行APP開(kāi)發(fā)的環(huán)境配置尤為簡(jiǎn)單，只需要轉(zhuǎn)好npm，RN-cli就可以開(kāi)始初始化工程了。當(dāng)然，如果是進(jìn)行Android項(xiàng)目另外還需還裝sdk等，IOS需要裝XCode。

2.2 使用JS進(jìn)行原生開(kāi)發(fā)

原生APP開(kāi)發(fā)是一種基于智能手機(jī)本地操作系統(tǒng)如Android，IOS和Windows Phone并且使用原生程序編寫(xiě)運(yùn)行的第三方移動(dòng)應(yīng)用程序，可以最大程度地發(fā)揮特定智能操作系統(tǒng)的風(fēng)格。但這種開(kāi)發(fā)方式只能是針對(duì)某一種特定的操作系統(tǒng)進(jìn)行開(kāi)發(fā)，無(wú)法做到“跨平臺(tái)”。一個(gè)程序員只能在一種平臺(tái)上開(kāi)發(fā)，無(wú)法做到同時(shí)并行。這樣如果一個(gè)客戶(hù)要求產(chǎn)品覆蓋多個(gè)平臺(tái)就要同時(shí)有多名程序員負(fù)責(zé)各自的APP應(yīng)用開(kāi)發(fā)。這樣會(huì)耗費(fèi)大量的人力物力。而React Native能夠用JavaScript腳本就可以寫(xiě)出原生程序，極大地減輕了公司和人員的消耗。

2.3 熱更新

React Native可以實(shí)現(xiàn)熱更新，即不需要關(guān)閉服務(wù)器，直接重新部署項(xiàng)目就行了，對(duì)于程序編寫(xiě)是非常有利的。但是目前只是實(shí)現(xiàn)了js代碼的熱更新功能，局限性比較大，當(dāng)原生代碼更新了或者圖片資源更新了，還是需要重新打包，提供用戶(hù)下載安裝。

3 React Native開(kāi)發(fā)流程

3.1 環(huán)境搭建

（1）安裝Hombrew（IOS系統(tǒng)上的一個(gè)安裝包管理器，安裝后可以方便后續(xù)安裝包的安裝），必要工具vpn通過(guò)終端運(yùn)行命令。

ruby -e "$（curl -fsSL https：//raw.githubusercontent.com/Homebrew/install/master/install）"。

安裝完畢，運(yùn)行執(zhí)行blew -v查看版本號(hào)，確定是否安裝成功。

（2）安裝nodes.js（服務(wù)端的JavaScript運(yùn)行環(huán)境）

a.首先安裝 nvm ，nvm使你可以同時(shí)安裝多個(gè)版本的Node.js，并且在這些版本之間輕松切換。

安裝-終端命令輸入

curl -o- https：//raw.githubusercontent.com/creationix/ nvm/v0.30.1/install.sh | bash

這個(gè)過(guò)程其實(shí)就是 去https：//github.com/creationix/ nvm#installation 把一個(gè)install script xi運(yùn)行

下載執(zhí)行完畢后會(huì)提示你沒(méi)有設(shè)置環(huán)境變量啥的，通過(guò)終端在根目錄下建立一個(gè).bashrc及./bash_profile

加入下面內(nèi)容

export NVM_DIR="/Users/cbf/.nvm"

［ -s "$NVM_DIR/nvm.sh" ］ && ."$NVM_DIR/ nvm.sh" # This loads nvm

export ANDROID_HOME=～/Library/Android/sdk #這個(gè)是你的sdks環(huán)境變量

然后進(jìn)入 .nvm 文件夾下執(zhí)行 ./install.sh 即可安裝成功

然后 nvm -v 查看是否安裝成功

b.安裝node，終端安裝命令

nvm install node && nvm alias default node

安裝完成后，通過(guò) node 命令確定是否安裝成功

（3）建議安裝watchman（React修改source文件的一個(gè)工具）。

在命令行中輸入brew install watchman。

（4）安裝flow一個(gè)JavaScript 的靜態(tài)類(lèi)型檢查器。

在命令行中輸入brew install flow來(lái)安裝flow。

（5）OS開(kāi)發(fā)環(huán)境準(zhǔn)備。

需要xcode 7以上，建議安裝最新版本，否則有可能新建項(xiàng)目的時(shí)候編譯不過(guò)。

（6）安裝React Native CLI：用來(lái)開(kāi)發(fā)React Native的命令行工具。

終端命令：

npm install -g react-native。

3.2 創(chuàng)建項(xiàng)目

以“HelloWorld”項(xiàng)目為例說(shuō)明，React Native開(kāi)發(fā)項(xiàng)目的流程

（1）新建項(xiàng)目。

在終端輸入命令行

React-native init HelloWorld

（2）運(yùn)行項(xiàng)目。

創(chuàng)建的項(xiàng)目包含Android和IOS兩個(gè)版本。此處只介紹IOS的用法。用XCode打開(kāi)ios/HelloWorld.xcodeproj文件，點(diǎn)擊鍵盤(pán)“-R”或者點(diǎn)擊"Run"，編譯運(yùn)行項(xiàng)目，會(huì)啟動(dòng)ReactNative服務(wù)和IOS模擬器。在IOS模擬器中可以看到如圖1所示的界面。

圖1 IOS模擬器中運(yùn)行界面

4 結(jié)語(yǔ)

本文探討了目前比較流行的APP開(kāi)發(fā)框架React Native，從優(yōu)點(diǎn)、使用的流程進(jìn)行了研究，可以看出React Native對(duì)于初入門(mén)的程序開(kāi)發(fā)者，對(duì)js，html熟悉的開(kāi)發(fā)者有著極大的優(yōu)勢(shì)，可以使其快速地進(jìn)入APP程序的開(kāi)發(fā)。當(dāng)然目前這個(gè)產(chǎn)品還在推廣階段，還有一些缺陷如兼容性問(wèn)題、性能問(wèn)題等，有待進(jìn)一步應(yīng)用后再討論。

［1］吳文棟，孫玉濤.手機(jī)APP應(yīng)用開(kāi)發(fā)初探［J］.電子世界，2014（17）：123.

［2］劉明俊.基于手機(jī)客戶(hù)端APP的移動(dòng)學(xué)習(xí)資源開(kāi)發(fā)研究［J］.軟件導(dǎo)刊，2016（6）：104-106.

［3］汪永松.安卓手機(jī)APP開(kāi)發(fā)套路之信息處理［J］.電腦編程技巧與維護(hù)，2014（20）：57-62.

［4］湯愷.原生APP和HTML5的混合開(kāi)發(fā)模式在“浙江新聞”客戶(hù)端中的實(shí)踐［J］.傳媒評(píng)論，2015（3）：65-68.

［5］陸鋼，朱培軍，李慧云，等.智能終端跨平臺(tái)應(yīng)用開(kāi)發(fā)技術(shù)研究［J］.電信科學(xué)，2012（5）：14-17.

Research on the application of React Native in the development of APP

Pan Tingting

（Wuxi City College of Vocational Technology，Wuxi 214000，China）

At present，the development of APP is an important part of the development of mobile Internet，mobile development methods are also various，such as IOS and Android.This article introduces a kind of new development framework—the React Native that uses Java language can simultaneously write IOS，Android and the background application，which is more simple，convenient and relative to traditional development mode，it is of lower study cost .

React Native；APP development；Java

潘婷婷（1984—），女，江蘇東臺(tái)；研究方向：圖像處理，模式識(shí)別。