版本：v8

使用实时重载进行快速应用程序开发

到目前为止，我们已经看到了开发一个可以在任何地方运行的跨平台应用程序是多么容易。开发体验相当快，但是如果我说有一种方法可以更快地完成，你会怎么想？

我们可以使用 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)}
/>

在上面，我们添加了两个选项：Delete 调用 deletePhoto 函数（将在稍后添加）和 Cancel，当被赋予“cancel”的角色时，它将自动关闭操作表。设置 onDidDismiss 函数也很重要，在模态消失时将 photoToDelete 设置回 undefined。这样，当单击另一个图像时，操作表会注意到 photoToDelete 值的变化。

接下来，我们需要实现 deletePhoto 方法，它将来自 usePhotoGallery 钩子。打开该文件并将以下函数粘贴到钩子中

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);
};

首先将所选照片从 Photos 数组中删除。然后，我们使用 Capacitor Preferences API 更新 Photos 数组的缓存版本。最后，我们使用 Filesystem API 删除实际的照片文件本身。

确保返回 deletePhoto 函数，以便将其作为我们公开的钩子 API 的一部分

return {
  photos,
  takePhoto,
  deletePhoto,
};

保存此文件，然后再次点击一张照片并选择“Delete”选项。这一次，照片被删除了！使用实时重载实现的速度要快得多。💪

使用实时重载进行快速应用程序开发

实时重载​

删除照片​

内容

实时重载

删除照片