版本：v8

您的第一个 Ionic 应用程序：React

Ionic 的优点是，您只需使用 HTML、CSS 和 JavaScript，就可以使用一个代码库为任何平台构建应用程序。让我们一步步地创建一个逼真的应用程序，学习 Ionic 应用程序开发的基础知识。

以下是完成的应用程序在所有 3 个平台上运行的效果

我们将构建的内容

我们将创建一个照片库应用程序，该应用程序提供使用设备相机拍照、在网格中显示它们以及将它们永久存储在设备上的功能。

亮点包括

基于 React 的一个代码库，它使用 Ionic 框架 UI 组件在 Web、iOS 和 Android 上运行。
使用 Ionic 的官方原生应用程序运行时 Capacitor 部署为原生 iOS 和 Android 移动应用程序。
照片库功能由 Capacitor 的 Camera、Filesystem 和 Preferences API 驱动。

在 GitHub 上找到本指南中引用的完整应用程序代码。

下载所需的工具

立即下载并安装这些工具，以确保获得最佳的 Ionic 开发体验

Node.js 用于与 Ionic 生态系统交互。在此处下载 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 以在没有提升权限的情况下全局运行。有关更多信息，请参阅解决权限错误。

创建应用程序

接下来，创建一个使用“选项卡”启动模板并为原生功能添加 Capacitor 的 Ionic React 应用程序

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 Elements 库提供基于 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 应用程序现在正在 Web 浏览器中运行。您的应用程序的大部分内容可以在浏览器中构建和测试，从而大大提高开发和测试速度。

照片库！

有三个选项卡。点击 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> 中。在本例中，我们将添加一个按钮，用于打开设备的相机以及显示相机捕获的图像。首先，通过在页面顶部添加一些我们将很快使用的 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 方法以及使用 Camera 和其他原生功能的逻辑。

接下来，打开 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 单独导入的，并设置为 icon 属性。

这仅仅是我们可以使用 Ionic 完成的所有酷炫事情的开始。接下来，在 Web 上实现拍照功能，然后为 iOS 和 Android 构建它。

我们将构建的内容 ​

下载所需的工具 ​

安装 Ionic 工具 ​

创建应用程序 ​

PWA 元素 ​

运行应用程序 ​

照片库！ ​

目录