physical/physical-expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

无图片默认渐变色头像

Browse Source
This commit is contained in:
xianyi
2026-01-22 10:52:17 +08:00
parent cf9604d73e
commit 9e7f8dadec
4 changed files with 242 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/match-card-league.tsx
View File

@@ -4,7 +4,9 @@ import { Colors } from "@/constants/theme";
import { useAppState } from "@/context/AppStateContext";
import { useTheme } from "@/context/ThemeContext";
import { addFavorite, removeFavorite } from "@/lib/api";
import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
import { Match } from "@/types/api";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router";
import React, { useState } from "react";
import { Image, Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
@@ -179,14 +181,31 @@ export function MatchCardLeague({
<View style={styles.teamsColumn}>
<View style={styles.teamRow}>
<Image
source={{
uri: isTennis
? (match as any).eventFirstPlayerLogo
: ((match as any).homeLogo || match.homeTeamLogo || "https://placehold.co/24x24/png")
}}
style={styles.teamLogo}
/>
{(() => {
const teamName = isTennis ? (match as any).eventFirstPlayer : (match.home || match.homeTeamName);
const logoUri = isTennis
? (match as any).eventFirstPlayerLogo
: ((match as any).homeLogo || match.homeTeamLogo);
const hasLogo = logoUri && logoUri.trim() !== "" && !logoUri.includes("placehold");
const gradient = getLogoGradient(teamName || "");
const initials = getInitials(teamName || "");
return hasLogo ? (
<Image
source={{ uri: logoUri }}
style={styles.teamLogo}
/>
) : (
<LinearGradient
colors={[gradient.color1, gradient.color2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.teamLogoGradient}
>
<ThemedText style={styles.teamLogoText}>{initials}</ThemedText>
</LinearGradient>
);
})()}
<View style={styles.teamNameContainer}>
<ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
{isTennis ? (match as any).eventFirstPlayer : (match.home || match.homeTeamName)}
@@ -197,14 +216,31 @@ export function MatchCardLeague({
</View>
<View style={[styles.teamRow, { marginTop: 10 }]}>
<Image
source={{
uri: isTennis
? (match as any).eventSecondPlayerLogo
: ((match as any).awayLogo || match.awayTeamLogo || "https://placehold.co/24x24/png")
}}
style={styles.teamLogo}
/>
{(() => {
const teamName = isTennis ? (match as any).eventSecondPlayer : (match.away || match.awayTeamName);
const logoUri = isTennis
? (match as any).eventSecondPlayerLogo
: ((match as any).awayLogo || match.awayTeamLogo);
const hasLogo = logoUri && logoUri.trim() !== "" && !logoUri.includes("placehold");
const gradient = getLogoGradient(teamName || "");
const initials = getInitials(teamName || "");
return hasLogo ? (
<Image
source={{ uri: logoUri }}
style={styles.teamLogo}
/>
) : (
<LinearGradient
colors={[gradient.color1, gradient.color2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.teamLogoGradient}
>
<ThemedText style={styles.teamLogoText}>{initials}</ThemedText>
</LinearGradient>
);
})()}
<View style={styles.teamNameContainer}>
<ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
{isTennis ? (match as any).eventSecondPlayer : (match.away || match.awayTeamName)}
@@ -310,13 +346,26 @@ const styles = StyleSheet.create({
marginRight: 12,
backgroundColor: "#E5E5E5",
},
teamLogoGradient: {
width: 24,
height: 24,
borderRadius: 14,
marginRight: 12,
alignItems: "center",
justifyContent: "center",
},
teamLogoText: {
fontSize: 9,
fontWeight: "700",
color: "rgba(255, 255, 255, 0.92)",
},
teamNameContainer: {
flexDirection: "row",
alignItems: "center",
flex: 1,
},
teamName: {
fontSize: 15,
fontSize: 13,
fontWeight: "500",
},
cardBadge: {