浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-vector-icons」ライブラリでFontAwesome5のアイコンが表示できない

最近、React Native を触り始めましたが、つい React の癖が抜けなくてちょっと苦戦しています。
で、今回苦戦したのがアイコンを表示する処理。
タイトルにある通り、「react-native-vector-icons」というライブラリを使って FontAwesome5 のアイコンを表示させようとしたところ、四角形にバツマークが重なったものが表示されてしまい、上手く指定したアイコンを表示できませんでした。
ちなみに、実行環境は Android です。

「react-native-vector-icons」の GitHub のページはこちらから。

GitHub – oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling.
https://github.com/oblador/react-native-vector-icons

 

まず、ライブラリのインストールには下記のコマンドを実行します。

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

こちらが終わったら、プロジェクトディレクトリの android/app ディレクトリから build.gradle を開き、下記の 1行を追加します。

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

追加場所ですが、私は apply from: "../../node_modules/react-native/react.gradle" という記述のすぐ下に追加しました。
上記が追加し終わったら、もうファイルは閉じてしまって大丈夫です。

で、ポイントはここから。
見落としていたのですが、FontAwesome 5 を使う場合、import の書き方が通常とは異なるとのこと。
FontAwesome だと、import Icon from 'react-native-vector-icons/FontAwesome'; のように書きますが、FontAwesome 5 の場合、下記のような指定になります。

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

Icon ではなく、FontAwesome5 としなければいけないようです。
これを見落としていたせいで、約30分弱悩みました…。
が、何とか解決できてよかったです。

 

以上、React Native の「react-native-vector-icons」ライブラリでアイコンが表示されない時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)