161 lines
4.2 KiB
TypeScript
161 lines
4.2 KiB
TypeScript
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";
|
|
|
|
interface MatchTabsProps {
|
|
activeTab: string;
|
|
onTabChange: (tab: string) => void;
|
|
isDark: boolean;
|
|
sportId: number;
|
|
}
|
|
|
|
export function MatchTabs({
|
|
activeTab,
|
|
onTabChange,
|
|
isDark,
|
|
sportId,
|
|
}: MatchTabsProps) {
|
|
const { t } = useTranslation();
|
|
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"),
|
|
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 commonTabs;
|
|
} else if (sportId === 3) {
|
|
// 网球: 详情、聊天
|
|
return [
|
|
{
|
|
id: "info",
|
|
label: t("detail.tabs.info"),
|
|
icon: "document-text-outline",
|
|
},
|
|
{ id: "chat", label: t("detail.tabs.chat"), icon: "chatbubbles-outline" },
|
|
];
|
|
}
|
|
return commonTabs;
|
|
};
|
|
|
|
const tabs = getTabs();
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: containerBg }]}>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.scrollContent}
|
|
>
|
|
{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,
|
|
{
|
|
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,
|
|
{
|
|
color: isActive ? activeColor : inactiveColor,
|
|
fontWeight: isActive ? "700" : "500", // 强化选中粗体
|
|
},
|
|
]}
|
|
>
|
|
{tab.label}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingVertical: 8,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: 16,
|
|
gap: 10,
|
|
alignItems: "center", // 确保所有 tabBtn 垂直对齐
|
|
},
|
|
tabBtn: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: 15,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
},
|
|
tabText: {
|
|
fontSize: 14,
|
|
includeFontPadding: false, // 移除 Android 字体默认内边距
|
|
},
|
|
});
|