digital-pilates/app/(tabs)/_layout.tsx

import * as Haptics from 'expo-haptics';
import { Tabs, usePathname } from 'expo-router';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

import { IconSymbol } from '@/components/ui/IconSymbol';

export default function TabLayout() {
  const pathname = usePathname();

  return (
    <Tabs
      screenOptions={({ route }) => {
        const routeName = route.name;
        const isSelected = (routeName === 'index' && pathname === '/') ||
          (routeName === 'explore' && pathname === '/explore') ||
          pathname.includes(routeName);

        return {
          headerShown: false,
          tabBarActiveTintColor: '#192126',
          tabBarButton: (props) => {
            const { children, onPress } = props;

            const handlePress = (event: any) => {
              if (process.env.EXPO_OS === 'ios') {
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
              }
              onPress && onPress(event);
            };

            return (
              <TouchableOpacity
                onPress={handlePress}
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                  marginHorizontal: 6,
                  marginVertical: 10,
                  borderRadius: 25,
                  backgroundColor: isSelected ? '#BBF246' : 'transparent',
                  paddingHorizontal: isSelected ? 16 : 8,
                  paddingVertical: 8,
                }}
              >
                {children}
              </TouchableOpacity>
            );
          },
          tabBarStyle: {
            position: 'absolute',
            bottom: 20,
            height: 68,
            borderRadius: 34,
            backgroundColor: '#192126',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.2,
            shadowRadius: 10,
            elevation: 5,
            paddingHorizontal: 10,
            paddingTop: 0,
            paddingBottom: 0,
            marginHorizontal: 20,
            width: '90%',
            alignSelf: 'center',
          },
          tabBarItemStyle: {
            backgroundColor: 'transparent',
            height: 68,
            marginTop: 0,
            marginBottom: 0,
            paddingTop: 0,
            paddingBottom: 0,
          },
          tabBarShowLabel: false,
        };
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '首页',
          tabBarIcon: ({ color }) => {
            const isHomeSelected = pathname === '/' || pathname === '/index';
            return (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <IconSymbol size={22} name="house.fill" color={color} />
                {isHomeSelected && (
                  <Text
                    numberOfLines={1}
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      marginLeft: 6,
                      textAlign: 'center',
                      flexShrink: 0,
                    }}>
                    首页
                  </Text>
                )}
              </View>
            );
          },
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: '探索',
          tabBarIcon: ({ color }) => {
            const isExploreSelected = pathname === '/explore';
            return (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <IconSymbol size={22} name="paperplane.fill" color={color} />
                {isExploreSelected && (
                  <Text
                    numberOfLines={1}
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      marginLeft: 6,
                      textAlign: 'center',
                      flexShrink: 0,
                    }}>
                    探索
                  </Text>
                )}
              </View>
            );
          },
        }}
      />

      <Tabs.Screen
        name="personal"
        options={{
          title: '个人',
          tabBarIcon: ({ color }) => {
            const isPersonalSelected = pathname === '/personal';
            return (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <IconSymbol size={22} name="person.fill" color={color} />
                {isPersonalSelected && (
                  <Text
                    numberOfLines={1}
                    style={{
                      color: color,
                      fontSize: 12,
                      fontWeight: '600',
                      marginLeft: 6,
                      textAlign: 'center',
                      flexShrink: 0,
                    }}>
                    个人
                  </Text>
                )}
              </View>
            );
          },
        }}
      />
    </Tabs>
  );
}