NativeBaseのIconコンポーネントが表示されず（?になる）はまった

はじめに

この記事は不具合ではなく、ReactNative/NativeBase初学の筆者がIconコンポーネントの仕様を誤解していたためはまった内容になります。

お恥ずかしいミスですが、他にも初学の方で同じポイントでハマり時間を浪費することもあると思い記事にしておきます。

なお、インストール方法が原因でアイコンが一切表示されない場合もあるのでその場合は別の記事を参考にしてください。

概要

現象

NativeBaseのIconコンポーネントで指定したアイコンが一部正しく表示されなかった。

試した対応

react-native-vector-iconsのインストール方法やビルドの設定に問題があるかと疑ったが解決せず

原因

原因はアイコンフォントの種類を Icon コンポーネントの props（theme)で指定しない場合defaultのIoniconsのアイコンを表示するため。

結論

たまたまIoniconsにあるアイコン名であれば表示され、それ以外は表示されていなかっただけだった。フォントを指定してやれば表示される。

例

IoniconsでなくFontAwesomeのアイコンを指定する場合

JavaScript

<Icon theme={{iconFamily: 'FontAwesome'}} name='trash' />

愚痴

NativeBaseのIconのドキュメントにiconFamilyの指定について書いて欲しかった。。。

ちなみにreact-native-vector-iconsは読み込む時点でどのアイコンセットを使うか決めているのでこういうハマり方はないわけですね。

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

ソースコードを追えば一目瞭然でしたね。。。

　他の原因

参考までに他の原因について言及します。

実際、installが上手くいっていない場合はfontファイルやgradleに設定が記載されない場合あります。公式を参考に必要な記述やファイルが作成されているか確認してみてください。

単にlinkできていなかったり、cleanしてビルドしなおせば上手く動作したりということもありました。

react-native-vector-icons#installation

検索するといくつかIssueがでてきます。自分は先にこちらを疑ってハマりました。
Icons not showing

環境

一応記載しておきます。
- MacOSX
- Node.js v7.8.0
- react-native 0.47.2
- native-base 2.3.1