Expo Managedでアイコンを使ったり、アイコンを含めたボタンを作成します。
参考にしたリンクは以下。
- Expo：ドキュメント、GitHub
- React Native：ドキュメント&GitHub
- アイコン一覧
アイコンの表示
使いたいアイコンの種類をインポートするだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import { View } from "react-native"; import { Ionicons, FontAwesome } from "@expo/vector-icons"; class Test extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <Ionicons size={24} name="ios-aperture"> Ionicons </Ionicons> <FontAwesome size={36} color="tomato" name="snowflake-o"> FontAwesome </FontAwesome> </View> ); } } export default Test; |
MaterialCommunityIconsが何かと使いやすい。
アイコンボタン
通常のボタンコンポーネントではアイコンを表示できません。
自作するのもよく見かけましたが、このコンポーネントでも作成可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import { View, Alert } from "react-native"; import { MaterialCommunityIcons } from "@expo/vector-icons"; class Test2 extends React.Component { onPress = () => { Alert.alert("Press Button"); }; render() { return ( <View style={{ flex: 1, alignItems: "center", justifyContent: "flex-end" }}> <MaterialCommunityIcons.Button size={24} name="airballoon" onPress={this.onPress}> Icon Button </MaterialCommunityIcons.Button> </View> ); } } export default Test2; |
設定できるプロパティはこちら。
ちなみにアイコン単体でボタンにしたい場合は、デフォルトのマージンが邪魔をしてちょっとずれるのでiconStyleを設定します。
|
1 2 |
<MaterialCommunityIcons.Button size={24} name="airballoon" /> <MaterialCommunityIcons.Button size={24} name="airballoon" iconStyle={{ marginRight: 0 }} /> |
さらにボタンの大きさが決まっているときに中央揃えするには次のようにします。
|
1 2 3 |
<View style={{ flex: 1, alignItems: "stretch", justifyContent: "center" }}> <MaterialCommunityIcons.Button size={24} name="airballoon" style={{ justifyContent: "center" }} iconStyle={{ marginRight: 0 }} /> </View> |
イマイチ直感的ではないのでレイアウトを書いてみます。
Viewの中身を真ん中にしたいのでrowの主方向の中央揃え、つまりjustifyContentを"center"にします。
この辺は調べても解決しなかったのでソース読まないとわからなかったです。