一、開始:
環境需求:
1.OS X-本嚮導假設您的操作系統是OS X,因爲這是開發IOS所必須的
2.推薦使用Homebrew(http://brew.sh/)來安裝Watchman和Flow
3.安裝Node.js 4.0或者更新的版本(https://nodejs.org/en/),然後直接使用brew install node安裝即可,不必按照下面的步驟即可
(1)安裝nvm ,然後運行nvm install node && nvm alias default node,這將會默認安裝最新的版本的Node.js並且設置好命令行的環境變量,這樣你可以輸入node命令來啓動Node.js的環境
4.在命令行中輸入brew install watchman,我們推薦安裝watchman,否則你可能會遇到一個Node.js監視文件的系統Bug
5.如果你希望使用flow來爲你的JS代碼加上類型檢查,那麼在命令行中輸入brew install flow來安裝flow
我們推薦您定期運行brew update && brew upgrade來保持幾個程序爲最新版本
I二、Ios 開發環境的準備:你需要Xcode7.0或者更高的版本
1.進入終端
2.執行命令 npm install -g react-native-cli
3.react-native init AwesomeProject (這個生成文件需要等很久時間)
官方文檔上說這樣環境是可以配置成功的。但是實際上我在執行第2步的時候出現了
一大堆npm error (如下圖所示)
剛開始我以爲是我沒有掛***但是看了下,我掛了***但是還是出錯。
註釋:由於衆所周知的網絡原因,react-native命令從npm官方源拖代碼時會遇到麻煩,所以
我們需要將npm替換爲國內的鏡像(我用的淘寶鏡像然後就成功了)
npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
另外執行init的時候千萬不養加上sudo,否則會導致一系列的權限問題。
生成的空項目如下圖所示(如果是這樣的文件結構說明你的環境是搭配成功的):
三、運行iOS應用
1.$ cd AwesomeProject
2.用XCode打開ios/AwesomeProject.xcodeproj並點擊Run按鈕。
3.使用你喜歡的文本編輯器打開index.ios.js並隨便改上幾行。
4.在iOS Emulator中按下-R就可以刷新APP並看到你的最新修改!
5.在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。
四、安卓環境的搭建(這裏只說在Mac上的,windows的爲實踐)
1. mac上如果已經安裝了Xcode,那麼Git也就會隨之安裝了,否則請使用homebrew進行安裝 (命令: brew install git)
2.安裝Android SDK (MAC終端上的命令:brew install android-sdk)
3.定義安卓環境變量
3.1 MAC,往你的~/.bashrc,~/.bash_profile或者你終端所用的其他配置文件增加以下的內容(註釋:~表示用戶的目錄,即/User/你的用戶名/,而小數點開頭的文件是在Finder中的隱藏文件,並且這兩個文件有可能沒被創建。請在終端下使用sudo vi ~/.bashrc命令創建或者編輯。如果不熟悉vi操作,請參考http://www.eepw.com.cn/article/48018.htm)
#如果你是通過Homebrew安裝的,則加入下列的路徑
export ANDROID_HOME=/usr/local/opt/android-sk
#否則可能是(具體視你的sdK放在哪裏)
export ANDROID_HOME=~/Library/Android/sdk
注意:是你的android-sdk的安裝路徑,但是有人會問我不知道我android sdk (大神請直接繞過)路徑在哪裏,那你進入終端輸入android 就會彈出路徑了(SDK path:)
3.2設置SDK
3.21打開Android SDK Manager(Mac用戶在終端輸入android)
3.22選擇以下的項目
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
3.23點擊Install Packges (國內的用戶推薦使用淘寶鏡像)
3.3使用google官方模擬器
1.打開Android SDK Manager(參見"設置SDK"一步)
選中以下項目:
Intel x86 Atom System Image (for Android 5.1.1 - API 22)
Intel x86 Emulator Accelerator (HAXM installer)
運行android avd並且點擊Create... (譯註:在Windows系統下,android.bat在Android SDK的tools文件夾下,請注意設置PATH環境變量以便於使用)
五、運行成功截圖