添加主题切换、多语言支持

app/(tabs)/_layout.tsx

@@ -1,33 +1,76 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { Tabs } from "expo-router";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { HapticTab } from "@/components/haptic-tab";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import TabBarBackground from "@/components/ui/tab-bar-background";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const { theme } = useTheme();
+  const { t } = useTranslation();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[theme].tint,
         headerShown: false,
         tabBarButton: HapticTab,
-      }}>
+        tabBarBackground: TabBarBackground,
+        tabBarStyle: Platform.select({
+          ios: {
+            position: "absolute",
+          },
+          default: {},
+        }),
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: t("tabs.all"),
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="list" color={color} />
+          ),
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="live"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: t("tabs.live"),
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="play-circle" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="upcoming"
+        options={{
+          title: t("tabs.upcoming"),
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="calendar" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="finished"
+        options={{
+          title: t("tabs.finished"),
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="checkmark-circle" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="favorite"
+        options={{
+          title: t("tabs.fav"),
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="star" color={color} />
+          ),
         }}
       />
     </Tabs>