React Native, Expoでアイコンを使う


Expo Managedでアイコンを使ったり、アイコンを含めたボタンを作成します。

参考にしたリンクは以下。

React Native 0.60 Expo v34

アイコンの表示

使いたいアイコンの種類をインポートするだけです。

 

propsはここ、アイコンの種類はここで確認できます。

MaterialCommunityIconsが何かと使いやすい。

アイコンボタン

通常のボタンコンポーネントではアイコンを表示できません。

自作するのもよく見かけましたが、このコンポーネントでも作成可能です。

設定できるプロパティはこちら

 

ちなみにアイコン単体でボタンにしたい場合は、デフォルトのマージンが邪魔をしてちょっとずれるのでiconStyleを設定します。

さらにボタンの大きさが決まっているときに中央揃えするには次のようにします。

 

イマイチ直感的ではないのでレイアウトを書いてみます。

Viewの中身を真ん中にしたいのでrowの主方向の中央揃え、つまりjustifyContent"center"にします。

この辺は調べても解決しなかったのでソース読まないとわからなかったです。


コメントを残す

メールアドレスが公開されることはありません。