React Native / Expo 介紹

更新 發佈閱讀 5 分鐘

本篇主題是 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)等好用功能。



▍ 建立專案

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

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

建立專案後可至 app.json 修改資料

slug 命名建議

可以把 slug 想成是 GitHub Repo 名稱或代號

  • 英文小寫
  • 不含空格或特殊符號(可用 -_
  • 保持簡潔易識別
raw-image


▍啟動專案

1. 確保手機和電腦在相同網路環境。

2. VS code 終端機輸入

npx expo start

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

raw-image

3. 手機安裝 Expo Go App(Android / iOS

4. Android 使用 Expo Go App,iOS 使用相機掃描終端機上的 QRcode,就能開啟預覽。只要程式碼改變,App 上的畫面也會跟著變化。

raw-image

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


▍Build 專案

開發者可以使用 EAS 做線上 build 和發布到 App 平台,是個很方便的工具。

使用 EAS 並不是必要的,這關乎到你開發項目中是否有 EAS 無法編譯的功能,例如推播功能若串接 Firebase,就無法用 EAS 編譯。

  1. 先進入 EAS 註冊帳號
  2. 回到 VS code 終端機
eas login // 登入
eas build:configure // 編譯至expo eas 雲端
  1. 檢查 EAS 網站上的編譯進度
  2. 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 出完整功能的。

raw-image

在 Windows 電腦輸入 npx expo prebuild 後,app.json 檔案的 android 會出現 package,推薦修改格式可以參考 com.<公司或開發者名稱>.<產品或應用名稱>

命名規則

  • 全小寫
  • 僅限英文字母、數字、底線(不可開頭)
  • 至少兩層(建議三層以上)
  • 不能與其他已上架 App 相同(否則 Google Play 不讓你上架)
raw-image
留言
avatar-img
Ann Chou的沙龍
19會員
32內容數
從藝術領域轉職到前端工程師,喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
Ann Chou的沙龍的其他內容
2025/04/27
這篇文章說明如何在 Windows 電腦上設定 Android 推播通知,包含使用 Expo 串接 Firebase 和 Azure 的步驟。文章涵蓋 Firebase 和 Azure 的設定,以及 Android Studio 和 JDK 的配置。
2025/04/27
這篇文章說明如何在 Windows 電腦上設定 Android 推播通知,包含使用 Expo 串接 Firebase 和 Azure 的步驟。文章涵蓋 Firebase 和 Azure 的設定,以及 Android Studio 和 JDK 的配置。
2025/04/20
介紹在 React Native / Expo 中實作推播通知的方式,並比較使用 Expo Notifications 與整合 Firebase Cloud Messaging(FCM)或 Azure Notification Hubs 的差異。
2025/04/20
介紹在 React Native / Expo 中實作推播通知的方式,並比較使用 Expo Notifications 與整合 Firebase Cloud Messaging(FCM)或 Azure Notification Hubs 的差異。
2025/04/19
開發 App 的軟體有很多種,例如 Ionic、React Native、Flutter…。 不過我們在決定要使用哪一套工具前,可以先了解 App 要使用多少手機原生功能、人力技術、效能等資訊。
2025/04/19
開發 App 的軟體有很多種,例如 Ionic、React Native、Flutter…。 不過我們在決定要使用哪一套工具前,可以先了解 App 要使用多少手機原生功能、人力技術、效能等資訊。
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News