u

code/app/app-rn3/components/common/tabbar.tsx

@@ -9,12 +9,13 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import * as icons from "lucide-react-native/icons";
+import { BlurView } from "expo-blur";
 
 export interface TabbarItem {
   name: string;
   href: Href;
-  icon: keyof typeof icons; // 👈 传 icon 名字
-  label: string; // 👈 label
+  icon: keyof typeof icons;
+  label: string;
   onPress?: () => void;
 }
 
@@ -48,7 +49,6 @@ function TabButton({
     }
   }, [isFocused]);
 
-  // 👇 在内部统一处理 icon
   const LucideIcon = icons[iconName];
 
   return (
@@ -61,18 +61,13 @@ function TabButton({
       }}
     >
       <Animated.View style={animatedStyle}>
-        <LucideIcon
-          size={22}
-          color={"#333"}
-          fill={isFocused ? "#0284c7" : "#fff"} // 填充颜色
-          strokeWidth={2}
-        />
+        <LucideIcon size={22} color={isFocused ? "#111" : "#999"} strokeWidth={2} />
 
         <Text
           style={{
             fontSize: 10,
             marginTop: 2,
-            color: "#333",
+            color: isFocused ? "#111" : "#999",
           }}
         >
           {label}
@@ -88,7 +83,6 @@ export default function CustomTabbar({ data }: AppTabbarProps) {
 
   const [activeTab, setActiveTab] = useState("");
 
-  // 路由同步
   useEffect(() => {
     const match = data.find((item) => item.href === pathname);
     if (match) {
@@ -98,30 +92,38 @@ export default function CustomTabbar({ data }: AppTabbarProps) {
 
   const handlePressTab = (item: TabbarItem) => {
     setActiveTab(item.name);
-
     router.push(item.href);
-
     item.onPress?.();
   };
 
   return (
     <View
       style={{
-        flexDirection: "row",
-        height: 48,
-        alignItems: "center",
-        backgroundColor: "#fff",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
       }}
     >
-      {data.map((item) => (
-        <TabButton
-          key={item.name}
-          iconName={item.icon}
-          label={item.label}
-          isFocused={activeTab === item.name}
-          onPress={() => handlePressTab(item)}
-        />
-      ))}
+      <BlurView
+        intensity={90}
+        tint="light"
+        blurMethod="dimezisBlurView"
+        style={{
+          flexDirection: "row",
+          height: 56,
+        }}
+      >
+        {data.map((item) => (
+          <TabButton
+            key={item.name}
+            iconName={item.icon}
+            label={item.label}
+            isFocused={activeTab === item.name}
+            onPress={() => handlePressTab(item)}
+          />
+        ))}
+      </BlurView>
     </View>
   );
 }