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 框架 UI 组件 在网页、iOS 和 Android 上运行。
  • 作为原生 iOS 和 Android 移动应用部署，使用 Capacitor，Ionic 的官方原生应用运行时。
  • 照片图库功能由 Capacitor 的 Camera、Filesystem 和 Preferences API 提供支持。

在 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 版本。
  • 一个代码编辑器 用于……编写代码！我们是 Visual Studio Code 的粉丝。
  • 命令行接口/终端 (CLI)：
    • Windows 用户：为了获得最佳的 Ionic 体验，我们建议使用内置的命令行（cmd）或 PowerShell CLI，并以管理员模式运行。
    • Mac/Linux 用户：几乎任何终端都可以使用。

安装 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:

note

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

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

-g 选项意味着 全局安装。当软件包被全局安装时，可能会发生 EACCES 权限错误。

考虑设置 npm 以在不使用提升权限的情况下全局运行。更多信息请参阅 解决权限错误。

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

创建一个应用​

🌐 Create an App

接下来，创建一个使用“Tabs”起始模板并添加 Capacitor 以实现原生功能的 Ionic React 应用:

🌐 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

这个入门项目包含三个预构建页面和 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 插件，包括 Camera API，通过 Ionic PWA Elements 库 提供基于网络的功能和用户界面。

🌐 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

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

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

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
// CHANGE: Add the following import
import { defineCustomElements } from '@ionic/pwa-elements/loader';

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

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

就是这样！现在到了有趣的部分——让我们看看应用的实际效果。

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

运行应用​

🌐 Run the App

接下来运行此命令：

🌐 Run this command next:

ionic serve

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

🌐 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:

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';

const Tab2: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 2 page" />
      </IonContent>
    </IonPage>
  );
};

export default Tab2;

IonHeader 代表顶部导航栏和工具栏，其中 “Tab 2” 作为标题（由于 iOS 可折叠大标题 支持，存在两个）。我们将两个 IonTitle 元素重命名为：

<IonPage>
  <IonHeader>
    <IonToolbar>
      {/* CHANGE: Update title */}
      <IonTitle>Photo Gallery</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonHeader collapse="condense">
      <IonToolbar>
        {/* CHANGE: Update title */}
        <IonTitle size="large">Photo Gallery</IonTitle>
      </IonToolbar>
    </IonHeader>

    {/* ...existing code... */}
  </IonContent>
</IonPage>

我们将应用的视觉部分放入 <IonContent>。在这种情况下，这里是我们将添加一个按钮的位置，该按钮可以打开设备的相机，并显示相机拍摄的图片。首先，在页面底部添加一个悬浮操作按钮(FAB)，并将相机图片设置为图标。

🌐 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) to the bottom of the page and set the camera image as the icon.

// CHANGE: Add the following import
import { camera } from 'ionicons/icons';
// CHANGE: Update the following import
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon } from '@ionic/react';
// CHANGE: Remove or comment out `ExploreContainer`
// import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';

const Tab2: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Photo Gallery</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Photo Gallery</IonTitle>
          </IonToolbar>
        </IonHeader>

        {/* CHANGE: Add the floating action button */}
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={camera}></IonIcon>
          </IonFabButton>
        </IonFab>

        {/* CHANGE: Remove or comment out `ExploreContainer` */}
        {/* <ExploreContainer name="Tab 2 page" /> */}
      </IonContent>
    </IonPage>
  );
};

export default Tab2;

接下来，打开 src/App.tsx。将标签更改为“照片”，并将中间标签按钮的 ellipse 图标更改为 images。

🌐 Next, open src/App.tsx. Change the label to "Photos" and the ellipse icon to images for the middle tab button.

import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
// CHANGE: Update the following import
import { images, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

/* ...existing Ionic styles... */

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            {/* CHANGE: Update icon */}
            <IonIcon aria-hidden="true" icon={images} />
            {/* CHANGE: Update label */}
            <IonLabel>Photos</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

这只是我们可以用 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.

目录