[Mac][React Native][iOS] 環境建置

  • 573
  • 0
  • 2016-05-27

摘要:

記錄了React Native在Mac環境安裝與建置,管理工具Homebrew,監控工具Watchman,開發工具Atom,套件Nuclide等開發的前置作業。


 

在一次與同事的閒聊中,提到有關React Native,不過對方沒有寫過APP,與我討論,我花了一兩個小時瞭解,啥是React Native。於是決定將自己的學習過程記錄下來。

原本認為,這或許是另一套Cordove,不然就是Titanium相似的FrameWork。說到底,這兩套是以裝置的WebView為基礎的方式來執行程式,骨子裡還是Web,先天上就比不上Native的執行效率,試想,每當你說一句話,就要透過翻譯說給阿豆仔聽進而執行,那效能好的起來??

而 Facebook開源的React Native 則是使用 iOS 或 Android 原生支援的 JavaScript 元件,因此打造出來的 App 就跟原生的沒啥不同。

若你想要寫一套,就可以在不同的平台上執行『Write Once, Run Everywhere』,那請按下右上角的『X』這邊不適合你!因為React Native的精神是『Learn Once, Write Anywhere』學習一次,可以到處實做,意味著,iOS與Android的寫法是不同的,但是學習Reace Native的技巧僅需一次。

來吧~萬丈高樓平地起

準備工具

首先準備一台Mac,開發工具建議Xcode 7以上版本


Homebrew

簡便的套件管理管理工具,就如同在visual Studio 中的Nuget,協助下載原始碼來處理安裝、升級跟移除及完成編譯安裝等動作。

安裝方式:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 


node.js

安裝方式下列選一即可:

官網進行下載與安裝。

透過Homebrew來進行安裝

安裝方式:brew install node

 


Watchman

Facebook 提供的檔案監控工具。利用他來來偵測程式碼的變化,重新建構。

安裝方式:brew install watchman 

 


React Native CLI 

接下來就是主角React Native

而 npm 是Node.js 模組的封裝管理員

安裝方式:npm install -g react-native-cli

若安裝過出現 permission denied....

那就加上sudo指令,如下:

sudo npm install -g react-native-cli

 


編輯器

Ryan用慣了Visual Studio,不過若想要玩玩React Native 的話,目前Visual Studio Code在支援的狀況上,還不是很完善。

目前開發React Native,個人使用的是ATOM的編輯工具,可以到網站下載安裝檔。

完成ATOM安裝之後,再將Nuclide掛進來再執行

apm install nuclide

另外還可以外掛自動完成(intellisense),加快開發與typeing的fu

atom-react-native-autocomplete package

安裝方式:apm install atom-react-native-autocomplete

atom-react-native-css package

安裝方式:apm install atom-react-native-css

React Developer Tools

除錯工具,寫程式誰不用Debugger?到google Play就可以安裝了

 

建置第一個APP吧!

好了~環境都準備就緒了,我們來建置第一個APP吧!

安裝方式:react-native init HelloRyan

若順利建置成功的話,依照你Command-Line建立的位置,出現一個HelloRyan的資料夾

找到建立的HelloRyan項目,雙擊HelloRyan.xcodeproj即可在xcode中打開項目。

接下來就直接將他部署到虛擬機上囉。

 

以上文章由Ryan整理,若有侵犯版權、勘誤,請來信告知