1. 程式人生 > >環境配置:React Native 開發環境配置 For Android

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

React Native 是FaceBook開源的一個專案,FaceBook希望可以用寫 Web App 的方式去寫 Native App。它可以讓我們用JS和React來開發應用,使用React Native可以通吃Android 和 IOS ,以及Web,僅僅需要一份業務邏輯程式碼就可以來建立我們的應用。

起源

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

而衍生的 React Native 專案,希望用寫 Web App 的方式去寫 Native App。這樣同一組人只需要寫一次 UI ,就能同時執行在伺服器、瀏覽器和手機上。FaceBook最早釋出的關於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

安裝完了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 是 facebook 的一個開源專案,它開源用來監視檔案並且記錄檔案的改動情況,當檔案變更它可以觸發一些操作,例如執行一些命令等等。
  • 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環境變數的配置

  1. 啟動Terminal終端工具
  2. 輸入cd ~/ 進入當前使用者的home目錄
  3. 建立:
touch .bash_profile
  1. 開啟並編輯:
open .bash_profile
  1. 在檔案中寫入以下內容:export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools
    友情提示:上述路徑,請換成自己電腦上的SDK所在路徑
  2. 執行如下命令:
source .bash_profile 
  1. 驗證:輸入adb回車。如果未顯示command not found,說明此命令有效,環境便亮設定完成。

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

初始化專案

react-native init AwesomeProject

上面的AwesomeProject這個專案名字,你可以自己隨意定義,自己命名,沒有限制。

執行專案

  • 切換到AwesomeProject的主目錄
  • 執行專案命令
react-native run-android
  • 我們使用編輯器開啟和修改index.android.js檔案,調出模擬器選單鍵,選擇重新載入 js 即可看到變化。
    啟動後,模擬器效果圖:

到這裡我們就把環境配置講完了,關於windows上的安裝,我會給大家發篇資料或者視訊的。