【react-native】react-native-vector-iconsを使ってみた

日報管理アプリ
趣味で日報管理アプリを作っています。

お客様先を徘徊する営業職やコンサルティング職の人にとって日報が外でかけることってすごく大事なんですよね。

なので並々ならぬこだわりをもってスマホアプリの実装をしているわけですが、react-nativeで画面内にmaterial design liteでおけるようなアイコンをおきたいなと思ったので「react-native-vector-icons」を使ってみました！

面倒な設定まだやってるの？
ただしこいつの難点はxcodeを開いて、いろいろ作業する必要があるところです。

ただ考えてもみてください。

こんな面倒くさい作業、優秀なエンジニア共がそのまま残しておくと思いますか？

そう思って探してみたところ「rnpm」なるものを発見しました。

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

この２行のコマンドラインだけでreact-native-vector-iconsが使えるようになってしまう優れものです。

アイコンの落とし穴

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

インポートして、

<Icon name={"ios-create-outline"} size={24} color="#FFF" style={styles.upperRight} />

render()内でよんであげるだけで使えます。

便利です！

ただしコイツのここに僕ははまりました。

そう！

nameに何を指定すれば良いかわからない！！！！！！

結局悩んだ末にhttps://infinitered.github.io/ionicons-version-3-search/を開き、画面に表示したいアイコンを選択し、classnameから「ion-ios-cloud-done」の「ion-」を抜いた値をnameに入れるとうまく行くことがわかりました。

「ion-ios-cloud-done」なら「name={“ios-cloud-done”}」にすればうまく行くと思います。

まとめ