跳到主要内容
版本：v8

添加到现有 React 应用程序

此文章来自 Ely Lucas 的博客文章 并更新到 Ionic 的最新版本。

使用独立的 Ionic 组件​

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

要开始使用组件，请安装 @ionic/react 包

npm i @ionic/react

在您的主应用程序文件中导入 Ionic 的样式表

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

将 setupIonicReact 函数添加到您的应用程序

App.tsx
import { setupIonicReact } from '@ionic/react';

setupIonicReact();

const App = () => {
  return (
    ...
  );
}

export default App;
注意

setupIonicReact 是一个函数，它将设置 Ionic React 组件以与您的应用程序一起使用。在使用任何 Ionic React 组件之前，必须调用它。

您可以导入任何组件，并立即开始使用它们。这里我们正在导入 IonButton 和 IonDatetime 组件，并在我们的应用程序中的任何地方使用它们

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

const MyComponent = () => {
  return (
    <>
      <IonDatetime></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 React Router 库与 React Router 的 v5 版本兼容。

主要的 Ionic 页面将需要几个基本组件。首先，使用 IonApp 组件（来自 @ionic/react）作为根组件，然后使用 IonReactRouter（来自 @ionic/react-router）。

IonApp 设置了我们的主要容器，并具有结构组件所需的基本样式。IonReactRouter 是 React Router 的 BrowserRouter 的小型包装，应该在其位置使用。

然后，将所有路由包装在 IonRouterOutlet 中，它管理我们的 Ionic 页面。

import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

...

<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></IonDatetime>
    <IonButton fill="clear">Start</IonButton>
  </IonContent>
</IonPage>
注意

IonPage 作为“Ionic”页面的基本组件非常重要。IonPage 是 Ionic 在其上执行页面转换的元素。

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

自定义主题​

要自定义组件的外观，Ionic 有一些您可以 覆盖 的 CSS 变量，以提供您的组件的主题。在您的主 CSS 文件中设置这些变量。

有关对 Ionic 应用程序进行主题化操作的更多信息，请参阅 此处 的指南。

总结​

将 Ionic React 添加到现有的 React 项目非常简单，可以在几分钟内完成。

使用 Ionic React 中的独立组件的优点是，您只需导入所需的组件。这使得 Ionic React 非常适合添加到需要在移动设备上看起来和工作良好的现有项目中。

内容

编辑此页