ReactNativeでネイティブアイコンを使用する

遅かれ早かれ、アプリケーションにベクターアイコンを追加する時期が来ます。 コンポーネントにロードする独自のSVGを構築したか、 Icomoon を使用して独自のアイコンライブラリを作成したか、Bootstrapなどの有名なアイコンライブラリを使用した可能性があります。

ただし、プラットフォーム固有のネイティブアイコンを使用して、Androidでアプリを実行すると、そのプラットフォームにマテリアルデザインアイコンとiOSアイコンが表示されるようにしたい場合があります。

朗報です！ react-native-vector-icons を使用すると、これを簡単に実現できます。

プラットフォーム固有のアイコンコンポーネントを作成する

react-native-vector-iconsをインストールし、react-native linkを使用してネイティブプロジェクトを自動構成することから始めましょう。

$ npm install react-native-vector-icons --save
$ react-native link

react-native-vector-iconsは、Entypo、FontAwesomeなどを含むアイコンライブラリのセットです。 これらは、各プラットフォームアセットにネイティブにインストールされます。

すばらしい点は、マテリアルデザインとiOSデザインを実装する優れたアイコンセットであるIoniconsも含まれていることです。

ios-およびmd-プレフィックスを使用して特定のアイコンのプラットフォームを指定する、独自の命名規則があります。 addアイコンの例を次に示します。

たとえば、iOSバージョンの追加アイコンを使用する場合は、Iconコンポーネントをインポートして、それぞれの名前を設定できます。

import Icon from "react-native-vector-icons/Ionicons";

// ...
<Icon
  name="ios-add"
  color="#ccc"
  size={25}
/>

秘訣は次のとおりです。Ionicons命名規則を使用して、プラットフォーム固有のアイコンを自動的に作成できます。 そのために、React Nativeのプラットフォームモジュールを使用して、ターゲットにしているプラットフォームを確認し、対応する名前を追加できます。

import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

// ...
<Icon
  name={Platform.OS === "ios" ? "ios-add" : "md-add"}
  color="#ccc"
  size={25}
/>

さらに良いことに、このロジックが含まれている独自のアイコンコンポーネントを作成することで、をより再利用可能にすることができます。これにより、使用するたびに繰り返す必要がなくなります。

import React from "react";
import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

export default ({ name, ...props }) => (
  <Icon
    name={Platform.OS === "ios" ? `ios-${name}` : `md-${name}`}
    {...props}
  />
);

小道具から名前を取り出し、対応する接頭辞を追加し、残りの小道具を渡します。

次に、作成した Icon コンポーネントをインポートして、アイコンのベース名を使用するのと同じくらい簡単に使用できます。

import Icon from "./components/Icon";

// ...
<Icon
  name="add"
  color="#ccc"
  size={25}
/>

まとめ

これまで、react-native-vector-iconsに含まれている Ionicons ライブラリの命名規則を使用して、プラットフォーム固有のアイコンを簡単に使用できる独自のアイコンコンポーネントを作成する方法を見てきました。

それがあなたのプロジェクトに役立つことを願っています！