Skip to main content

你的第一个 Ionic 应用：React

Ionic 的很棒之处在于，通过一套代码库，你可以仅使用 HTML、CSS 和 JavaScript 为任何平台进行构建。跟随我们一步一步创建一个现实的应用，学习 Ionic 应用开发的基础知识。

¥The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.

这是在所有 3 个平台上运行的最终应用：

¥Here’s the finished app running on all 3 platforms:

我们将构建什么​

¥What We'll Build

我们将创建一个照片库应用，该应用可以使用设备的相机拍摄照片，将它们显示在网格中，并将它们永久存储在设备上。

¥We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.

亮点包括：

¥Highlights include:

  • 一个基于 React 的代码库，使用 Ionic Framework 用户界面组件 在 Web、iOS 和 Android 上运行。

    ¥One React-based codebase that runs on the web, iOS, and Android using Ionic Framework UI components.

  • 使用 Capacitor（Ionic 的官方原生应用运行时）部署为原生 iOS 和 Android 移动应用。

    ¥Deployed as a native iOS and Android mobile app using Capacitor, Ionic's official native app runtime.

  • 照片库功能由 Capacitor 相机、文件系统 和 优先 API 提供支持。

    ¥Photo Gallery functionality powered by the Capacitor Camera, Filesystem, and Preferences APIs.

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

¥Find the complete app code referenced in this guide on GitHub.

下载所需工具​

¥Download Required Tools

立即下载并安装这些以确保最佳的 Ionic 开发体验：

¥Download and install these right away to ensure an optimal Ionic development experience:

  • Node.js 用于与 Ionic 生态系统交互。在此下载 LTS 版本。

    ¥Node.js for interacting with the Ionic ecosystem. Download the LTS version here.

  • 代码编辑器...写代码！我们是 Visual Studio Code 的粉丝。

    ¥A code editor for... writing code! We are fans of Visual Studio Code.

  • 命令行接口/终端 (CLI)：

    ¥Command-line interface/terminal (CLI):

    • Windows 用户：为了获得最佳的 Ionic 体验，我们建议使用内置命令行 (cmd) 或 Powershell CLI，在管理员模式下运行。

      ¥Windows users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.

    • Mac/Linux 用户，几乎任何终端都可以使用。

      ¥Mac/Linux users, virtually any terminal will work.

安装 Ionic 工具​

¥Install Ionic Tooling

在命令行终端中运行以下命令来安装 Ionic CLI (ionic)、native-run（用于在设备和模拟器/模拟器上运行原生二进制文件）和 cordova-res（用于生成原生应用图标和启动屏幕）：

¥Run the following in the command line terminal to install the Ionic CLI (ionic), native-run, used to run native binaries on devices and simulators/emulators, and cordova-res, used to generate native app icons and splash screens:

注意

要在 Visual Studio Code 中打开终端，请转到终端 -> 新终端。

¥To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.

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

-g 选项表示全局安装。全局安装软件包时，可能会出现 EACCES 权限错误。

¥The -g option means install globally. When packages are installed globally, EACCES permission errors can occur.

考虑将 npm 设置为在无需提升权限的情况下进行全局操作。请参阅 解决权限错误 了解更多信息。

¥Consider setting up npm to operate globally without elevated permissions. See Resolving Permission Errors for more information.

创建一个应用​

¥Create an App

接下来，创建一个 Ionic React 应用，该应用使用“Tabs”启动模板并添加 Capacitor 以实现原生功能：

¥Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:

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

该入门项目包含三个预构建的页面和 Ionic 开发的最佳实践。通用构建块已经到位，我们可以轻松添加更多功能！

¥This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!

接下来，切换到应用文件夹：

¥Next, change into the app folder:

cd photo-gallery

接下来，我们需要安装必要的 Capacitor 插件以使应用的原生功能正常工作：

¥Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:

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

渐进式网页应用元素​

¥PWA Elements

一些 Capacitor 插件（包括相机 API）通过 Ionic PWA 元素库 提供基于 Web 的功能和 UI。

¥Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic PWA Elements library.

它是一个单独的依赖，因此接下来安装它：

¥It's a separate dependency, so install it next:

npm install @ionic/pwa-elements

安装后，在你选择的代码编辑器中打开项目。

¥After installation, open up the project in your code editor of choice.

接下来，通过编辑 src/main.tsx 导入 @ionic/pwa-elements。

¥Next, import @ionic/pwa-elements by editing src/main.tsx.



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



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

就是这样！现在是有趣的部分 - 让我们看看该应用的运行情况。

¥That’s it! Now for the fun part - let’s see the app in action.

运行应用​

¥Run the App

在 shell 中运行以下命令：

¥Run this command in your shell:

ionic serve

瞧！你的 Ionic 应用现在正在 Web 浏览器中运行。你的大部分应用都可以直接在浏览器中构建和测试，从而大大提高了开发和测试速度。

¥And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.

¥Photo Gallery!!!

有三个选项卡。单击 Tab2 选项卡。这是一块空白的画布，又名是变成照片图库的完美地点。Ionic CLI 具有实时重新加载功能，因此当你进行更改并保存时，应用会立即更新！

¥There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!

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。我们看：

¥Open /src/pages/Tab2.tsx. We see:

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

IonHeader 代表顶部导航和工具栏，"选项卡 2" 为标题。让我们重命名它：

¥IonHeader represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:

<IonTitle>Photo Gallery</IonTitle>

我们将应用的视觉方面放入 <IonContent> 中。在本例中，我们将在此处添加一个按钮，用于打开设备的相机并显示相机捕获的图片。首先添加 浮动操作按钮 (FAB)。首先，更新页面顶部的导入以包含相机图标以及我们稍后将使用的一些 Ionic 组件：

¥We put the visual aspects of our app into <IonContent>. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a floating action button (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly:

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() 函数（即将实现）：

¥Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the takePhoto() function when this button is clicked (to be implemented soon):

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

我们稍后将创建 takePhoto 方法和逻辑来使用相机和其他原生功能。

¥We’ll be creating the takePhoto method and the logic to use the Camera and other native features in a moment.

接下来，打开 src/App.tsx，从导入中删除 ellipse 图标并导入 images 图标：

¥Next, open src/App.tsx, remove the ellipse icon from the import and import the images icon instead:

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

在选项卡栏 (<IonTabBar>) 中，将中间选项卡按钮的标签更改为“照片”，并将 ellipse 图标更改为 images：

¥Within the tab bar (<IonTabBar>), change the label to “Photos” and the ellipse icon to images for the middle tab button:

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

在 Ionic React 中，图标是从 ionicons/icons 单独导入的，并设置为 icon 属性。

¥In Ionic React, icons are imported individually from ionicons/icons and set to the icon prop.

这只是我们可以用 Ionic 做的所有很酷的事情的开始。接下来，在网络上实现相机拍摄功能，然后为 iOS 和 Android 构建它。

¥That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.

目录