將 Ionic 新增至現有的 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 Routers 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 非常適合新增至需要看起來和在行動裝置上運作良好的現有專案。