Android React-Native系列之(一)零基礎搭建React-Native開發環境

Android React-Native系列之(一)零基礎搭建React-Native開發環境

很早就聽說過大名鼎鼎的React-Native了(不大清楚的童靴們可以自行了解，這裡不再詳述)，由於進來公司業務不是太繁忙，恰好可以有時間來學習一下RN，我們知道學習任何一門語言，搭建環境是第一步，本篇博文主要是來介紹RN的環境搭建流程。

一、安裝Homebrew

Homebrew簡稱brew，它是Mac OS X上不可或缺的軟件包管理工具，我們可以通過它來安裝或者卸載各種工具(注意：此軟件是指在Mac上安裝一些OS X沒有的UNIX工具，比如著名的wget)，形象點說就相當於一個應用商店(App Store)，我們可以通過Homebrew來安裝多種工具。Homebrew的安裝方式如下： 1、打開終端進入/usr/bin/目錄下； 2、在終端輸入如下命令：

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

這是一個官方的用來安裝Homebrew的ruby命令，之所以該命令可以直接執行是因為Mac系統上已經默認安裝了ruby，所以安裝結果如下圖所示： 3、安裝完成之後，當我們在終端輸入命令：brew -v 的時候，會輸入Homebrew的版本號相關信息，信息如下:

Homebrew 0.9.5 (git revision 5c6e; last commit 2016-03-25)

到這一步之後表明Homebrew安裝成功。

二、安裝Node.js

1、安裝nvm nvm是一個簡單的bash腳本，Node就是通過nvm來進行版本控制的，所以當我們在本地安裝了多個不同的Node版本的時候，需要安裝nvm來控制不同版本的Node之間的切換，通過Homebrew來安裝nvm，輸入如下命令：

brew install nvm

執行結果如下圖所示：
2、安裝Node.js 安裝完nvm之後，開始安裝Node.js，輸入命令如下：

nvm install node && nvm alias default node

這個時候問題出現了，提示說是找不到nvm這個命令，於是使用brew info nvm這個命令來查看一下，輸出結果如下： 提示信息所的很是清楚，就是說在根目錄下不存在.nvm目錄，在根目錄下得.bash_profile文件中添加配置文件，所以第一步在根目錄下創建.nvm目錄，然後在.bash_profile文件中導入提示命令，操作如下： 當完成以上兩步之後分別執行node -v和npm -v命令，輸出相應版本號表示安裝成功，結果如下： node和npm安裝成功後，繼續安裝node.js，輸入如下命令：

nvm install node && nvm alias default node

安裝結果如下圖所示：

三、安裝watchman和flow

1、安裝watchman watchman是Facebook的一個開源項目，它用來監視文件並記錄文件的改動情況，當文件改變時它可以出發一些操作，例如執行一些命令等。通過Homebrew安裝watchman,在終端輸入如下命令：

brew install watchman

安裝結果如下圖所示： 2、安裝flow flow是一個JavaScript的靜態類型檢查器。通過Homebrew安裝flow，在終端下輸入命令如下：

brew install flow

安裝結果如下圖所示：

四、安裝React-Native

1、在終端下輸入如下命令來安裝React-Native

npm install -g react-native-cli

運行結果如下圖所示： 顯示如上界面表示React-Native安裝成功。

五、Clone Demo工程，做測試

1、運行如下命令：

react-native init AwesomeProject

運行結果如下圖所示：
2、設置Android SDK路徑 在根目錄下用vim編輯器打開.bashrc和.bash_profile文件，輸入如下命令：

export ANDROID_HOME=你的SDK路徑

3、啟動模擬器，運行Demo工程，輸入如下命令:

react-native run-android

運行結果如下圖所示： 這個運行結果並不是Demo下運行的結果，這是我做練習用的 好了，到現在為止React-Native的環境算是搭建完成，接下來就是練習React-Native的Android端對應控件了，敬請期待......