ReactNativeiOS環境搭建

行者武松發表於2017-06-03
ReactiOS

感覺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

文章轉載自 開源中國社群[https://www.oschina.net]


相關文章