React Native - 2018 Android 環境安裝(Windows )

現在放棄的話,專案就結束了哦

 

 

 

沒想到過了兩年又回來寫 RN

回顧一下自己兩年前寫的文章

 

不禁感慨...

QAQ 時間過好快!!!

 

由於時間緊迫,這篇就作為快速筆記。

 

 

 

一、前言

很久沒寫 RN,因為一些因素所以要回來寫

電腦兩年也當然經歷了重灌,所有環境都早已重置。

 

這篇的系統是在 Windows 的 Android 環境建置,

如果您使用視窗捧油,歡迎往下閱讀~

 

 

 

二、安裝

為了快速筆記,說明就不詳細解釋了,

非常時期結束再補充。

 

安裝流程為官方 getting-started

但專案啟動後會有些問題,建議參考本篇流程。

 

 

2.1 安裝 Chocolatey 

請先到官網認識一下。

 

接著使用系統管理員開啟終端機輸入:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
上述指令可於官網直接複製

 

確認安裝是否成功:

choco -v

 

更新 chocolatey

choco upgrade chocolatey
安裝成功後最好重開終端機,以確保吃到設定。

 

 

2.2 安裝 Node, Python2, JDK

安裝 nodejspython2jdk

choco install -y nodejs.install python2 jdk8

 

請依據個人電腦所缺少的套件進行安裝,

由於筆者環境已經有 node.js,因此指令為:

choco install -y python2 jdk8

 

choco 安裝好處就是可以省掉很多環境設定的步驟!!!

 

 

2.3 安裝 React Native CLI

我們先從官網的範例開始著手,確保基本運作。

由於會寫 RN 的人,想必都是 node.js 高手,因此 npm 就不贅述

接著安裝 CLI:

npm install -g react-native-cli

 

確認是否安裝成功:

react-native -v

 

 

2.4 安裝 Android Studio

原本筆者也想說偷懶,看能不能少裝就少裝些什麼

...最後還是乖乖安裝整套
 

請到 Android Studio 官網 下載,

點選 Download Android Studio 並同意授權

 

下一步到底! 然後安裝完成!

 

接著啟動 Android Studio

 

展開 Configure,選擇 SDK Manager

 

由於筆者環境已經設定過,這時候應該會跳出視窗,

提示使用者選擇 Android SDK Location 的所在目錄,

 

看大家想放哪都可,務必記住,環境設定會用到!

筆者是放在:

C:\Android\sdk

 

我知道官方這麼寫著:

勾選要安裝的項目:

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

 

不用擔心,請繼續往下看。(真的很機掰模糊難懂)

 

在畫面中可以看到有三個頁籤(Tab):

 

原則上我們只會動到 SDK Platforms,其他的頁籤項目都已經幫我們預設打勾

這邊請依據你的開發平台(即你的手機或模擬器的版本)進行勾選,

由於筆者預期會開發 Android 6Android 7Android 8,因此勾選這三個。

 

如果你也擔心其他頁籤會不會有意外漏掉,

,別擔心,一併會貼給您看看的!!

 

SDK Platforms

 

SDK Tools

 

SDK Update Sites

 

接著就開始漫長的安裝之旅吧~~~

安裝完畢就可以關閉囉!

 

#等待 #思考人生 #漫長 #期待 #落空

 

 

2.5 環境設定 ANDROID_HOME

新增環境變數,變數值請根據 sdk 所在目錄。

#變數名稱
ANDROID_HOME
#變數值
C:\Android\sdk

 

如果你沒更改過 sdk 目錄,預設應該會是在:
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

 

給文組的圖解步驟如下:

 

 

2.6 安裝模擬器

這邊推薦 Genymotion,請下載安裝~

由於筆者電腦也沒安裝 VirtualBox,因此下載類型選擇 with VirtualBox

請記得註冊帳號。

 

安裝過程下一步到底,完成後開啟模擬器。

選擇 SettingsADB,接著選擇你的 sdk 所在目錄。

這邊會要求登入,記得勾選 personal 方案

 

接著建立一個模擬器,乳下方結果:

 

完成建立後就啟動它吧~

 

 

2.7 建立新的 APP 專案

開始前,建議先安裝 Yarn!非宗教問題!

 

有了模擬器後,就可建立一個範例專案,隨意取名為「AwesomeProject」。

react-native init AwesomeProject

進入目錄。 

cd AwesomeProject

啟動 APP 專案,並以 Android 環境啟動。

react-native run-android
記得要啟動手機模擬器

 

 

 

 

 

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈!

 

先學會怎麼,再學會怎麼站起

如果你沒問題且很順利....

哼!你可以滾了。

 

建議繼續往下看...

 

 

 

三、啟動失敗的種種情況

以下的狀況通常會是依序發生的唷~

 

> Could not install the app on the device, read the error above for details.

發生了上述問題,根據巨量資料分析結果,解法如下:

  1. 確認有沒有啟動模擬器
  2. 移除模擬器上你後來部署進去的 APP
  3. 參照下方作法

 

新增環境變數於 path

platform-tools 位於你的 sdk 所在位置。

C:\Android\sdk\platform-tools

 

執行以下指令:

adb reverse tcp:8081 tcp:8081

接著再去執行一次看看:

react-native run-android

 

等待.....

 

如果又失敗,則改執行以下指令,並請於專案當前目錄執行:

chmod 755 android/gradlew

或是:

chmod 755 .

 

如果你不能使用 chmod,請下載 cmder

或是參考保哥的文章:

 

 

哦哦哦終於 build 成功惹!!!

快去看看模擬器~

 

 

 

 

 

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈!

 

先學會怎麼,再學會怎麼站起

 

如果你沒問題很順利....

哼!你可以滾了。

 

 

> The development server returned response error code: 500

如果你遇到這葛問題,不要驚慌,

目前最新版本會遇到這葛問題,請手動降級版本

 

修改 package.json

  • 將 react-native 版本改為:0.55.2
  • 將 babel-preset-react-native 版本改為:4

 

完整範例如下(主要改那兩個版本即可):

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.55.2"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "4",
    "jest": "23.5.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

 

接著重新安裝:

yarn install

 

如果使用 npm install,請乖乖移除整個 node_modules,再下指令重新安裝。

 

哈哈哈!就叫你先安裝 Yarn 了吧!

 

降級後,讓我們重新啟動吧~

react-native run-android

 

 

 

 

 

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈!

 

 

教練說過:

 

 

> Unable to load script from assets index.android.bundle on windows

這邊的解法,我們不參考來源的最佳解,

我們參考下方 Nidhi Shah 所寫的解決方法。

 

你應該會很熟悉,就是剛剛的指令:

adb reverse tcp:8081 tcp:8081

接著我們再重新啟動:

react-native run-android

 

 

太港動喇~~~~~

灑花🌼🌼 灑花🌼🌼 灑花🌼🌼

 

 

 

四、react-native-starter-kit 範例

這裡使用 react-native-starter-kit 作為其他範例,

這葛專案集合了 React Native + React (web) & Firebase (optional) ,

在開發上可以快速整合三平台並內建搭載 firebase

 

將專案 clone 下來。

git clone https://github.com/mcnamee/react-native-starter-kit.git

進入專案。

cd react-native-starter-kit

安裝依賴,或使用 npm install(宗教問題)。

yarn install

啟動專案。

yarn start

出現提示畫面時,我們按下 a

 

如果有畫面,初次使用請依照指示設定。

 

順利就可以看到初始畫面囉~

 

如果有發生 port 的一些占用問題,

請重新啟動 模擬器或是再次輸入 npm start 即可。

 

 

 

再次讓肝偉大吧! 趕快起身上廁所...

 

 

 

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈!

笑三*!

 

 

 

※. 參考資料

 

 

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