React Native iOS環境搭建

感受React Native會愈來愈多的公司開始研究、使用。因此週六也抽空搭建了iOS的開發環境，以便之後利用空閒的時間可以學習一下。

廢話很少說了，下面簡單的列出步驟吧。 
1. 安裝Homebrew 
Homebrew主要用於安裝後面須要安裝的watchman、flow 
打開MAC的終端，輸入以下命令： 

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


通過漫長的等待後，安裝完成。執行 brew doctor 命令。這是homebrew 完成後必須作的一件事，檢查homebrew各模塊是否正常

2. 安裝nvm和nodejs 
nvm是用於nodejs版本管理的工具，用於安裝nodejs。 
對於nvm應該可使用brew直接安裝，可是我沒有用這個安裝，讀者能夠本身使用以下命令試試： 

brew install nvm 

我使用的另外一種方式，在終端中輸入以下的命令： 

brew install node . 該命令執行後，自動裝好node和npm 

這個用於安裝nodejs和npm。npm用於nodejs包依賴管理的工具。 
3. 安裝watchman 
watchman是用於監聽文件變化的工具，應該是用於監聽文件變化，而後界面作出響應。執行以下命令： 

brew install watchman 

4. 安裝flow 
flow我我的理解的是用於靜態分析js語法錯誤的工具，可以更早的js的語法錯誤。執行以下的命令： 

brew install flow 


到這裏基本的環境就配置好了，下面建立一個iOS的例子，在終端中將目錄切換到你保存工程的目錄，而後執行以下的命令：

$ npm install -g react-native-cli  
 $ react-native init AwesomeProject     
$ cd AwesomeProject/

1. 在git上下載，或者直接clone項目 React native

2. npm install -g react-native-cli 安裝命令行界面工具。

3. 在react-native的項目目錄下使用react-native命令行命令init初始化一個demo項目。react-native init DemoProject 
   初始化完成後，在DemoProject目錄下會看到DemoProject.xcodeproj文件，其中的index.ios.js就是控制項目的js文件，簡單的demo，主要界面和邏輯都是在這個js文件裏。

若是執行到第4步，出現npm install或者提示npm start的警告，能夠在當前目錄執行一下sudo npm install

第二個命令第一次執行會執行很長時間，由於須要安裝許多東西。而後再終端輸入以下命令打開工程：

open ios/AwesomeProject.xcodeproj1

mahbtekiMacBook-Pro:~ mahb$ react-native init MahbIOSProject

prompt: Directory MahbIOSProject already exist. Continue?:  (no) yes

This will walk you through creating a new React Native project in /Users/mahb/MahbIOSProject

Installing react-native package from npm...

Setting up new React Native app in /Users/mahb/MahbIOSProject

To run your app on iOS:

   Open /Users/mahb/MahbIOSProject/ios/MahbIOSProject.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd /Users/mahb/MahbIOSProject

   react-native run-android

這樣就打開了iOS的工程，運行一下就能看到模擬器中的界面。 
下面試着修改index.ios.js中的文本，而後在模擬器上按Cmd+R，這樣可以看到修改立刻就呈現到模擬器上了。

參考此文檔改寫 http://blog.csdn.net/mengxiangyue/article/details/48603707