React Native在APP開發(fā)中的應用研究

潘婷婷

（無錫城市職業(yè)技術學院，江蘇 無錫 214000）

React Native在APP開發(fā)中的應用研究

潘婷婷

（無錫城市職業(yè)技術學院，江蘇 無錫 214000）

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

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

1 APP發(fā)展概況

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

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

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

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

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

2 React Native的優(yōu)勢

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

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

2.2 使用JS進行原生開發(fā)

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

2.3 熱更新

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

3 React Native開發(fā)流程

3.1 環(huán)境搭建

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

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

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

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

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

安裝-終端命令輸入

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

這個過程其實就是 去https：//github.com/creationix/ nvm#installation 把一個install script xi運行

下載執(zhí)行完畢后會提示你沒有設置環(huán)境變量啥的，通過終端在根目錄下建立一個.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 #這個是你的sdks環(huán)境變量

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

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

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

nvm install node && nvm alias default node

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

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

在命令行中輸入brew install watchman。

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

在命令行中輸入brew install flow來安裝flow。

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

需要xcode 7以上，建議安裝最新版本，否則有可能新建項目的時候編譯不過。

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

終端命令：

npm install -g react-native。

3.2 創(chuàng)建項目

以“HelloWorld”項目為例說明，React Native開發(fā)項目的流程

（1）新建項目。

在終端輸入命令行

React-native init HelloWorld

（2）運行項目。

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

圖1 IOS模擬器中運行界面

4 結(jié)語

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

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

［2］劉明俊.基于手機客戶端APP的移動學習資源開發(fā)研究［J］.軟件導刊，2016（6）：104-106.

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

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

［5］陸鋼，朱培軍，李慧云，等.智能終端跨平臺應用開發(fā)技術研究［J］.電信科學，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—），女，江蘇東臺；研究方向：圖像處理，模式識別。