ExpoのBottomタブでアイコンを変える方法
abyblog
ExpoでBottomタブを設定するときに、アイコンは必ず付けるものでしょう。
今回は、アイコンの付け方について紹介します。
Bottomタブの付け方は以下の記事を参考にしてください。
【初心者向き】expoでBottomタブを追加する方法 - プロラブ (abyblog.online)
目次（クリックで読みたい部分にジャンプできます）
アイコンをつける
Botttomタブをつけた時には、まず以下のようなコードになっていると想定します。
<Tab.Navigator
initialRouteName="HOME"
>
<Tab.Screen
name="マッチング"
component={ModalFrame}
/>
<Tab.Screen
name="HOME"
component={HOME}
/>
<Tab.Screen
name="お気に入り"
component={FavoriteFrame}
/>
</Tab.Navigator>このままだと、まだアイコンは表示されていない殺風景な感じです。
ここからアイコンを表示させていきましょう。
インストール
まずアイコンを表示させるために、以下を実行してインストールしてください。
npm install @expo/vector-icons次に、Tab.Screenの中のアイコンを表示させたい部分に、以下のようにoptionsを書き加えていきます。
import { MaterialCommunityIcons } from '@expo/vector-icons';
<Tab.Screen
name="HOME"
component={HOME}
options={{
headerShown: false,
tabBarIcon: () => (
<MaterialCommunityIcons name="home" size={30} />
),
tabBarActiveTintColor:"#3A6AE5",//アイコン選択時の色を指定。なくてもOK。
}}
/>そうすることで、アイコンを設定ができます。
アイコンの設定方法
次にアイコンの種類の設定です。
上記のコードの、name部分を変更することでアイコンを変えることができます。
私は以下のサイトからアイコンを選んでいます。
Material Design Icons - Icon Library - Pictogrammers
決まったら、名前をそのままname変数に当てはめるだけです。
もしかしたら、マイナーなアイコンは同じじゃないかもですが、私が使っている中では大体同じです。
まとめ
今回は、Expo Bottomタブでアイコンを設定する方法について解説しました。
他にもExpoでの開発でつまづきやすいところを紹介していますので、困ったときは参考にしてみてください。
(Visited 4 times, 1 visits today)
