React Native iOS環境搭建
感覺React Native會越來越多的公司開始研究、使用。所以周六也抽空搭建了iOS的開發環境,以便以后利用空閑的時間能夠學習一下。
廢話不多說了,下面簡單的列出步驟吧。
- 安裝Homebrew
Homebrew主要用于安裝后面需要安裝的watchman、flow
打開MAC的終端,輸入如下命令:
ruby -e "$(curl -fsSL ; </p>經過漫長的等待后,安裝完成。執行 brew doctor 命令。這是homebrew 完成后必須做的一件事,檢查homebrew各模塊是否正常
2. 安裝nvm和nodejs
nvm是用于nodejs版本管理的工具,用于安裝nodejs。
對于nvm應該可以使用brew直接安裝,但是我沒有用這個安裝,讀者可以自己使用如下命令試試:
brew install nvm
我使用的另一種方式,在終端中輸入如下的命令:
brew install node . 該命令執行后,自動裝好node和npm
這個用于安裝nodejs和npm。npm用于nodejs包依賴管理的工具。 - 安裝watchman
watchman是用于監聽文件變化的工具,應該是用于監聽文件變化,然后界面做出響應。執行如下命令:
brew install watchman
- 安裝flow
flow我個人理解的是用于靜態分析js語法錯誤的工具,能夠更早的js的語法錯誤。執行如下的命令:
brew install flow </p>到這里基本的環境就配置好了,下面創建一個iOS的例子,在終端中將目錄切換到你保存工程的目錄,然后執行如下的命令:
$ npm install -g react-native-cli $ react-native init AwesomeProject $ cd AwesomeProject/
-
在git上下載,或者直接clone項目 React native
-
npm install -g react-native-cli 安裝命令行界面工具。
-
在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
</div>
來自:http://my.oschina.net/u/615517/blog/537437 -