feat: 支持 glass

app/(tabs)/_layout.tsx

@@ -1,4 +1,5 @@
 import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+import { GlassContainer, GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import * as Haptics from 'expo-haptics';
 import { Tabs, usePathname } from 'expo-router';
 import React from 'react';
@@ -27,6 +28,7 @@ export default function TabLayout() {
   const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
   const colorTokens = Colors[theme];
   const pathname = usePathname();
+  const glassEffectAvailable = isLiquidGlassAvailable();
 
   // Helper function to determine if a tab is selected
   const isTabSelected = (routeName: string): boolean => {
@@ -96,20 +98,51 @@ export default function TabLayout() {
     );
   };
 
+  // Custom tab bar background component
+  const TabBarBackground = () => {
+    if (glassEffectAvailable) {
+      return (
+        <GlassContainer
+          spacing={8}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: 34,
+          }}
+        >
+          <GlassView
+            isInteractive
+            glassEffectStyle="regular"
+            tintColor={theme === 'dark' ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.3)'}
+            style={{
+              flex: 1,
+              borderRadius: 34,
+            }}
+          />
+        </GlassContainer>
+      );
+    }
+    return null;
+  };
+
   // Common screen options
   const getScreenOptions = (routeName: string): BottomTabNavigationOptions => ({
     headerShown: false,
     tabBarActiveTintColor: colorTokens.tabIconSelected,
     tabBarButton: createTabButton(routeName),
+    tabBarBackground: TabBarBackground,
     tabBarStyle: {
       position: 'absolute',
       bottom: TAB_BAR_BOTTOM_OFFSET,
       height: TAB_BAR_HEIGHT,
       borderRadius: 34,
-      backgroundColor: colorTokens.tabBarBackground,
+      backgroundColor: glassEffectAvailable ? 'transparent' : colorTokens.tabBarBackground,
       shadowColor: '#000',
       shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.2,
+      shadowOpacity: glassEffectAvailable ? 0.1 : 0.2,
       shadowRadius: 10,
       elevation: 5,
       paddingHorizontal: 10,
@@ -119,6 +152,8 @@ export default function TabLayout() {
       left: 20,
       right: 20,
       alignSelf: 'center',
+      borderWidth: glassEffectAvailable ? 1 : 0,
+      borderColor: glassEffectAvailable ? (theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)') : 'transparent',
     } as ViewStyle,
     tabBarItemStyle: {
       backgroundColor: 'transparent',