react native 初構建之我等到花兒都謝了

囉嗦幾句

最近 react native 這貨貌似很火，若是想讓我從技術角度講述她爲何那麼火，那我就不獻醜了。不少喜歡刨根問底的程序猿，攻城獅比我說的明白多了。從個人角度來講，我很喜歡 react native 的緣由是，她改變了前端這個稱呼給你們的傳統認知，她拓展了前端的維度。前端不光只能在 H5 的範疇裏搞一搞，她也能夠侵佔到客戶端裏翻雲覆雨。就像 nodejs 讓前端能夠在服務器端插一腳同樣，提升前端的存在感，這是我所期盼和興奮的。

新手上路

今天咱們不討論任何深入的問題，做爲一隻小白，我只想把我第一次構建 react native 項目所踩的淺坑紀錄一下。個人構建步驟是參照官方文檔來的。建議你們安裝以前也先讀一讀。

系統要求

1. 要求OS X系統：目前僅包含了iOS的實現（只有iOS的時代已通過去了，如今已經支持安卓了，只不過官方文檔沒有技術更新而已，因此徹底不要在乎這些細節）。

2. 安裝Xcode：Xcode只在Mac上才能運行。開發者能夠從Mac應用商店下載Xcode，但版本必定要在6.3以上。

3. 安裝Node：Node或者npm的新手能夠經過brew install node來安裝Node.js。安裝Node的方式有不少，這只是其中的一種。但必定要肯定node的版本在4.0以上。若是你早就已經安裝過Node而且版本沒有達到要求想要升級的話，彆着急，後面我會給你提供一種我以爲比較方便的升級步驟。

4. 安裝watchman：Homebrew是官方推薦的安裝watchman的套件管理工具，它的安裝步驟能夠參考Homebrew官網。官方推薦安裝watchman，不然你可能會遇到node的文件監控bug。

5. 若是你想使用flow，能夠經過brew install flow命令來安裝flow。

更新Node

node有一個模塊叫n（這名字也真夠直接的），是專門用來管理node.js的版本的。
第一步，先安裝n模塊

npm install -g n

第二步，升級node.js到最新穩定版

n stable

若是你想升級node到最新版本可使用以下命令

n latest

很簡單有木有？！若是你想升級node到指定版本，可使用n命令跟隨版本號的方式。好比：

n v0.10.26

或者

n 0.10.26

快速上路

構建新項目

後面沒有多少內容了，即便你是一個急性子，也但願把後面的看完再着手作。
官方推薦的安裝步驟是這樣的，可是我以爲這就是一個坑。固然你要確保你的node已經打到官方要求的4.0以上而且也安裝了watchman。否則的話，安裝的時候一直在轉光標，根本停不下的狀況，那就是本身把本身坑了。

npm install -g react-native-cli // 全局安裝react-native
react-native init AwesomeProject // 建立項目名爲AsesomeProject的新項目

當我執行完上述的兩句命令時，我發現項目並無構建成功，而是卑鄙的給我提示了一坨錯誤。你妹的，出錯了早說啊，害我等了那麼久，鍵盤差點都吃了有木有？！

錯誤提示的大致意思是，只安裝了全局react-native，而沒有安裝本地的。因此，我建議的安裝步驟是這樣的。

npm install -g react-native-cli // 全局安裝react-native
npm install --save react-native
react-native init AwesomeProject // 建立項目名爲AsesomeProject的新項目

若是由於權限報錯請在命令前加sudo前綴。

在AwesomeProject/目錄中執行以下操做：

運行新項目

1. 打開AwesomeProkect.xcodeproj，然在在Xcode中點擊run運行；

2. 用文本編輯器打開index.ios.js，編輯一些代碼；

3. 在iOS simulator中按cmd + R(twice)來重載APP，而且觀察以前的改動。

使用淘寶npm鏡像

在發佈這篇文章以前，我在sf提問說關於建立RN項目速度慢到要吃鍵盤的程度是腫麼回事的事情。有小夥伴的回答給我了啓發。說若是換一個npm源可能會構建項目慢的雜症藥到病除。那麼就試試唄，一旦有奇效呢？

三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在。

1.經過config命令

npm config set registry https://registry.npm.taobao.org 
npm info underscore // 若是上面配置正確這個命令會有字符串response

2.命令行指定

npm --registry https://registry.npm.taobao.org info underscore

3.編輯~/.npmrc文件加入下面內容

registry = https://registry.npm.taobao.org

恭喜！您的第一個React Native應用就這麼新鮮出爐了。ORZ...其實原本很簡單的步驟卻由於一些小插曲耽誤了好多時間，不過最後的結果仍是美好噠！