将 Ionic React 添加到现有的 React 项目

本周早些时候，我们发布了 Ionic React（点击此处阅读公告）。创建一个新的 Ionic React 项目非常容易，但如果您已经有一个 React 项目，并希望将 Ionic 集成到其中，该怎么办呢？

幸运的是，这个过程相当简单。在本指南中，我将介绍如何在现有项目中开始使用 Ionic React。我将从如何使用单个组件开始，然后介绍如何获得完整的 Ionic 应用体验。

使用单独的 Ionic 组件

Ionic React 拥有大约 100 个组件，您可以立即在您的应用中开始使用它们，以使其更加适合移动设备。

要开始使用组件，请将@ionic/react包添加到您的项目中：

npm i @ionic/react

接下来，将 Ionic 的核心 CSS 导入到主应用程序文件的某个位置：

import '@ionic/react/css/core.css';

现在，您可以导入任何组件并立即开始使用它们。这里我们导入IonButton和IonDatetme组件，并在应用程序的任何位置使用它们：

import { IonButton, IonDatetime } from '@ionic/react';

<IonDatetime displayFormat="MM/DD/YYYY" placeholder="Select Date"></IonDatetime>
<IonButton fill="clear">Start</IonButton>

使用 Ionic 页面

如果您想转换应用程序的一部分并赋予其完整的 Ionic 体验，则需要采取一些额外的步骤来完成此设置。

首先，导入一些额外的 CSS 文件来帮助设置页面的整体结构和一些实用程序助手：

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

如果您正在使用其他 CSS 框架（例如 Bootstrap），则可能需要将 Ionic 页面与它们隔离。这将有助于确保库之间不存在任何 CSS 冲突。

接下来安装@ionic/react-router库：

npm i @ionic/react-router

Ionic React Router 库是流行的 React Router 库的一个小包装器，有助于提供我们所需的类似原生的页面转换功能。

Ionic 主页面需要几个基础组件。首先，使用IonApp(from @ionic/react) 组件作为根组件，然后使用IonReactRouter(from @ionic/react-router)。

IonApp设置我们的主要容器，并为我们的结构组件提供必要的样式。IonReactRouter是 React Routers 的一个小包装器BrowserRouter，应该代替它使用。

然后，将所有路线包装在一个中IonRouterOutlet，这就是管理我们的 Ionic 页面的方法。

<IonApp>
  <IonReactRouter>
    <IonRouterOutlet>
      <Route path="/" exact component={Home} />
      <Route path="/about" exact component={About} />
    </IonRouterOutlet>
  </IonReactRouter>
</IonApp>

现在您可以像这样设置 Ionic 页面：

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>My Page</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonDatetime displayFormat="MM/DD/YYYY" placeholder="Select Date"></IonDatetime>
    <IonButton fill="clear">Start</IonButton>
  </IonContent>
</IonPage>

请注意，IonPage作为“Ionic”页面的基础组件，拥有它非常重要。IonPage是我们寻找的用于进行页面转换的元素。

有关 Ionic React 中的路由和导航的更多信息，请参见此处。

自定义主题

为了自定义组件的外观和风格，我们提供了一些 CSS 变量供您覆盖，从而为您的组件提供主题。您可以在主 CSS 文件中的某个位置设置这些变量：

:root {
  --ion-color-angular: #ac282b;
  --ion-color-communication: #8e8d93;
  --ion-color-tooling: #fe4c52;
  --ion-color-services: #fd8b2d;
  --ion-color-design: #fed035;
  --ion-color-workshop: #69bb7b;
  --ion-color-food: #3bc7c4;
  --ion-color-documentation: #b16be3;
  --ion-color-navigation: #6600cc;

  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

  --ion-color-tertiary: #7044ff;
  --ion-color-tertiary-rgb: 112, 68, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #633ce0;
  --ion-color-tertiary-tint: #7e57ff;

  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;

  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;

  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;

  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

有关 Ionic 应用主题的更多信息，请参阅此处的指南。

总结

将 Ionic React 添加到现有的 React 项目中相当简单，只需几分钟即可完成。

使用 Ionic React 中独立组件的一大优势在于，您只需导入所需的组件即可。每个组件在运行时都会延迟加载，因此不会增加包的大小。这使得 Ionic React 非常适合添加到需要在移动设备上呈现出色外观和运行体验的现有项目中。

鏂囩珷鏉ユ簮锛�https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib