React Native / Expo 介紹

本篇主題是 React Native 小介紹。
因為先前在測試 Ionic + PWA 開發，對相機功能實在太失望，結果現在我開始用 React Native / Expo 了。
如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App，可以先閱讀 App 種類概述。

React Native & Expo 概述

React Native 是一個由 Facebook 開發的開源框架，讓開發者可以使用 JavaScript（通常是搭配 React）來開發原生 iOS 和 Android App。它會將 JS/React 程式碼轉換為原生的 UI 元件。
Expo 是一個基於 React Native 的應用程式開發平台，提供即時預覽（Expo Go）和線上建置（EAS build）、原生模組功能（推播、相機、GPS）等好用功能。

安裝 React Native & Expo

開啟 VS code 終端機輸入安裝指令

1	npx create-expo-app@latest

接著會有一連串問題，

- Ok to proceed? (y)  y
- Creating an Expo project using the default template. //預設使用default模板

//提示如果要使用模板指令 -- template 打上名稱
To choose from all available templates pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples pass in the --example arg:
  $ npx create-expo-app --example

啟動專案

確保手機和電腦在相同網路環境。
VS code 終端機

1	npx expo start

終端機將出現 QRcode 和 Web localhost 網址，localhost 網址可直接點擊預覽，但有些功能只支持在手機上看。

手機安裝 Expo Go App（Android / iOS）
安裝後使用手機掃描終端機上的 QRcode，就能開啟預覽。只要程式碼改變，App 上的畫面也會跟著變化。

或者你也可以安裝 Expo Orbit，在電腦預覽 Android 和 iOS 運行。

Build 專案

開發者可以使用 EAS 做線上 build 和發布到 App 平台，是個很方便的工具。
使用 EAS 並不是必要的，這關乎到你開發項目中是否有 EAS 無法編譯的功能，例如推播功能若串接 Firebase，就無法用 EAS 編譯。

先進入 EAS 註冊帳號
回到 VS code 終端機

1 2	eas login // 登入 eas build:configure // 編譯至expo eas 雲端

檢查 EAS 網站上的編譯進度
EAS 編譯完成後會提供一個預覽網址，使用 Expo Go 開啟

React Native / Expo Workflow

因為在 Build 專案的段落有提到無法用 EAS 編譯的情境，所以也來介紹 Expo 的 Workflow 吧。
原本的 Expo 是沒有 android 或 ios 資料夾的，但 Firebase 需要經過額外設定流程，所以必須透過 npx expo prebuild 將 workflow 切換至 Bare Workflow，此時便會依照你目前開發電腦的系統在專案中產生 android 或 ios 資料夾。而未來要測試這個推播功能，也無法使用 Expo 原生提供的辦法測試，之後再寫一篇新文介紹推播。
如果你有其中一項功能是必須透過非 EAS build 的方式執行，其他功能也還是可以用 EAS build 做測試！只是 EAS 無法 build 出那些要使用 android 或 ios 資料夾的功能而已。而 Android Studio、Xcode 等非 EAS 方法是可以 build 出完整功能的。

— 文章同步發佈於 Vocus