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)行了,貼一張圖: