最近、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」ライブラリでアイコンが表示されない時の対処法でした。
ご参考になれば幸いです。
