feat: update TabLayout to improve tab bar styling and handle safe area insets

app/(tabs)/_layout.tsx

@@ -1,15 +1,19 @@
 import { Tabs } from 'expo-router'
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, Platform } from 'react-native'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useTranslation } from 'react-i18next'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { HomeIcon, MessageIcon, MyIcon, VideoIcon } from '@/components/icon'
 
+const TAB_BAR_HEIGHT = 60
+
 export default function TabLayout() {
   const { t } = useTranslation()
   const insets = useSafeAreaInsets()
+  // Android 不需要额外的底部安全区域，iOS 和 Web 需要
+  const bottomInset = Platform.OS === 'android' ? 0 : insets.bottom
 
   return (
     <Tabs
@@ -20,19 +24,26 @@ export default function TabLayout() {
         tabBarHideOnKeyboard: true,
         tabBarShowLabel: true,
         tabBarStyle: {
-          backgroundColor: '#1C1E22CC',
+          position: 'absolute',
-          height: 84 + insets.bottom,
+          backgroundColor: '#1C1E22',
+          height: TAB_BAR_HEIGHT + bottomInset,
           paddingTop: 4,
-          paddingBottom: insets.bottom,
+          paddingBottom: bottomInset,
           paddingLeft: 4,
           paddingRight: 4,
           borderTopWidth: 0,
+          elevation: 0,
+          shadowOpacity: 0,
+          borderTopColor: 'transparent',
         },
         tabBarLabelStyle: {
           color: '#FFFFFF',
           fontSize: 10,
           fontWeight: '400',
         },
+        tabBarBackground: () => (
+          <View style={{ flex: 1, backgroundColor: '#1C1E22' }} />
+        ),
       }}
     >
       <Tabs.Screen