環境配置：React Native 開發環境配置 For Android

z4612725 8年前發布 | 6K 次閱讀 ReactNative 移動開發 React Native

（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，不要耽誤大家寶貴時間）

React Native 是非死book開源的一個項目，非死book希望可以用寫 Web App 的方式去寫 Native App。它可以讓我們用JS和React來開發應用，使用React Native可以通吃Android 和 IOS ,以及Web,僅僅需要一份業務邏輯代碼就可以來創建我們的應用。

起源

React Native 是由 React 衍生出來的，而 React 起源于非死book 的內部項目，因為非死book對市場上所有 JavaScript MVC 框架，都不太滿意，就決定自己寫一套，用來架設自己的 Instagram 的網站。等做出來以后，發現這套東西很不錯，而且好用，就在2013年5月開源了。

而衍生的 React Native 項目，希望用寫 Web App 的方式去寫 Native App。這樣同一組人只需要寫一次 UI ，就能同時運行在服務器、瀏覽器和手機上。非死book最早發布的關于React Native是針對IOS的，而React Native for Android是在去年也就是2015年9月15日開源發布的。現階段React Native的體驗雖然已經很不錯了，只能說很接近原生應用，但是還是不能達到Native App的體驗。所以它很火，將來的事，我們將來說，但是目前已經非常火了，多門技術，多條路。我們也應該學學了。

環境搭建

因為我用的是macbook，所以這次環境搭建是根據mac電腦來說的，不過大家放心，針對windows電腦的環境搭建，我會分享給大家一篇文章或者視頻的，不會忘了你們的。

Homebrew安裝

Homebrew是一款自由及開放源代碼的軟件包管理系統，用以簡化Mac OS X系統上的軟件安裝過程，Homebrew以Ruby語言寫成，針對于Mac OS X操作系統自帶Ruby的版本。默認安裝在/usr/local，由一個核心git版本庫構成，以使用戶能更新Homebrew。是 OS X 不可或缺的套件管理器。

安裝之前，你可以先檢查一下電腦上是否已經安裝了Homebrew，檢查方式如下：

在終端執行下列命令：

brew -v

如果已經安裝了，就像下圖一樣，顯示版本號。

如果沒有安裝，那就可以用下面這種方式，進行安裝，在終端上直接輸入下面的命令即可：

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

Node.js的安裝

Node.js?是一個基于Chrome V8 引擎的 JavaScript 運行時。 Node.js 使用高效、輕量級的事件驅動、非阻塞 I/O 模型。Node.js 之生態系統是目前最大的開源包管理系統。我們都知道React Native是需要使用js開發的，所以Node.js是必不可少的安裝。

安裝Node.js也很簡單，如下：

nvm install node && nvm alias default node

可能你發現了，在Terminal終端上使用的命令是nvm，如果你沒有安裝nvm是會提示command not found的，所以我們還得先安裝nvm。

nvm 是 Node.js 的版本管理器，可以輕松安裝各個版本的 Node.js 版本。安裝方式如下：

我們可以通過Homebrew安裝：

brew install nvm

或者通過這里的方式安裝，地址：https://github.com/creationix/nvm#installation

安裝完了nvm，我們這里最好配置一下環境變量到.bash_profile文件，因為如果不配置的話，容易出現這個錯誤 nvm command not found 。

配置方式如下：

export NVM_DIR="/Users/loonggg/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

檢查是否安裝好了node和nvm我們可以通過如下方式：

bogon:~ loonggg$ node -v
v5.10.1
bogon:~ loonggg$ npm -v
3.8.3

安裝watchman 和 flow

Watchman 是非死book 的一個開源項目，它開源用來監視文件并且記錄文件的改動情況，當文件變更它可以觸發一些操作,例如執行一些命令等等。
flow是一個Javascript靜態類型檢查器。Flow為Javascript添加了靜態類型檢查，以提高開發效率和代碼質量。

安裝方式如下：

brew install watchman
brew install flow

安裝React Native

我們使用npm進行安裝，如下：

npm install -g react-native-cli

安裝完React Native之后，要想運行或者初始化一個項目，然后運行到模擬器或者真機，我們需要搭建一個Android或者ios開發環境，我這里只介紹android，相信想學習React Native的同學，電腦上都基本上有了Android的開發環境。但是可能會有坑，有一個大坑就是得配置SDK的環境變量：ANDROID_HOME。

SDK環境變量的配置

啟動Terminal終端工具
輸入cd ~/ 進入當前用戶的home目錄
創建：
```
touch .bash_profile
```
打開并編輯：
```
open .bash_profile
```
在文件中寫入以下內容：export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools

友情提示：上述路徑，請換成自己電腦上的SDK所在路徑
執行如下命令：
```
source .bash_profile
```
驗證：輸入adb回車。如果未顯示command not found，說明此命令有效，環境便亮設置完成。

創建我們的第一個React Native應用

初始化項目

react-native init AwesomeProject

上面的AwesomeProject這個項目名字，你可以自己隨意定義，自己命名，沒有限制。

運行項目

切換到AwesomeProject的主目錄
運行項目命令
```
react-native run-android
```
我們使用編輯器打開和修改index.android.js文件，調出模擬器菜單鍵，選擇重新載入 js 即可看到變化。

啟動后，模擬器效果圖：

到這里我們就把環境配置講完了，關于windows上的安裝，我會給大家發篇資料或者視頻的，在公眾號對話框里回復關鍵字：“ RN環境配置 ”獲取windows版的環境配置。

來自：http://mp.weixin.qq.com/s?__biz=MjM5NDkxMTgyNw==&mid=2653058212&idx=1&sn=2bc90e53add30551b484ec3860dfc1c0&scene=0#wechat_redirect

本文由用戶 z4612725 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1475998450444.html

ReactNative 移動開發 React Native