react-native環境搭建

轉載鏈接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/

一、開始:

 環境需求:

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"一步)

  1. 選中以下項目:

  • Intel x86 Atom System Image (for Android 5.1.1 - API 22)

  • Intel x86 Emulator Accelerator (HAXM installer)

點擊"Install Packages"配置硬件加速(HAXM),否則模擬器會運行的相當緩慢。創建Android虛擬設備(AVD):
  • 運行android avd並且點擊Create... (譯註:在Windows系統下,android.bat在Android SDK的tools文件夾下,請注意設置PATH環境變量以便於使用)

 

五、運行成功截圖

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章