crazycharge-app/app/(auth)/(tabs)/_layout.tsx

import React from 'react';
import { Tabs } from 'expo-router';
import { Dimensions, Platform } from 'react-native';
import {
    TabAccountIcon,
    TabChargingIcon,
    TabHomeIcon
} from '../../../component/global/SVG';

export default function TabLayout() {
    const { height } = Dimensions.get('window');
    
    return (
        <Tabs
            screenOptions={{
                headerShown: false,
                tabBarLabelStyle: {
                    fontSize: 16,
                    marginBottom: Platform.OS === 'ios' ? 0 : 25
                },
                tabBarStyle: {
                    height: height * 0.105,    
                }
            }}
        >
            <Tabs.Screen
                name="(home)"
                options={{
                    title: '主頁',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabHomeIcon color={focused ? '#02677D' : '#BBBBBB'} />
                    )
                }}
            />
            <Tabs.Screen
                name="(charging)/index"
                options={{
                    title: '充電',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused }) => (
                        <TabChargingIcon
                            color={focused ? '#02677D' : '#BBBBBB'}
                        />
                    )
                }}
            />
            <Tabs.Screen
                name="(account)"
                options={{
                    title: '帳戶',
                    tabBarHideOnKeyboard: true,
                    tabBarIcon: ({ focused, color }) => (
                        <TabAccountIcon
                            color={focused ? '#02677D' : '#BBBBBB'}
                        />
                    )
                }}
            />
        </Tabs>
    );
}