本文へスキップ
バージョン: 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アプリのテーマ設定の詳細については、こちらのガイドを参照してください。

まとめ​

既存のReactプロジェクトにIonic Reactを追加するのは非常に簡単で、数分で完了できます。

Ionic Reactの個々のコンポーネントを使用することの利点は、必要なコンポーネントだけをインポートすることです。これにより、モバイルデバイスで優れた外観と動作が必要な既存のプロジェクトにIonic Reactを追加するのに最適です。

目次

このページを編集する