Web | Coding | Blog | SOHO

[React 隨筆]React Native 環境建置 – 適用於 Android 開發

繼上次寫了[React 隨筆]React Native 環境建置 –  適用於 iOS 開發
但如果想要開發 Android app,那麼可以參考這篇環境建置。


本篇使用的平台為 macOS Sierra (10.12.2)
此環境建置適用於 Android 開發

注意:本篇圖多!

首先也先安裝 Homebrew,Node.js,watchman,cli工具;
若您已經參考過 iOS 開發環境,甚至已經安裝過上述 4樣,那麼可以直接安裝 Android Studio。


♥ 首先:確認  JDK 8

在安裝 Android Studio 前,請先確認是否已安裝了 JDK 8
那我們可以透過下方指令來確認版本:

javac -version

若顯示 javac 1.8.x_xxx 則表示目前已是 JDK 8。如果不是請先下載 並安裝JDK 8。

♥ 2:安裝 Android Studio

前往 Android Studio 下載頁面下載 dmg 並安裝 Android Studio
本篇示範為 Android Studio 2.2.3。

開啟下載的 dmg 檔 可見底下畫面,將 Android Studio 拖移至應用程式資料夾。
等候複製後,即可退出安裝程式。

♥ 3:運行 Android Studio

首次運行會顯示安全提示,這時點擊打開即可。

 

若出現以下視窗,點擊 第二選項 或 直接 cmd+Q 直接關閉 Android Studio,並重新開啟。

 

♥ 4:第一次執行, Setup Wizard

見以下畫面,直接點擊 Next:

 

首次執行,請選擇 Custom,再點擊 Next:

 

再來會讓你選擇 UI 主題,選好主題後點擊 Next:

 

那 站長喜歡黑色風格的UI,此時 Setup Wizard 也變成黑色風格了;
在 components 確認全部都勾選:再點擊 Next

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

 

再來是設定模擬器的記憶體可使用上限,預設為2GiB;可直接點擊 Next 下一步:

 

再來直接點擊 Finish,就可以到下一個畫面等待下載囉:

 

等待下載:

 

那下載完成後會如下圖所示:再次點擊 Finish

 

這時就會看到 Android Studio 的歡迎畫面囉~

 

♥ 5:安裝 Android 6.0 SDK 與 Build Tools

因為開發 React-Native 需要 Android 6.0 (Marshmallow) SDK,
我們在歡迎畫面的右下方「Configure」選擇 SDK Manager

點擊左側 System Settings -> Android SDK,並找到並勾選右下方的 Show Package Details (如下圖紅圈處):

為確保開發順利,請確認 Android 6.0 (Marshmallow) 以下選項都有勾選:

  • Google APIs
  • Androd SDK platform 23
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

另外 Android 7.1.1(Nougat) , Android 7.0(Nougat)可參考下圖勾選:

 

接著點擊 SDK Platform 右方 SDK Tools,並勾選右下方的Show Package Details;
預設以勾選 25.0.2,為確保開發順利請再勾選 Android SDK Build-Tools 23.0.1,

可參考下圖紅圈處:

 

確認勾選後,點擊右下方的 Apply 開始下載並安裝剛剛所勾擇的SDK與Build Tools,
這時會出現確認畫面,點擊 OK 繼續:

 

這時會跳出同意書,點擊同意 Accept 後 Next 即可等待下載:

 

等待下載:

 

耐心等待下載後,下載完成 如下圖:點擊 Finish

 

之後會回到剛剛的畫面,點擊 OK 即可。

 



若您還未安裝 Homebrew,Node.js,watchman,cli工具;請參考以下步驟:


♥ 安裝 Homebrew

到 Homebrew 安裝Homebrew。
開啟終端機並貼上這串命令:

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

此刻可能會疑惑 Homebrew是什麼,
官網上簡單地寫著「macOS 缺少的套件管理工具」。

♥ 安裝 Node.js

安裝完 Homebrew 之後,繼續在終端機中貼上這串命令,來安裝 Node.js 。

brew install node

他會顯示 Updating Homebrew…
(每次貼上brew install node 都會更新一次 Homebrew)

在這期間都會下載一些檔案等等,所以請耐心等待~
如果出現錯誤,可以再重新貼上安裝 node.js的命令,安裝到好為止。

若已安裝成功,會看到如下方的提示:

Warning: node-7.4.0 already installed, it's just not linked.

 

♥ 安裝 watchman

安裝完 Node.js 之後,繼續在終端機中貼上這串命令,來安裝 watchman 。

brew install watchman

如果正確安裝完成,當你再次貼上該命令會出現如下的提示:

Warning: watchman-4.7.0 already installed

這時或許又會疑惑,watchman 又是做什麼的?

watchman 是Facebook 出品的一個開源碼檔案監控工具,用來監控檔案更動。
React Native 利用 watchman 來偵測程式碼的變化,以便重新建構。

 

♥ 安裝 React Native CLI 工具

安裝完 watchman 之後,繼續在終端機中貼上這串命令,來安裝 cli工具 。

npm install -g react-native-cli

Node Package Manager ( Node 套件管理員,簡稱 npm)。
它能夠輕易下載並管理專案所需的任何相依套件。


以上步驟若都安裝無誤, React Native 開發環境就已經建置完成囉~

那麼如何在虛擬裝置執行 APP ,請參考底下:


♥ 設定 ANDROID_HOME 環境變數

接下來必須透過 vim 將下列內容加入 ~/.bashrc 檔案中:

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

關於如何透過 vim 加入檔案 可以參考一下 鳥哥的Linux

♥ 建立專案並執行

在終端機依序打上下方命令:

react-native init ReactNativeProject
cd ReactNativeProject
react-native run-android

第一行為建立專案的指令,建立名為 ReactNativeProject 資料夾
第二行為進入ReactNativeProject 資料夾
第三行為運行Android 虛擬機並執行app

♥ 開始編寫

  • 找到剛剛建立的ReactNativeProject 資料夾,並編輯 index.android.js
  • 編輯完成後按兩下鍵盤的 R鍵 重新整理 App 畫面

不好意思,由於站長目前沒有碰 Android ,本篇僅提供環境基本建置以及虛擬裝置執行 ReactNative app 的基本步驟;如有遇到任何問題,還請讀者自行尋找解答~ 。  -BY 小寶



React 隨筆系列 (點此閱讀所有 React 隨筆系列)
有任何問題也歡迎在底下留言,或到fb粉絲專頁發訊息給站長一起討論。


如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;
另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:

Comments

comments

如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:


© 2017 4xCode™ | Design:SC 站長

歡迎來到SC站長網站

 

本站文章不再更新,新文章將發表至

4 x ‘s Space 網站

 

謝謝您一直以來的支持,我們新網站見~

 

SC站長網站文章也會將慢慢轉移至新網站,

新網站連結 4-x.tw 點此前往,或點擊上方圖案)