配置React Native的開發(fā)環(huán)境

盡管在移動(dòng)開發(fā)中,原生APP的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無法超越Native,主要體現(xiàn)在:

(1)Native的原生控件有更好的體驗(yàn)

(2)Native有更好的手勢識別

(3)Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼,文本渲染仍無法多線程渲染,這影響了Web的流暢性

開篇

React Native于F8大會(huì)開源,在短短不到一年的時(shí)間里,它成為手機(jī)端必不可少的開發(fā)模式之一.它充分利用了Facebook現(xiàn)有的業(yè)務(wù)輪子,其核心設(shè)計(jì)理念:既擁有Native的用戶體驗(yàn),又保留React的開發(fā)效率.

目前,React Native基本完成了對多端的支持,實(shí)現(xiàn)了真正意義上的面向配置開發(fā):開發(fā)者可以靈活的使用HTML和CSS布局,使用React語法構(gòu)建組件,實(shí)現(xiàn):H5,Android,iOS多端代碼的復(fù)用.

此外,使用流暢度和原生的保持在同一層次,這不是我們夢寐以求的開發(fā)模式嗎?讓我們從無到有開啟新的學(xué)習(xí)篇章吧!

什么是React Native?

(一) 時(shí)下兩大移動(dòng)互聯(lián)網(wǎng)主流技術(shù)

BAT等一線互聯(lián)網(wǎng)公司的插件化,熱修改等技術(shù)

React Native技術(shù)(2016年,隨著Android版本的穩(wěn)定,更加火爆)

(二)React Native介紹

Facebook于2015年9月15日發(fā)布React Native

廣大開發(fā)者可以使用JavaScript和React開發(fā)跨平臺(tái)移動(dòng)應(yīng)用

React Native提倡組件化開發(fā):即提供一個(gè)個(gè)封裝好的組件,組件相互嵌套,形成新的組件

(三) React Native的優(yōu)勢

3.1 跨平臺(tái)開發(fā)

運(yùn)用React Native,我們可以使用同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用運(yùn)行在Web端,Android端和iOS端;

React Native的優(yōu)秀之處在于其吸取了各家跨平臺(tái)解決方案的優(yōu)點(diǎn)然后融于一體抓韩。

(1)通過JavaScript驅(qū)動(dòng)原生代碼瓣喊,實(shí)現(xiàn)非常接近原生應(yīng)用的體驗(yàn)鸥拧;

(2)統(tǒng)一的開發(fā)語言和框架打破不同平臺(tái)語言和機(jī)制不通用必須分別開發(fā)的障礙;

(3)更具革命性的是React Native基于React的設(shè)計(jì)思想球恤,通過虛擬DOM、單向數(shù)據(jù)流,為我們帶來了更加簡單高效的開發(fā)體驗(yàn)皂岔。

3.2 追求極致的用戶體驗(yàn):實(shí)時(shí)熱部署

3.3Learn once, write anywhere(最具魅力)

React Native不強(qiáng)求一份原生代碼支持多個(gè)平臺(tái),所以不提"write once,run anywhere”(Java),提出了”Learn once, write anywhere“.

只需要學(xué)習(xí)React Native,我們就能夠編寫針對不同平臺(tái)的應(yīng)用展姐,并且使用React Native框架開發(fā)相較于原生代碼開發(fā)應(yīng)用躁垛,更簡單更高效。

通過React Native框架我們能夠?qū)崿F(xiàn)應(yīng)用任意模塊的更新圾笨,而不需要用戶通過各種渠道下載安裝包重新安裝教馆。修復(fù)線上bug也會(huì)變的非常及時(shí)。并且對應(yīng)用的更新可以在靜默的狀態(tài)下完成擂达,省去讓用戶等待的時(shí)間土铺。

(四) React Native開發(fā)注意事項(xiàng)

4.1 目前React Native在iOS上僅支持ios7以上,Android僅支持Android4.1以上版本;

github地址:https://github.com/facebook/react-native

官方文檔:http://facebook.github.io/react-native/docs/getting-started.html

4.2 由于React Native的版本更新速度很快,如果沒有深厚的JavaScript基礎(chǔ),建議選擇:

a. 功能適中,交互一般,不需要特別多的系統(tǒng)原生支持;

b. 對于部分復(fù)雜的應(yīng)用,可以考慮原生+React Native混合開發(fā)


如果說ReactNative有什么劣勢的話,首先就是學(xué)習(xí)成本比較高板鬓。

學(xué)習(xí)成本不僅僅包括需要學(xué)習(xí)React Native框架的使用悲敷,還包括對于不同平臺(tái)原生應(yīng)用開發(fā)能力的掌握。

由于目前的React Native框架還無法完全脫離原生代碼獨(dú)立完成大型應(yīng)用的開發(fā)俭令,所以要求開發(fā)人員即熟悉React Native框架的運(yùn)用又有原生應(yīng)用開發(fā)的經(jīng)驗(yàn)后德。

React Native目前存在的問題:雖然Facebook官方宣傳React Native具有原生應(yīng)用相差無幾的用戶體驗(yàn)。但是實(shí)際開發(fā)中發(fā)現(xiàn)在一些對性能要求較高的情況下抄腔,React Native構(gòu)建的UI在滑動(dòng)過程中有明顯的卡頓瓢湃,遠(yuǎn)遠(yuǎn)不能達(dá)到60FPS的要求。

其次React Native框架目前仍然存在一些性能問題赫蛇,比如ListView內(nèi)存泄露的問題绵患。而且React Native框架開發(fā)的應(yīng)用通常要比原生應(yīng)用占用更多的內(nèi)存和CPU,這也意味著通過React Native構(gòu)建的應(yīng)用更耗電棍掐。

最后React Native作為一個(gè)剛剛開源的框架藏雏,雖然在github的熱度很高,但是可用的UI組件不夠豐富作煌。第三方組件良莠不齊掘殴,很多組件都存在不同平臺(tái)無法適配的問題。這也直接導(dǎo)致粟誓,盡管React Native是一個(gè)能夠用于跨平臺(tái)開發(fā)的框架奏寨,但是為保證一致的用戶體驗(yàn)在一些情況下不得不針對不同平臺(tái)編寫不同的代碼。

一. 環(huán)境需求

1.1安裝Homebrew

Homebrew是Mac OSX的包管理器鹰服,我們需要通過Homebrew安裝開發(fā)React Native的相關(guān)軟件包病瞳。

安裝方式:

ruby -e"$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

注意這里會(huì)出現(xiàn)一個(gè)問題:

會(huì)出現(xiàn)一個(gè)這樣的語句Press?RETURN?to?continue?or?any?other?key?to?abort

點(diǎn)擊enter繼續(xù)就好

命令行執(zhí)行brew -v進(jìn)行檢查brew是否已經(jīng)安裝成功

1.2? 安裝npm 和 Node.js

Node.js最好安裝4.0及其以上更高版本,node安裝成功后,npm自動(dòng)也就有了,直接下載安裝Node.js, 網(wǎng)址:https://nodejs.org/en/download/

或者

brew install node

此方式需要將Xcode更新到8.0

1.3? 安裝WatchMan

watchman是Facebook用于監(jiān)視JavaScript文件改動(dòng)的開源項(xiàng)目,該插件用于監(jiān)控bug變化和文件變化,并且可以觸發(fā)指定的操作

安裝方式:

brew install watchman

驗(yàn)證是否安裝成功

1.4? 安裝flow

flow是Facebook開源的一個(gè)JavaScript靜態(tài)類型檢查器揽咕,建議安裝它,以方便找出JavaScript程序中可能存在的類型錯(cuò)誤

安裝方式:

brew install flow

驗(yàn)證是否安裝成功

(注意:如果提示command not found,請加上sudo獲得最高權(quán)限)

二. React Native的安裝

2.1安裝react-native-cli。react-native-cli是React Native的命令行工具套菜,安裝react-native-cli后我們就能夠通過react-native相關(guān)命令管理ReactNative工程亲善。

安裝方式:

npm install -g react-native-cli

驗(yàn)證是否安裝成功

三. iOS開發(fā)環(huán)境需求

Xcode7及其以上更高版本,如果你的電腦沒有安裝Xcode,請到AppStore下載最新版本逗柴。切記不要從任何第三方渠道下載蛹头!

注意

npm,是Node.js的模塊依賴管理工具戏溺。React Native源代碼以及開發(fā)React Native應(yīng)用用到的第三方組件都可以通過npm進(jìn)行下載安裝渣蜗。

四. Android開發(fā)環(huán)境需求

安裝最新版的JDK:

下載安裝地址:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安裝Android studio:

下載安裝地址:

https://sites.google.com/a/android.com/tools/recent

先安裝Android studio,然后打開終端, 輸入vim ~/.bashrc,按enter后,

輸入exportANDROID_HOME=~/Library/Android/sdk,然后按esc后,輸入:wq,退出vim編輯器.

這種方式,可以省略以下4.1-4.3步驟,只需要從4.4開始執(zhí)行即可,所以建議安裝Android studio

4.1? 安裝Android SDK

安裝方式:

brew install android-sdk

4.2? 定義ANDROID_HOME環(huán)境變量

確保ANDROID_HOME環(huán)境變量指向你已經(jīng)安裝的Android SDK目錄:

前往電腦的~/.bashrc,~/.bash_profile或者你終端所用的其它配置文件中增加以下內(nèi)容:

4.3? 設(shè)置SDK

打開Android SDK Manager(Mac用戶在終端下輸入android)

選中以下項(xiàng)目:

Android SDK Build-tools version 23.0.1 ?(這個(gè)版本必須嚴(yán)格匹配23.0.1)

Android 6.0 (API 23)

Local Maven repository for Support Libraries (之前叫做AndroidSupportRepository)

點(diǎn)擊”Install Packages”:

4.4? 安裝Genymotion

Genymotion是一個(gè)第三方模擬器,它比Google官方的模擬器更易設(shè)置且性能更好.但是它只針對個(gè)人用戶免費(fèi).

(1) 下載并安裝Genymotion

https://www.genymotion.com/

(2) 打開Genymotion,如果你尚未安裝VirtualBox,它有可能會(huì)提示你安裝

VirtualBox下載安裝地址:

https://www.virtualbox.org/

(3) 打開Genymotion,創(chuàng)建一個(gè)模擬器并啟動(dòng)(需要在Genymotion的官網(wǎng)注冊一個(gè)賬號才可以打開)


(4) 按下command+M可以打開開發(fā)者菜單(在安裝并啟動(dòng)了React Native應(yīng)用之后)

五. React Native的第一個(gè)應(yīng)用

5.1? 執(zhí)行命令,生成一個(gè)工程

react-native init 項(xiàng)目名稱

選擇一個(gè)目錄位置,執(zhí)行上述命令旷祸,終端出現(xiàn)如下信息說明工程已經(jīng)創(chuàng)建完畢耕拷。

注意:

因?yàn)橐獜膎pm下載React Native的源代碼,可能需要等待一會(huì)托享。如果長時(shí)間沒有反應(yīng)骚烧,建議翻墻。也可以將npm替換為國內(nèi)鏡像:

npm config set registry https://registry.npm.taobao.org?--global

npm config set disturl https://npm.taobao.org/dist?--global

5.2? AseeMyGoProduct就是我們創(chuàng)建的工程的名稱嫌吠。

5.2.1 到AseeMyGoProduct工程同名的目錄下止潘,進(jìn)入ios目錄,用Xcode打開AseeMyGoProduct工程辫诅,?+R運(yùn)行凭戴。這時(shí)可以看到終端啟動(dòng)并且輸出服務(wù)器啟動(dòng)的相關(guān)信息。

等待模擬器啟動(dòng)炕矮,可以看到一個(gè)Welcome to React Native界面么夫,說明我們已經(jīng)成功創(chuàng)建第一個(gè)ReactNative工程。

5.2.2 到AseeMyGoProduct工程同名的目錄下肤视,進(jìn)入android目錄档痪,用Android studio打開android目錄,等待時(shí)間會(huì)很長。

5.3? 目錄結(jié)構(gòu)截圖

目錄結(jié)構(gòu)分析:

(a) 默認(rèn)生成androidios兩個(gè)平臺(tái)的原生項(xiàng)目

(b) 其中,index.android.jsindex.ios.js文件為Android和iOS的空殼應(yīng)用文件

(c) 此外,node_modules文件夾,是為Node.js存放和管理npm包資源,也包含React Native框架文件

查看index.ios.js中的代碼

六. 運(yùn)行工程文件

不管是 iOS 還是 Android,在開發(fā)調(diào)試階段,都需要在 Mac上 啟動(dòng)一個(gè) HTTP 服務(wù),稱為Debug Server,默認(rèn)運(yùn)行在8081端口, APP 通過Debug Server加載 js

6.1 打開Xcode,運(yùn)行你的第一個(gè)React Native創(chuàng)建的iOS應(yīng)用

6.2? 把React Native創(chuàng)建的應(yīng)用跑在Android上

(a) 命令行執(zhí)行cd?AseeMyGoProduct,路徑切換到項(xiàng)目主目錄

(b)命令行執(zhí)行react-native run-android,加載運(yùn)行android應(yīng)用

(c) 使用編輯器打開和修改index.android.js文件,接著通過菜單按鈕選擇Reload JS進(jìn)行刷新修改

七. 管理React Native庫的版本

在開發(fā)中,會(huì)經(jīng)常的去控制React Native的版本庫,得以適配各種條件下的開發(fā),那該如何查看,控制React Native的版本呢?

7.1 查看本地的React Native庫的版本

命令行輸入react-native --version

命令行效果

7.2 更新本地的React Native的版本

命令行輸入?npm update -g react-native-cli

7.3 查看react-native的npm包最新版本

NPM的全稱是Node Package Manager, 是一個(gè)NodeJS包管理和分發(fā)工具,已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)

npm包地址:https://www.npmjs.com/package/react-native

命令行查詢?npm info react-native

查詢效果

在項(xiàng)目中查看

7.4 升級或者降級npm包的版本

升級到當(dāng)前最新?npm install --save react-native@0.36

降級到以前版本?npm install --save react-native@0.18

7.5 更新項(xiàng)目templates文件(可選)

新的npm包會(huì)包含更新在運(yùn)行react-native init命令生成的一些動(dòng)態(tài)文件,例如init創(chuàng)建項(xiàng)目的時(shí)候會(huì)生成iOS和Android的子項(xiàng)目,我們可以通過以下的命令進(jìn)行獲取最新的代碼

命令行查詢react-native upgrade

八. WebStorm設(shè)置React Native代碼提示

8.1 從github上下載xml插件

git clone?https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

8.2 安裝

ReactNative.xml復(fù)制到 ~/Library/Preferences/WebStorm2016.1/templates,然后重啟WebStorm.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邢滑,一起剝皮案震驚了整個(gè)濱河市腐螟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌困后,老刑警劉巖乐纸,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異摇予,居然都是意外死亡汽绢,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門侧戴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宁昭,“玉大人跌宛,你說我怎么就攤上這事』蹋” “怎么了疆拘?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長寂曹。 經(jīng)常有香客問我入问,道長,這世上最難降的妖魔是什么稀颁? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮楣黍,結(jié)果婚禮上匾灶,老公的妹妹穿的比我還像新娘。我一直安慰自己租漂,他們只是感情好阶女,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哩治,像睡著了一般秃踩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上业筏,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天憔杨,我揣著相機(jī)與錄音,去河邊找鬼蒜胖。 笑死消别,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的台谢。 我是一名探鬼主播寻狂,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼朋沮!你這毒婦竟也來了蛇券?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤樊拓,失蹤者是張志新(化名)和其女友劉穎纠亚,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體骑脱,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡菜枷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了叁丧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啤誊。...
    茶點(diǎn)故事閱讀 37,997評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡岳瞭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蚊锹,到底是詐尸還是另有隱情瞳筏,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布牡昆,位于F島的核電站姚炕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏丢烘。R本人自食惡果不足惜柱宦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望播瞳。 院中可真熱鬧掸刊,春花似錦、人聲如沸赢乓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽牌芋。三九已至蚓炬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間躺屁,已是汗流浹背肯夏。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留楼咳,地道東北人熄捍。 一個(gè)月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像母怜,于是被迫代替她去往敵國和親余耽。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容