詳細は割愛いたします!
tabBarのアイコンとラベルを中央寄せに変更する。
Before
基本的に下向きに偏ったレイアウトを変更する。


After


TabBarIcon のスタイルを調子する
TabBarIconMi
、TabBarIconMci
コンポーネントを作成し、それぞれのスタイルに style={{marginBottom: -5}}
設定を追加する。(数字は任意)
// src/components/TabBarIcon.tsx import React from 'react'; import {MaterialIcons, MaterialCommunityIcons} from '@expo/vector-icons'; export function TabBarIconMi(props: { name: React.ComponentProps<typeof MaterialIcons>['name']; color: string; }) { return <MaterialIcons size={25} style={{marginBottom: -5}} {...props} />; } export function TabBarIconMci(props: { name: React.ComponentProps<typeof MaterialCommunityIcons>['name']; color: string; }) { return ( <MaterialCommunityIcons size={25} style={{marginBottom: -5}} {...props} /> ); }
tabBarLabelStyleを調整する
Tabs
> screenOptions
> tabBarLabelStyle: {paddingBottom: 5}
設定を追加する。
// app/(tabs)/_layout.tsx ... export default function TabLayout() { const {colors} = useTheme(); return ( <Tabs screenOptions={{ tabBarActiveTintColor: colors.primary, // <-- 追加する(任意) tabBarLabelStyle: {paddingBottom: 5}, // <-- 追加する }}> <Tabs.Screen name="index" options={{ title: 'TAB ONE', ...
アプリをリロードして変更内容を確認する。
コメント