调整详情页样式

components/match-detail/match-tabs.tsx

@@ -1,4 +1,5 @@
 import { ThemedText } from "@/components/themed-text";
+import { IconSymbol, IconSymbolName } from "@/components/ui/icon-symbol";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
@@ -10,35 +11,62 @@ interface MatchTabsProps {
   sportId: number;
 }
 
-export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabsProps) {
+export function MatchTabs({
+  activeTab,
+  onTabChange,
+  isDark,
+  sportId,
+}: MatchTabsProps) {
   const { t } = useTranslation();
-  const containerBg = isDark ? "#121212" : "#F8F8F8";
+  const containerBg = isDark ? "#121212" : "#F5F5F5";
 
   // 根据 sportId 动态生成标签
   const getTabs = () => {
+    // 使用 Ionicons 名称
+    const commonTabs = [
+      {
+        id: "info",
+        label: t("detail.tabs.info"),
+        icon: "document-text-outline",
+      },
+      {
+        id: "h2h",
+        label: t("detail.tabs.h2h"),
+        icon: "swap-horizontal-outline",
+      },
+      { id: "chat", label: t("detail.tabs.chat"), icon: "chatbubbles-outline" },
+    ];
+
     if (sportId === 1) {
       // 足球: 详情、统计数据、赔率、交锋往绩、聊天
       return [
-        { id: "info", label: t("detail.tabs.info") },
-        { id: "stats", label: t("detail.tabs.stats") },
-        { id: "odds", label: t("detail.tabs.odds") },
-        { id: "h2h", label: t("detail.tabs.h2h") },
-        { id: "chat", label: t("detail.tabs.chat") },
+        {
+          id: "info",
+          label: t("detail.tabs.info"),
+          icon: "document-text-outline",
+        },
+        {
+          id: "stats",
+          label: t("detail.tabs.stats"),
+          icon: "stats-chart-outline",
+        },
+        { id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
+        {
+          id: "h2h",
+          label: t("detail.tabs.h2h"),
+          icon: "swap-horizontal-outline",
+        },
+        {
+          id: "chat",
+          label: t("detail.tabs.chat"),
+          icon: "chatbubbles-outline",
+        },
       ];
     } else if (sportId === 2) {
-      // 篮球: 详情、交锋往绩、聊天
-      return [
-        { id: "info", label: t("detail.tabs.info") },
-        { id: "h2h", label: t("detail.tabs.h2h") },
-        { id: "chat", label: t("detail.tabs.chat") },
-      ];
+      // 篮球
+      return commonTabs;
     }
-    // 默认: 详情、交锋往绩、聊天
-    return [
-      { id: "info", label: t("detail.tabs.info") },
-      { id: "h2h", label: t("detail.tabs.h2h") },
-      { id: "chat", label: t("detail.tabs.chat") },
-    ];
+    return commonTabs;
   };
 
   const tabs = getTabs();
@@ -52,23 +80,40 @@ export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabs
       >
         {tabs.map((tab) => {
           const isActive = activeTab === tab.id;
+          const activeColor = "#FF9800"; // 橙色
+          const inactiveColor = isDark ? "#AAA" : "#666"; // 增强对比度
+          const inactiveBg = isDark
+            ? "rgba(255,255,255,0.05)"
+            : "rgba(0,0,0,0.03)";
+
           return (
             <TouchableOpacity
               key={tab.id}
               onPress={() => onTabChange(tab.id)}
               style={[
                 styles.tabBtn,
-                isActive && styles.activeTabBtn,
-                isActive && {
-                  backgroundColor: isDark ? "rgba(255,255,255,0.05)" : "#FFF",
+                {
+                  backgroundColor: isActive
+                    ? isDark
+                      ? "#2C2C2E"
+                      : "#FFF"
+                    : inactiveBg,
                 },
               ]}
             >
+              <IconSymbol
+                name={tab.icon as IconSymbolName}
+                size={16}
+                color={isActive ? activeColor : inactiveColor}
+                style={{ marginRight: 6 }}
+              />
               <ThemedText
                 style={[
                   styles.tabText,
-                  isActive && styles.activeTabText,
-                  isActive && { color: "#FF9800" },
+                  {
+                    color: isActive ? activeColor : inactiveColor,
+                    fontWeight: isActive ? "700" : "500", // 强化选中粗体
+                  },
                 ]}
               >
                 {tab.label}
@@ -83,34 +128,23 @@ export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabs
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 12,
+    paddingVertical: 8,
   },
   scrollContent: {
     paddingHorizontal: 16,
-    gap: 12,
+    gap: 10,
+    alignItems: "center", // 确保所有 tabBtn 垂直对齐
   },
   tabBtn: {
-    paddingHorizontal: 20,
-    paddingVertical: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 15,
+    paddingVertical: 6,
     borderRadius: 20,
-    borderWidth: 1,
-    borderColor: "transparent",
-  },
-  activeTabBtn: {
-    borderColor: "rgba(255,152,0,0.3)",
-    // Shadow for iOS/Android if needed
-    elevation: 2,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
   },
   tabText: {
     fontSize: 14,
-    fontWeight: "500",
-    opacity: 0.6,
-  },
-  activeTabText: {
-    opacity: 1,
+    includeFontPadding: false, // 移除 Android 字体默认内边距
   },
 });