跳至主要內容
版本：v8

您的第一個 Ionic 應用程式：React

Ionic 最棒的地方在於，您可以使用單一程式碼庫，僅使用 HTML、CSS 和 JavaScript 就能為任何平台建置應用程式。請跟隨我們逐步建立一個真實的應用程式，學習 Ionic 應用程式開發的基本原理。

這是完成的應用程式在所有 3 個平台上運行的樣子

我們將建置的內容​

我們將建立一個照片庫應用程式，能夠使用裝置的相機拍照、在網格中顯示照片，並將照片永久儲存在裝置上。

重點包括

  • 一個基於 React 的程式碼庫，使用 Ionic Framework UI 元件，可在網頁、iOS 和 Android 上運行。
  • 使用 Ionic 官方原生應用程式執行階段 Capacitor 部署為原生 iOS 和 Android 行動應用程式。
  • 由 Capacitor 相機、檔案系統和 偏好設定 API 提供支援的照片庫功能。

請在 GitHub 上找到本指南中引用的完整應用程式程式碼。

下載所需工具​

立即下載並安裝這些工具，以確保獲得最佳的 Ionic 開發體驗

  • 用於與 Ionic 生態系統互動的 Node.js。 在此下載 LTS 版本。
  • 用於...編寫程式碼的 程式碼編輯器！我們是 Visual Studio Code 的粉絲。
  • 命令列介面/終端機 (CLI):
    • Windows 使用者：為了獲得最佳的 Ionic 體驗，我們建議以管理員模式執行內建的命令列 (cmd) 或 Powershell CLI。
    • Mac/Linux 使用者，幾乎任何終端機都可以使用。

安裝 Ionic 工具​

在命令列終端機中執行以下命令以安裝 Ionic CLI (ionic)、native-run（用於在裝置和模擬器/模擬器上執行原生二進位檔）以及 cordova-res（用於產生原生應用程式圖示和啟動畫面）

注意

若要在 Visual Studio Code 中開啟終端機，請前往「終端機」->「新增終端機」。

npm install -g @ionic/cli native-run cordova-res
注意

-g 選項表示全域安裝。當套件全域安裝時，可能會發生 EACCES 權限錯誤。

請考慮設定 npm 以在沒有提高權限的情況下全域運作。如需更多資訊，請參閱解決權限錯誤。

建立應用程式​

接下來，建立一個使用「Tabs」入門範本的 Ionic React 應用程式，並新增 Capacitor 以取得原生功能

ionic start photo-gallery tabs --type=react --capacitor

這個入門專案隨附三個預先建置的頁面，以及 Ionic 開發的最佳實務。有了已就位的常用建置區塊，我們可以輕鬆地新增更多功能！

接下來，變更為應用程式資料夾

cd photo-gallery

接下來，我們需要安裝必要的 Capacitor 外掛程式，以使應用程式的原生功能運作

npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem

PWA 元素​

某些 Capacitor 外掛程式（包括 Camera API）透過 Ionic PWA 元素程式庫提供基於 Web 的功能和 UI。

它是一個獨立的相依性，因此請接著安裝它

npm install @ionic/pwa-elements

安裝後，在您選擇的程式碼編輯器中開啟專案。

接下來，編輯 src/main.tsx 來匯入 @ionic/pwa-elements。

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader before the render call
defineCustomElements(window);

就這樣！現在是好玩的部分了 - 讓我們看看應用程式的實際運作情況。

執行應用程式​

在您的 shell 中執行此命令

ionic serve

瞧！您的 Ionic 應用程式現在正在網頁瀏覽器中執行。您的大部分應用程式都可以在瀏覽器中直接建置和測試，大幅提高了開發和測試速度。

有三個索引標籤。按一下 Tab2 索引標籤。它是一個空白的畫布，也就是轉換為照片庫的完美地點。Ionic CLI 具有即時重新載入功能，因此當您進行變更並儲存時，應用程式會立即更新！

Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.

開啟 /src/pages/Tab2.tsx。我們會看到

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Tab 2</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
  <!-- some filler -->
  </IonContent>
</IonPage>

IonHeader 代表頂部導覽和工具列，標題為「Tab 2」。讓我們將其重新命名

<IonTitle>Photo Gallery</IonTitle>

我們將應用程式的視覺方面放入 <IonContent>。在此情況下，我們將在此處新增一個按鈕，該按鈕會開啟裝置的相機，並顯示相機擷取的影像。首先，新增一個浮動操作按鈕 (FAB)。首先，更新頁面頂部的匯入，以包含相機圖示以及我們稍後將使用的一些 Ionic 元件

import { camera, trash, close } from 'ionicons/icons';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonFab,
  IonFabButton,
  IonIcon,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
  IonActionSheet,
} from '@ionic/react';

然後，將 FAB 新增至頁面底部。使用相機影像作為圖示，並在此按鈕按一下時呼叫 takePhoto() 函式（稍後實作）

<IonContent>
  <IonFab vertical="bottom" horizontal="center" slot="fixed">
    <IonFabButton onClick={() => takePhoto()}>
      <IonIcon icon={camera}></IonIcon>
    </IonFabButton>
  </IonFab>
</IonContent>

我們將在稍後建立 takePhoto 方法和使用相機和其他原生功能的邏輯。

接下來，開啟 src/App.tsx，從匯入中移除 ellipse 圖示，並改為匯入 images 圖示

import { images, square, triangle } from 'ionicons/icons';

在索引標籤列 (<IonTabBar>) 內，將中間索引標籤按鈕的標籤變更為「照片」，並將 ellipse 圖示變更為 images

<IonTabButton tab="tab2" href="/tab2">
  <IonIcon icon={images} />
  <IonLabel>Photos</IonLabel>
</IonTabButton>
注意

在 Ionic React 中，圖示會從 ionicons/icons 單獨匯入，並設定為圖示屬性。

這只是我們能用 Ionic 做出的酷炫功能的一小部分。接下來，我們將在網頁上實現拍照功能，然後再為 iOS 和 Android 進行構建。

目錄

編輯此頁面