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

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>

app/(tabs)/explore.tsx

@@ -1,112 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/ui/collapsible';
-import { ExternalLink } from '@/components/external-link';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Fonts } from '@/constants/theme';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText
-          type="title"
-          style={{
-            fontFamily: Fonts.rounded,
-          }}>
-          Explore
-        </ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image
-          source={require('@/assets/images/react-logo.png')}
-          style={{ width: 100, height: 100, alignSelf: 'center' }}
-        />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful{' '}
-          <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
-            react-native-reanimated
-          </ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

app/(tabs)/favorite.tsx

@@ -0,0 +1,19 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function FavoriteScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">Favorites</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

app/(tabs)/finished.tsx

@@ -0,0 +1,19 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function FinishedScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">Finished Events</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

app/(tabs)/index.tsx

@@ -1,98 +1,24 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { HelloWave } from '@/components/hello-wave';
-import ParallaxScrollView from '@/components/parallax-scroll-view';
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { Link } from 'expo-router';
+import { HomeHeader } from "@/components/home-header";
+import { ThemedView } from "@/components/themed-view";
+import React from "react";
+import { ScrollView, StyleSheet } from "react-native";
 
 export default function HomeScreen() {
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: 'cmd + d',
-              android: 'cmd + m',
-              web: 'F12',
-            })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <Link href="/modal">
-          <Link.Trigger>
-            <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-          </Link.Trigger>
-          <Link.Preview />
-          <Link.Menu>
-            <Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
-            <Link.MenuAction
-              title="Share"
-              icon="square.and.arrow.up"
-              onPress={() => alert('Share pressed')}
-            />
-            <Link.Menu title="More" icon="ellipsis">
-              <Link.MenuAction
-                title="Delete"
-                icon="trash"
-                destructive
-                onPress={() => alert('Delete pressed')}
-              />
-            </Link.Menu>
-          </Link.Menu>
-        </Link>
-
-        <ThemedText>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    <ThemedView style={styles.container}>
+      <HomeHeader />
+      <ScrollView contentContainerStyle={styles.content}>
+        {/* Placeholder for future content */}
+      </ScrollView>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
+  container: {
+    flex: 1,
   },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  content: {
+    padding: 16,
   },
 });

app/(tabs)/live.tsx

@@ -0,0 +1,19 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function LiveScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">Live Streams</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

app/(tabs)/upcoming.tsx

@@ -0,0 +1,19 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function UpcomingScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">Upcoming Events</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

app/_layout.tsx

@@ -1,24 +1,34 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, ThemeProvider as NavigationThemeProvider } from '@react-navigation/native';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
 
 import { useColorScheme } from '@/hooks/use-color-scheme';
+import { ThemeProvider } from '@/context/ThemeContext';
+import '@/i18n'; // Initialize i18n
 
 export const unstable_settings = {
   anchor: '(tabs)',
 };
 
 export default function RootLayout() {
+  return (
+    <ThemeProvider>
+      <RootLayoutNav />
+    </ThemeProvider>
+  );
+}
+
+function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <NavigationThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
       </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+      <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
+    </NavigationThemeProvider>
   );
 }

app/profile.tsx

@@ -0,0 +1,193 @@
+import { Image } from "expo-image";
+import { Stack } from "expo-router";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useTheme } from "@/context/ThemeContext";
+import { changeLanguage } from "@/i18n";
+
+export default function ProfileScreen() {
+  const { theme, toggleTheme, setTheme, isSystemTheme, useSystemTheme } =
+    useTheme();
+  const { t, i18n } = useTranslation();
+  const isDark = theme === "dark";
+
+  const currentLanguage = i18n.language;
+
+  const toggleLanguage = () => {
+    const nextLang = currentLanguage.startsWith("en") ? "zh" : "en";
+    changeLanguage(nextLang);
+  };
+
+  const iconColor = isDark ? "#FFFFFF" : "#000000";
+  const textColor = isDark ? "#FFFFFF" : "#000000";
+  const subTextColor = isDark ? "#AAAAAA" : "#666666";
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: t("profile.title"),
+          headerShown: true,
+          // Ensure header matches theme to avoid white flash
+          headerStyle: {
+            backgroundColor: isDark ? "#000" : "#f2f2f7",
+          },
+          headerTintColor: textColor,
+          headerShadowVisible: false,
+          // Present the screen as a normal card and slide from right
+          presentation: "card",
+          animation: "slide_from_right",
+          // Set the scene/content background to match theme during transition
+          contentStyle: { backgroundColor: isDark ? "#000" : "#f2f2f7" },
+        }}
+      />
+      <ScrollView
+        style={[
+          styles.container,
+          { backgroundColor: isDark ? "#000" : "#f2f2f7" },
+        ]}
+      >
+        {/* User Info Section */}
+        <View
+          style={[
+            styles.section,
+            { backgroundColor: isDark ? "#1c1c1e" : "#fff" },
+          ]}
+        >
+          <View style={styles.profileHeader}>
+            <Image
+              source={{ uri: "https://via.placeholder.com/100" }}
+              style={styles.avatar}
+              contentFit="cover"
+            />
+            <View style={styles.profileInfo}>
+              <ThemedText type="title">{t("profile.name")}</ThemedText>
+              <ThemedText style={{ color: subTextColor }}>
+                user@example.com
+              </ThemedText>
+            </View>
+          </View>
+        </View>
+
+        {/* Settings Section */}
+        <ThemedText style={styles.sectionTitle}>
+          {t("settings.title")}
+        </ThemedText>
+
+        <View
+          style={[
+            styles.section,
+            { backgroundColor: isDark ? "#1c1c1e" : "#fff" },
+          ]}
+        >
+          {/* Theme Setting */}
+          <View style={styles.settingItem}>
+            <View style={styles.settingLabel}>
+              <IconSymbol
+                name="sunny"
+                size={20}
+                color={iconColor}
+                style={{ marginRight: 10 }}
+              />
+              <ThemedText>{t("settings.theme")}</ThemedText>
+            </View>
+            <View style={styles.settingControl}>
+              <TouchableOpacity onPress={toggleTheme} style={styles.button}>
+                <ThemedText>
+                  {theme === "light" ? t("settings.light") : t("settings.dark")}
+                </ThemedText>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Language Setting */}
+          <View
+            style={[
+              styles.settingItem,
+              {
+                borderTopWidth: StyleSheet.hairlineWidth,
+                borderTopColor: isDark ? "#38383a" : "#c6c6c8",
+              },
+            ]}
+          >
+            <View style={styles.settingLabel}>
+              <IconSymbol
+                name="globe"
+                size={20}
+                color={iconColor}
+                style={{ marginRight: 10 }}
+              />
+              <ThemedText>{t("settings.language")}</ThemedText>
+            </View>
+            <View style={styles.settingControl}>
+              <TouchableOpacity onPress={toggleLanguage} style={styles.button}>
+                <ThemedText>
+                  {currentLanguage.startsWith("zh")
+                    ? t("settings.chinese")
+                    : t("settings.english")}
+                </ThemedText>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  section: {
+    marginTop: 20,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 10, // iOS style groups
+    marginHorizontal: 16,
+  },
+  sectionTitle: {
+    marginLeft: 32,
+    marginTop: 20,
+    marginBottom: 5,
+    fontSize: 13,
+    textTransform: "uppercase",
+    opacity: 0.6,
+  },
+  profileHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+  },
+  avatar: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#ccc",
+  },
+  profileInfo: {
+    marginLeft: 15,
+  },
+  settingItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+  },
+  settingLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  settingControl: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  button: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+});