趣味で日報管理アプリを作っています。
お客様先を徘徊する営業職やコンサルティング職の人にとって日報が外でかけることってすごく大事なんですよね。
なので並々ならぬこだわりをもってスマホアプリの実装をしているわけですが、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”}」にすればうまく行くと思います。
本格的なアイコンを使うだけで、アプリのそれっぽさがますのでオススメです！
利用も簡単なのでreact-native-vector-iconsはイチオシのパッケージですよ！
最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。
