asios/components/CustomTabBar.tsx

import { Images } from '@/constants/images';
import { Image } from 'expo-image';
import { usePathname, useRouter } from 'expo-router';
import React from 'react';
import { Dimensions, ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

const tabList = [
  {
    name: '首页',
    route: '/',
    img: Images.tabs.home,
    active: Images.tabs.homeActive,
  },
  {
    name: '开箱',
    route: '/box',
    img: Images.tabs.box,
    active: Images.tabs.boxActive,
  },
  {
    name: '福利',
    route: '/welfare',
    img: Images.tabs.welfare,
    active: Images.tabs.welfareActive,
  },
  {
    name: '我的',
    route: '/mine',
    img: Images.tabs.mine,
    active: Images.tabs.mineActive,
  },
];

export function CustomTabBar() {
  const router = useRouter();
  const pathname = usePathname();
  const insets = useSafeAreaInsets();

  const getTabIndex = () => {
    if (pathname === '/' || pathname === '/index') return 0;
    if (pathname === '/box') return 1;
    if (pathname === '/welfare') return 2;
    if (pathname === '/mine') return 3; 
    return 0;
  };

  const currentIndex = getTabIndex();

  const handlePress = (index: number) => {
    const route = tabList[index].route;
    router.replace(route as any);
  };

  // 计算底部安全区域高度
  const bottomPadding = insets.bottom;

  return (
    <View style={[styles.wrapper, { paddingBottom: bottomPadding }]}>
      <ImageBackground
        style={styles.container}
        resizeMode="cover"
      >
        <View style={styles.center}>
          {tabList.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={styles.item}
              activeOpacity={0.8}
              onPress={() => handlePress(index)}
            >
              <Image
                source={currentIndex === index ? item.active : item.img}
                style={styles.icon}
                contentFit="contain"
              />
            </TouchableOpacity>
          ))}
        </View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 999,
  },
  container: {
    width: SCREEN_WIDTH,
    height: 78,
  },
  center: {
    flex: 1,
    flexDirection: 'row',
  },
  item: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    width: '100%',
    height: '100%',
  },
});