实现直播详情页
This commit is contained in:
yuchenglong
@@ -7,6 +7,7 @@ import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useAppState } from "@/context/AppStateContext";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { League, Match, Sport } from "@/types/api";
|
||||
@@ -27,6 +28,9 @@ export default function HomeScreen() {
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
|
||||
const { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
|
||||
useAppState();
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
@@ -36,18 +40,25 @@ export default function HomeScreen() {
|
||||
|
||||
const deviceTimeZone = useMemo(() => {
|
||||
try {
|
||||
console.log("deviceTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
console.log(
|
||||
"deviceTimeZone",
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
);
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
|
||||
// 初始化时同步设备时区到 Context
|
||||
useEffect(() => {
|
||||
updateTimezone(deviceTimeZone);
|
||||
}, [deviceTimeZone]);
|
||||
|
||||
// Selection States - 从 Context 读取
|
||||
const selectedSportId = state.selectedSportId;
|
||||
const selectedDate = state.selectedDate;
|
||||
const selectedLeagueKey = state.selectedLeagueKey;
|
||||
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||
|
||||
// Modal Visibilities
|
||||
@@ -103,29 +114,93 @@ export default function HomeScreen() {
|
||||
const apiList = await fetchSports();
|
||||
// 创建8个运动的完整列表
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{
|
||||
id: 1,
|
||||
name: "football",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "basketball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "tennis",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "cricket",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "baseball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "badminton",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "snooker",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "volleyball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// 合并API返回的运动和默认列表
|
||||
const sportsMap = new Map<number, Sport>();
|
||||
apiList.forEach((sport) => {
|
||||
sportsMap.set(sport.id, sport);
|
||||
});
|
||||
|
||||
|
||||
// 补充默认运动到8个
|
||||
defaultSports.forEach((sport) => {
|
||||
if (!sportsMap.has(sport.id)) {
|
||||
sportsMap.set(sport.id, sport);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const allSports = Array.from(sportsMap.values())
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.slice(0, 8);
|
||||
@@ -135,17 +210,80 @@ export default function HomeScreen() {
|
||||
console.error(e);
|
||||
// API失败时使用默认8个运动
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{
|
||||
id: 1,
|
||||
name: "football",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "basketball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "tennis",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "cricket",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "baseball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "badminton",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "snooker",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "volleyball",
|
||||
description: "",
|
||||
icon: "",
|
||||
isActive: true,
|
||||
updatedAt: "",
|
||||
createdAt: "",
|
||||
},
|
||||
];
|
||||
setSports(defaultSports);
|
||||
setSelectedSportId(1);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -167,7 +305,11 @@ export default function HomeScreen() {
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await fetchTodayMatches(sportId, selectedDate, deviceTimeZone);
|
||||
const list = await fetchTodayMatches(
|
||||
sportId,
|
||||
selectedDate,
|
||||
deviceTimeZone
|
||||
);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -177,7 +319,7 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
|
||||
// 获取当前运动的国际化名称
|
||||
const getSportName = (sport: Sport | undefined): string => {
|
||||
if (!sport) return t("home.select_sport");
|
||||
@@ -196,7 +338,7 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
updateLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
@@ -230,10 +372,10 @@ export default function HomeScreen() {
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
||||
>
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
/>
|
||||
<ThemedText style={styles.filterText}>
|
||||
{filterMode === "time" ? t("home.time") : t("home.league")}
|
||||
@@ -285,8 +427,9 @@ export default function HomeScreen() {
|
||||
>
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||
{selectedLeagueKey
|
||||
? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
|
||||
{selectedLeagueKey
|
||||
? leagues.find((l) => l.key === selectedLeagueKey)?.name ||
|
||||
t("home.select_league")
|
||||
: t("home.select_league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
@@ -327,7 +470,7 @@ export default function HomeScreen() {
|
||||
title={t("home.select_sport")}
|
||||
options={sportOptions}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
onSelect={updateSportId}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -336,7 +479,7 @@ export default function HomeScreen() {
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
onSelectDate={updateDate}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,245 +1,84 @@
|
||||
import { HomeHeader } from "@/components/home-header";
|
||||
import { LeagueModal } from "@/components/league-modal";
|
||||
import { MatchCard } from "@/components/match-card";
|
||||
import { SelectionModal } from "@/components/selection-modal";
|
||||
import { CalendarModal } from "@/components/simple-calendar";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useAppState } from "@/context/AppStateContext";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { League, Match, Sport } from "@/types/api";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { fetchLiveScore } from "@/lib/api";
|
||||
import { LiveScoreMatch, Match } from "@/types/api";
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { ActivityIndicator, FlatList, StyleSheet, View } from "react-native";
|
||||
|
||||
export default function HomeScreen() {
|
||||
export default function LiveScreen() {
|
||||
const router = useRouter();
|
||||
const { theme } = useTheme();
|
||||
|
||||
const { t } = useTranslation();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
const { state } = useAppState();
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const deviceTimeZone = useMemo(() => {
|
||||
try {
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
|
||||
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||
|
||||
// Modal Visibilities
|
||||
const [showSportModal, setShowSportModal] = useState(false);
|
||||
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
||||
const [showLeagueModal, setShowLeagueModal] = useState(false);
|
||||
|
||||
// Load Sports and Leagues
|
||||
useEffect(() => {
|
||||
loadSports();
|
||||
loadLeagues();
|
||||
}, []);
|
||||
loadLiveMatches();
|
||||
// 每30秒自动刷新一次实时比分
|
||||
const interval = setInterval(loadLiveMatches, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [state.selectedSportId, state.selectedLeagueKey, state.timezone]);
|
||||
|
||||
// Load Matches when sport or date changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadMatches(selectedSportId);
|
||||
const loadLiveMatches = async () => {
|
||||
if (!state.selectedSportId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}, [selectedSportId, selectedDate]);
|
||||
|
||||
// Load Leagues when sport changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadLeagues();
|
||||
}
|
||||
}, [selectedSportId]);
|
||||
|
||||
const loadSports = async () => {
|
||||
try {
|
||||
const apiList = await fetchSports();
|
||||
// 创建8个运动的完整列表
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
|
||||
// 合并API返回的运动和默认列表
|
||||
const sportsMap = new Map<number, Sport>();
|
||||
apiList.forEach((sport) => {
|
||||
sportsMap.set(sport.id, sport);
|
||||
});
|
||||
|
||||
// 补充默认运动到8个
|
||||
defaultSports.forEach((sport) => {
|
||||
if (!sportsMap.has(sport.id)) {
|
||||
sportsMap.set(sport.id, sport);
|
||||
}
|
||||
});
|
||||
|
||||
const allSports = Array.from(sportsMap.values())
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.slice(0, 8);
|
||||
|
||||
setSports(allSports);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// API失败时使用默认8个运动
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
setSports(defaultSports);
|
||||
setSelectedSportId(1);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载联赛
|
||||
const loadLeagues = async () => {
|
||||
try {
|
||||
if (selectedSportId !== null) {
|
||||
const list = await fetchLeagues(selectedSportId, "");
|
||||
setLeagues(list);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Pass selectedDate if API supported it
|
||||
const list = await fetchTodayMatches(sportId, undefined, deviceTimeZone);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
const liveData = await fetchLiveScore(
|
||||
state.selectedSportId,
|
||||
state.selectedLeagueKey ? parseInt(state.selectedLeagueKey) : undefined,
|
||||
state.timezone
|
||||
);
|
||||
|
||||
// 检查返回的数据是否为空或无效
|
||||
if (!liveData || !Array.isArray(liveData)) {
|
||||
console.warn("LiveScore returned invalid data:", liveData);
|
||||
setMatches([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 将 LiveScoreMatch 转换为 Match 格式
|
||||
const converted: Match[] = liveData.map((item: LiveScoreMatch) => ({
|
||||
id: item.event_key.toString(),
|
||||
league: item.league_name,
|
||||
time: item.event_time,
|
||||
home: item.event_home_team,
|
||||
away: item.event_away_team,
|
||||
meta: item.event_status,
|
||||
scoreText: item.event_final_result || "0 - 0",
|
||||
fav: false,
|
||||
leagueId: item.league_key,
|
||||
sportId: state.selectedSportId ?? undefined,
|
||||
isLive: true,
|
||||
}));
|
||||
|
||||
setMatches(converted);
|
||||
} catch (error) {
|
||||
console.error("Load live matches error:", error);
|
||||
setMatches([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
// 获取当前运动的国际化名称
|
||||
const getSportName = (sport: Sport | undefined): string => {
|
||||
if (!sport) return t("home.select_sport");
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
|
||||
return t(`sports.${sportKey}`, { defaultValue: sport.name });
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<View style={styles.filterContainer}>
|
||||
{/* Time/League Filter Toggle */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
||||
>
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
/>
|
||||
<ThemedText style={styles.filterText}>
|
||||
{filterMode === "time" ? t("home.time") : t("home.league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Sport Selector */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.filterBtn,
|
||||
styles.mainFilterBtn,
|
||||
{ backgroundColor: filterBg },
|
||||
]}
|
||||
onPress={() => setShowSportModal(true)}
|
||||
>
|
||||
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>
|
||||
{getSportName(currentSport)}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Date/League Selector */}
|
||||
{filterMode === "time" ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setShowCalendarModal(true)}
|
||||
>
|
||||
<ThemedText style={styles.dateDayText}>
|
||||
{selectedDate.getDate()}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.dateMonthText}>
|
||||
{selectedDate.getHours()}:
|
||||
{selectedDate.getMinutes().toString().padStart(2, "0")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setShowLeagueModal(true)}
|
||||
>
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||
{selectedLeagueKey
|
||||
? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
|
||||
: t("home.select_league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<HomeHeader />
|
||||
|
||||
{renderHeader()}
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
@@ -249,7 +88,21 @@ export default function HomeScreen() {
|
||||
<FlatList
|
||||
data={matches}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => <MatchCard match={item} />}
|
||||
renderItem={({ item }) => (
|
||||
<MatchCard
|
||||
match={item}
|
||||
onPress={(m) => {
|
||||
router.push({
|
||||
pathname: "/live-detail/[id]",
|
||||
params: {
|
||||
id: m.id,
|
||||
league_id: m.leagueId?.toString() || "",
|
||||
sport_id: m.sportId?.toString() || "",
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.center}>
|
||||
@@ -258,49 +111,6 @@ export default function HomeScreen() {
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<SelectionModal
|
||||
visible={showSportModal}
|
||||
onClose={() => setShowSportModal(false)}
|
||||
title={t("home.select_sport")}
|
||||
options={sports.map((s) => {
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
|
||||
return {
|
||||
id: s.id,
|
||||
label: s.name, // 保留原始名称用于图标识别
|
||||
value: s.id,
|
||||
icon: s.icon,
|
||||
};
|
||||
})}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
/>
|
||||
|
||||
<CalendarModal
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
/>
|
||||
|
||||
<LeagueModal
|
||||
visible={showLeagueModal}
|
||||
onClose={() => setShowLeagueModal(false)}
|
||||
leagues={leagues}
|
||||
selectedLeagueKey={selectedLeagueKey}
|
||||
onSelect={handleLeagueSelect}
|
||||
/>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
@@ -315,44 +125,6 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
paddingTop: 50,
|
||||
},
|
||||
filterContainer: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
filterBtn: {
|
||||
flex: 1,
|
||||
height: 44, // Increased from 36
|
||||
flexDirection: "column", // Stacked logic for Date, or Row for others
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 8, // Rounded corners
|
||||
// iOS shadow
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
// Android elevation
|
||||
elevation: 2,
|
||||
},
|
||||
mainFilterBtn: {
|
||||
flex: 2, // Wider for sport
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
},
|
||||
filterText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
dateDayText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
dateMonthText: {
|
||||
fontSize: 10,
|
||||
opacity: 0.6,
|
||||
},
|
||||
listContent: {
|
||||
padding: 16,
|
||||
paddingTop: 8,
|
||||
|
||||
@@ -8,6 +8,7 @@ import { StatusBar } from "expo-status-bar";
|
||||
import "react-native-reanimated";
|
||||
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { AppStateProvider } from "@/context/AppStateContext";
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
import { useColorScheme } from "@/hooks/use-color-scheme";
|
||||
import "@/i18n"; // Initialize i18n
|
||||
@@ -19,7 +20,9 @@ export const unstable_settings = {
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<RootLayoutNav />
|
||||
<AppStateProvider>
|
||||
<RootLayoutNav />
|
||||
</AppStateProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -75,6 +78,13 @@ function RootLayoutNav() {
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="live-detail/[id]"
|
||||
options={{
|
||||
animation: "slide_from_right",
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
|
||||
</NavigationThemeProvider>
|
||||
|
||||
156
app/live-detail/[id].tsx
Normal file
156
app/live-detail/[id].tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { EventsTimeline } from "@/components/live-detail/events-timeline";
|
||||
import { LiveLeagueInfo } from "@/components/live-detail/live-league-info";
|
||||
import { LiveMatchTabs } from "@/components/live-detail/live-match-tabs";
|
||||
import { LiveScoreHeader } from "@/components/live-detail/live-score-header";
|
||||
import { OddsCard } from "@/components/live-detail/odds-card";
|
||||
import { OtherInfoCard } from "@/components/live-detail/other-info-card";
|
||||
import { StatsCard } from "@/components/live-detail/stats-card";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLiveScore } from "@/lib/api";
|
||||
import { LiveScoreMatch } from "@/types/api";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
|
||||
export default function LiveDetailScreen() {
|
||||
const { id, league_id, sport_id } = useLocalSearchParams<{
|
||||
id: string;
|
||||
league_id: string;
|
||||
sport_id: string;
|
||||
}>();
|
||||
const { theme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const insets = useSafeAreaInsets();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [match, setMatch] = useState<LiveScoreMatch | null>(null);
|
||||
const [activeTab, setActiveTab] = useState("detail"); // Default to detail to show all data
|
||||
|
||||
useEffect(() => {
|
||||
loadLiveDetail();
|
||||
}, [id, league_id]);
|
||||
|
||||
const loadLiveDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Fetch live scores for the league
|
||||
const sportId = parseInt(sport_id || "1");
|
||||
const leagueId = parseInt(league_id || "0");
|
||||
|
||||
const liveData = await fetchLiveScore(sportId, leagueId);
|
||||
|
||||
if (liveData && Array.isArray(liveData)) {
|
||||
// Find the specific match
|
||||
const found = liveData.find((m) => m.event_key.toString() === id);
|
||||
if (found) {
|
||||
setMatch(found);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ThemedView style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
if (!match) {
|
||||
return (
|
||||
<ThemedView style={styles.center}>
|
||||
<ThemedText>{t("detail.not_found")}</ThemedText>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={loadLiveDetail}>
|
||||
<ThemedText style={styles.retryText}>{t("detail.retry")}</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const renderTabContent = () => {
|
||||
switch (activeTab) {
|
||||
case "stats":
|
||||
return <StatsCard match={match} isDark={isDark} />;
|
||||
case "odds":
|
||||
return <OddsCard match={match} isDark={isDark} />;
|
||||
case "detail":
|
||||
return (
|
||||
<>
|
||||
<OddsCard match={match} isDark={isDark} />
|
||||
<StatsCard match={match} isDark={isDark} />
|
||||
<EventsTimeline match={match} isDark={isDark} />
|
||||
<OtherInfoCard match={match} isDark={isDark} />
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ThemedText style={{ opacity: 0.5 }}>
|
||||
{t("detail.empty_stats")}
|
||||
</ThemedText>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ScrollView
|
||||
bounces={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: insets.bottom + 20 }}
|
||||
>
|
||||
<LiveScoreHeader match={match} topInset={insets.top} />
|
||||
<LiveLeagueInfo match={match} />
|
||||
<LiveMatchTabs
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isDark={isDark}
|
||||
/>
|
||||
|
||||
{renderTabContent()}
|
||||
</ScrollView>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
minHeight: 200,
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: 20,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 8,
|
||||
},
|
||||
retryText: {
|
||||
color: "#FFF",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user