使用即時重新載入快速開發應用程式

到目前為止，我們已經了解開發一個能在任何地方運作的跨平台應用程式是多麼容易。開發體驗相當快速，但如果我告訴您還有更快的方法呢？

我們可以使用 Ionic CLI 的即時重新載入功能，以提高我們建構 Ionic 應用程式時的生產力。啟用時，即時重新載入會在偵測到應用程式中的變更時，重新載入瀏覽器和/或 WebView。

即時重新載入

還記得 ionic serve 嗎？那是在瀏覽器中運作的即時重新載入，讓我們能夠快速迭代。

我們也可以在 iOS 和 Android 裝置上開發時使用它。當編寫與原生外掛程式互動的程式碼時，這特別有用。由於我們需要在裝置上執行原生外掛程式碼才能驗證其是否正常運作，因此擁有一種能夠快速編寫程式碼、建置和部署程式碼，然後測試程式碼的方法，對於保持我們的開發速度至關重要。

讓我們使用即時重新載入來實作相片刪除功能，這是我們相片庫功能中缺少的部分。選擇您選擇的平台（iOS 或 Android），並將裝置連接到您的電腦。接下來，根據您選擇的平台，在終端機中執行任一指令

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

即時重新載入伺服器將會啟動，如果尚未開啟，也會開啟選擇的原生 IDE。在 IDE 中，按一下「播放」按鈕，將應用程式啟動到您的裝置上。

刪除相片

在即時重新載入執行且應用程式在您的裝置上開啟的情況下，讓我們實作相片刪除功能。開啟 Tab2.tsx，然後從 React 匯入 useState，並從 usePhotoGallery 掛鉤匯入 UserPhoto

import React, { useState } from 'react';
import { usePhotoGallery, UserPhoto } from '../hooks/usePhotoGallery';
// other imports

接下來，參考 deletePhoto 函式，我們稍後將建立該函式

const { photos, takePhoto, deletePhoto } = usePhotoGallery();

接下來，新增一個狀態值來儲存有關要刪除的相片的資訊

const [photoToDelete, setPhotoToDelete] = useState<UserPhoto>();

當使用者按一下影像時，我們將會透過將狀態值變更為相片來顯示動作表。更新 <IonImg> 元素為

<IonImg onClick={() => setPhotoToDelete(photo)} src={photo.webviewPath} />

接下來，新增一個 IonActionSheet 對話方塊，其中包含刪除選取的相片或取消（關閉）對話方塊的選項。我們將根據 photoToDelete 是否有值來設定 isOpen 屬性。

在 JSX 中，將下列元件放在關閉的 </IonContent> 標籤之前。

<IonActionSheet
  isOpen={!!photoToDelete}
  buttons={[
    {
      text: 'Delete',
      role: 'destructive',
      icon: trash,
      handler: () => {
        if (photoToDelete) {
          deletePhoto(photoToDelete);
          setPhotoToDelete(undefined);
        }
      },
    },
    {
      text: 'Cancel',
      icon: close,
      role: 'cancel',
    },
  ]}
  onDidDismiss={() => setPhotoToDelete(undefined)}
/>

在上方，我們新增了兩個選項：呼叫 deletePhoto 函式的 Delete（稍後新增）和 Cancel，當給予「取消」角色時，將自動關閉動作表。設定 onDidDismiss 函式並在模態消失時將我們的 photoToDelete 設定回未定義也很重要。這樣一來，當按一下另一個影像時，動作表會注意到 photoToDelete 的值發生變更。

接下來，我們需要實作 usePhotoGallery 掛鉤將提供的 deletePhoto 方法。開啟檔案並將下列函式貼到掛鉤中

const deletePhoto = async (photo: UserPhoto) => {
  // Remove this photo from the Photos reference data array
  const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);

  // Update photos array cache by overwriting the existing photo array
  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });

  // delete photo file from filesystem
  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
  await Filesystem.deleteFile({
    path: filename,
    directory: Directory.Data,
  });
  setPhotos(newPhotos);
};

首先，從相片陣列中移除選取的相片。然後，我們使用 Capacitor Preferences API 來更新相片陣列的快取版本。最後，我們使用 Filesystem API 刪除實際的相片檔案本身。

請務必傳回 deletePhoto 函式，使其成為我們公開的掛鉤 API 的一部分

return {
  photos,
  takePhoto,
  deletePhoto,
};

儲存此檔案，然後再次輕觸相片並選擇「刪除」選項。這次，相片已刪除！使用即時重新載入可以更快地實作。💪

在本教學的最後一部分，我們將逐步說明用於建置和部署應用程式到使用者裝置的 Appflow 產品的基本知識。