你好结胀,React Native

tags:開(kāi)發(fā)隨筆

在移動(dòng)開(kāi)發(fā)領(lǐng)域赞咙,React Native恐怕是目前最引人矚目的項(xiàng)目之一。有很多理由讓人不得不關(guān)注它糟港,同時(shí)支持多個(gè)平臺(tái)攀操,性能接近于原生應(yīng)用,采用javascript開(kāi)發(fā)秸抚,大廠(chǎng)背書(shū)速和,等等,各種理由耸别,總有一個(gè)適合你健芭。

雖然我目前專(zhuān)注于iOS開(kāi)發(fā),以Swift和Objective-C作為主要開(kāi)發(fā)語(yǔ)言秀姐,但是還是忍不住開(kāi)始了React Native的嘗試之旅慈迈。畢竟世界總是在變。提前準(zhǔn)備一下省有,說(shuō)不定下一個(gè)項(xiàng)目就用它了 :)

目標(biāo)

  • 準(zhǔn)備ReactNative開(kāi)發(fā)環(huán)境
  • 運(yùn)行起一個(gè)比較典型的開(kāi)源Reac Native應(yīng)用痒留。這里我選的是 HackerNews

環(huán)境

環(huán)境準(zhǔn)備參考https://facebook.github.io/react-native/docs/getting-started.html

我用的是MacBook,OSX 10.11蠢沿。
XCode 7.3已經(jīng)安裝伸头。

1. 安裝或者更新homebrew

官方推薦用homebrew來(lái)安裝Watchman和Flow。
我之前已經(jīng)安裝了homebrew舷蟀。如果沒(méi)有安裝的話(huà)恤磷,可以參考https://coolestguidesontheplanet.com/installing-homebrew-on-os-x-el-capitan-10-11-package-manager-for-unix-apps/
簡(jiǎn)單說(shuō)面哼,就是一個(gè)命令搞定:

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

2. 安裝nvm和node.js

在React Native開(kāi)發(fā)過(guò)程中,大量使用node.js來(lái)實(shí)現(xiàn)一些自動(dòng)處理的工作扫步。所以node.js是必須的魔策。
React Native需要node.js 4.0以上版本。
Facebook推薦用nvm來(lái)安裝和管理node.js河胎。nvm 可以幫忙管理同一臺(tái)機(jī)器里的多個(gè)node.js版本闯袒,并且可以在多個(gè)版本的node.js中間切換。
可以運(yùn)行下面的命令來(lái)安裝nvm

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

運(yùn)行完后nvm就安裝好了游岳。然后運(yùn)行下面的命令來(lái)安裝node.js 5.0:

nvm install 5.0

完畢后nvm會(huì)自動(dòng)將5.0版本設(shè)為默認(rèn)政敢,也可以執(zhí)行下面的命令手動(dòng)將5.0設(shè)為默認(rèn):

nvm use 5.0

3.安裝Watchman和Flow

brew install watchman
brew install flow

4.安裝ReactNative命令行

執(zhí)行

sudo npm install -g react-native-cli

我在這里遇到一個(gè)錯(cuò)誤,提示信息如下:

ERROR EACCES, permission denied '/Users/admin/.babel.json' {"errno":-13,"code":"EACCES","path":"/Users/admin/.babel.json","syscall":"open"} Error: EACCES,

這是文件權(quán)限設(shè)置的問(wèn)題胚迫,改一下它的權(quán)限就好了:

sudo chmod 777 ~/.babel.json

5.下載并運(yùn)行HackerNews

可以直接在https://github.com/iSimar/HackerNews-React-Native頁(yè)面中點(diǎn)“Download Zip”按鈕喷户。
解壓后到文件夾,將終端的當(dāng)前路徑cd到項(xiàng)目路徑晌区,然后

npm install

node.js會(huì)下載這個(gè)工程所需要的模塊摩骨。
等命令執(zhí)行完后,找到ios目錄下的工程文件HN Reader.xcodeproj朗若,點(diǎn)擊就可以使用XCode打開(kāi)了運(yùn)行了。

我在這里遇到一個(gè)小坑:運(yùn)行后出現(xiàn)一個(gè)錯(cuò)誤昌罩,信息為

Failed to build DependencyGraph: Watchman error: Cannot read property 'root' of null.

Google之后發(fā)現(xiàn)是Watchman版本過(guò)低造成的哭懈。解決方法

$ brew update
$ brew upgrade watchman

解決后HackNews終于可以運(yùn)行了,貼一張圖:

Simulator Screen Shot 17 Apr 2016, 8.46.40 PM.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茎用,一起剝皮案震驚了整個(gè)濱河市遣总,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌轨功,老刑警劉巖旭斥,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異古涧,居然都是意外死亡垂券,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)羡滑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)菇爪,“玉大人,你說(shuō)我怎么就攤上這事柒昏〉手妫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵职祷,是天一觀(guān)的道長(zhǎng)氏涩。 經(jīng)常有香客問(wèn)我届囚,道長(zhǎng),這世上最難降的妖魔是什么是尖? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任奖亚,我火速辦了婚禮,結(jié)果婚禮上析砸,老公的妹妹穿的比我還像新娘昔字。我一直安慰自己,他們只是感情好首繁,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布作郭。 她就那樣靜靜地躺著,像睡著了一般弦疮。 火紅的嫁衣襯著肌膚如雪夹攒。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,772評(píng)論 1 290
  • 那天胁塞,我揣著相機(jī)與錄音咏尝,去河邊找鬼。 笑死啸罢,一個(gè)胖子當(dāng)著我的面吹牛编检,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扰才,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼允懂,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了衩匣?” 一聲冷哼從身側(cè)響起蕾总,我...
    開(kāi)封第一講書(shū)人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎琅捏,沒(méi)想到半個(gè)月后生百,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡柄延,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年蚀浆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拦焚。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蜡坊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赎败,到底是詐尸還是另有隱情秕衙,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布僵刮,位于F島的核電站据忘,受9級(jí)特大地震影響鹦牛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜勇吊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一曼追、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧汉规,春花似錦礼殊、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至啄枕,卻和暖如春婚陪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背频祝。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工泌参, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人常空。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓沽一,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親窟绷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子锯玛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

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