React Native - Android 環境安裝

react native for android,windows 環境入門起手。

 

大約在去年 2015 九月時,Android 部分終於釋出了,

最近看到有些使用 React Native 的作品,相當不錯,為之動容啊~

在環境部屬的部分,經過各種 error 的摧殘,才搞定一番。

 

本篇為教學如何於 Windows 系統上,

使用 React Native,進行 Android 的開發。

 

 

React Native 套件安裝

本篇為假設你已經安裝好 node.js

讓我們先安裝 react native (-g 全域安裝)套件吧~

npm install -g react-native-cli

 

如還沒安裝,可參考此篇教學 Node.js - Install(nvm)

 

 

Android Studio 下載

Android 官網 下載,並安裝好。

Tools:

  • Android SDK Tools
  • Android SDK Platform-Tools
  • Android SDK Build-tools (務必將 Rev. 23 的裝好)

 

Android API:

  • SDK Platform
  • Image

如果使用此提供的模擬器(AVD Manager),務必將相關套件裝齊。

或使用 Genymotion 模擬器

 

Extras 部分:

  • Android Support Repository


 

 

Java SE Development Kit 8 下載

Oracle 下載安裝,如果已經安裝了,請跳過。

 

 

Windows 環境設定

至電腦-系統內容,選擇環境變數。

新增一個系統變數:

ANDROID_HOME

「變數值」請指定安裝時候 sdk 的位置,為了方便,我把 sdk另外安裝在 D:\

編輯 Path 系統變數,增加以下內容

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

在編輯 Path,請小心修改,或是先備份好原有「變數值」。

 

 

建立專案 Create Project

建立一份專案,命為 myapp,建立約數分鐘,耐心等候

react-native init myapp

 

完成後進入目錄

cd myapp

 

裡面可看見已經幫我們部屬好 android、ios 的環境了,

index.android.js 則為 app 開啟時的主畫面內容(Main)

 

環境執行、安裝

react-native run-android

或是 debug 模式

react-native run-android -debug

 

此時你可透過模擬器或是實體外接手機進行執行安裝

使用「模擬器」若執行失敗,極大可能是你的版本問題沒安裝好,

務必將 sdk 的 Packages 安裝完整。

 

成功時,則可看見預設專案的內容如下(本範例使用實體手機):

Welcome to React Native!

 

 

以上為簡易環境部屬,詳細步驟可於官方文件查看

React-Native

 

 

 

 

 

有勘誤之處,不吝指教。ob'_'ov