Skip to main content

添加到现有的 React 应用

¥Adding To An Existing React App

这篇文章已从 伊利·卢卡斯的博客文章 分叉并更新到 Ionic 的最新版本。

¥This post has been forked from Ely Lucas' blog post and updated to the latest version of Ionic.

使用单独的 Ionic 组件​

¥Using Individual Ionic Components

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

¥Ionic React has around 100 components that you can begin using in your app immediately to help make it more mobile-friendly.

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

¥To get started with using components install the @ionic/react package:

npm i @ionic/react

从主应用文件中的 Ionic 导入样式表：

¥Import the stylesheets from Ionic in your main app file:

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

将 setupIonicReact 函数添加到你的应用中：

¥Add the setupIonicReact function to your app:

App.tsx


import { setupIonicReact } from '@ionic/react';



setupIonicReact();

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

export default App;
注意

setupIonicReact 是一个函数，它将设置 Ionic React 组件以与你的应用一起使用。在使用任何 Ionic React 组件之前都需要调用它。

¥setupIonicReact is a function that will set up the Ionic React components to work with your app. It is required to be called before using any of the Ionic React components.

你可以导入任何组件并立即开始使用它们。在这里，我们导入 IonButton 和 IonDatetime 组件并在应用中的任何位置使用它们：

¥You can import any of the components and begin to use them right away. Here we are importing the IonButton and IonDatetime components and using them anywhere in our app:

import React from 'react';


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



const MyComponent = () => {
  return (
    <>
      <IonDatetime></IonDatetime>
      <IonButton fill="clear">Start</IonButton>
    </>
  );
};

使用 Ionic 页面​

¥Using Ionic Pages

如果你想转换应用的一部分并为其提供完整的 Ionic 体验，则需要执行一些额外的步骤来完成此设置。

¥If you want to convert part of your app and give it the whole Ionic experience, there are a few additional steps to take to get this setup.

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

¥First, import some additional CSS files that help set up the overall structure of the page and some utility helpers:

/* 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 冲突。

¥If you are using another CSS framework (like Bootstrap), you might want to isolate the Ionic pages away from them. This will help to ensure there aren't any CSS conflicts between the libraries.

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

¥Next, install the @ionic/react-router library:

npm i @ionic/react-router

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

¥The Ionic React Router library is a small wrapper around the popular React Router library and helps provide the functionality we need for native-like page transitions. The Ionic React Router library is compatible with v5 of React Router.

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

¥The main Ionic page will need a couple of base components. First, use a IonApp component (from @ionic/react) as the root component, and then use IonReactRouter (from @ionic/react-router).

IonApp 设置我们的主容器，并具有结构组件所需的必要样式。IonReactRouter 是 React Routers BrowserRouter 的一个小封装器，应该在它的位置使用。

¥IonApp sets up our main container, with the necessary styling needed for our structural components. IonReactRouter is a small wrapper for React Routers BrowserRouter and should be used in its place.

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

¥Then, wrap all your routes in an IonRouterOutlet, which is what manages our Ionic pages.



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 页面：

¥Now you can setup Ionic pages like so:

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>My Page</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonDatetime></IonDatetime>
    <IonButton fill="clear">Start</IonButton>
  </IonContent>
</IonPage>
注意

IonPage 作为 "Ionic" 页面的基础组件非常重要。IonPage 是 Ionic 执行页面转换的元素。

¥IonPage is important to have as the base component for your "Ionic" pages. IonPage is the element Ionic performs page transitions on.

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

¥For more information on routing and navigation in Ionic React, see here.

自定义主题​

¥Customize the Theme

为了自定义组件的外观和感觉，Ionic 有 CSS 变量，你可以 override 为你的组件提供主题。在主 CSS 文件中设置这些。

¥To customize the look and feel of the components, Ionic has CSS variables you can override to provide a theme for your components. Set these in your main CSS file.

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

¥For more info on theming your Ionic app, see the guide here.

包起来​

¥Wrapping up

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

¥Adding Ionic React to an existing React project is fairly simple and can be done in just a few minutes.

使用 Ionic React 中的单个组件的好处是你只需导入所需的组件。这使得 Ionic React 非常适合将其添加到需要在移动设备上美观和工作良好的现有项目中。

¥The great thing about using individual components from Ionic React is that you only import the component you need. This makes Ionic React ideal for adding it to existing projects that need to look and work great on mobile devices.

目录