fix: 推荐图占位色、评论文字、弹幕背景色跟随暗黑主题

This commit is contained in:
Developer
2026-03-24 23:08:17 +08:00
parent f6ac2d3cd4
commit 12e770a0bf
3 changed files with 15 additions and 11 deletions

View File

@@ -209,7 +209,7 @@ export default function VideoDetailScreen() {
onPress={() => router.push(`/video/${item.bvid}` as any)} onPress={() => router.push(`/video/${item.bvid}` as any)}
activeOpacity={0.85} activeOpacity={0.85}
> >
<View style={[styles.relatedThumbWrap, { backgroundColor: theme.bg }]}> <View style={[styles.relatedThumbWrap, { backgroundColor: theme.card }]}>
<Image <Image
source={{ uri: proxyImageUrl(item.pic) }} source={{ uri: proxyImageUrl(item.pic) }}
style={styles.relatedThumb} style={styles.relatedThumb}

View File

@@ -4,16 +4,18 @@ import { Ionicons } from '@expo/vector-icons';
import type { Comment } from '../services/types'; import type { Comment } from '../services/types';
import { formatTime } from '../utils/format'; import { formatTime } from '../utils/format';
import { proxyImageUrl } from '../utils/imageUrl'; import { proxyImageUrl } from '../utils/imageUrl';
import { useTheme } from '../utils/theme';
interface Props { item: Comment; } interface Props { item: Comment; }
export function CommentItem({ item }: Props) { export function CommentItem({ item }: Props) {
const theme = useTheme();
return ( return (
<View style={styles.row}> <View style={[styles.row, { borderBottomColor: theme.border }]}>
<Image source={{ uri: proxyImageUrl(item.member.avatar) }} style={styles.avatar} /> <Image source={{ uri: proxyImageUrl(item.member.avatar) }} style={styles.avatar} />
<View style={styles.content}> <View style={styles.content}>
<Text style={styles.username}>{item.member.uname}</Text> <Text style={styles.username}>{item.member.uname}</Text>
<Text style={styles.message}>{item.content.message}</Text> <Text style={[styles.message, { color: theme.text }]}>{item.content.message}</Text>
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.time}>{formatTime(item.ctime)}</Text> <Text style={styles.time}>{formatTime(item.ctime)}</Text>
<View style={styles.likeRow}> <View style={styles.likeRow}>

View File

@@ -12,6 +12,7 @@ import {
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { DanmakuItem } from "../services/types"; import { DanmakuItem } from "../services/types";
import { danmakuColorToCss } from "../utils/danmaku"; import { danmakuColorToCss } from "../utils/danmaku";
import { useTheme } from "../utils/theme";
interface Props { interface Props {
danmakus: DanmakuItem[]; danmakus: DanmakuItem[];
@@ -65,6 +66,7 @@ export default function DanmakuList({
maxItems = 100, maxItems = 100,
giftCounts, giftCounts,
}: Props) { }: Props) {
const theme = useTheme();
const flatListRef = useRef<FlatList>(null); const flatListRef = useRef<FlatList>(null);
const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]); const [displayedItems, setDisplayedItems] = useState<DisplayedDanmaku[]>([]);
const [unseenCount, setUnseenCount] = useState(0); const [unseenCount, setUnseenCount] = useState(0);
@@ -213,7 +215,7 @@ export default function DanmakuList({
const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null; const guard = item.guardLevel ? GUARD_LABELS[item.guardLevel] : null;
const timeStr = formatLiveTime(item.timeline); const timeStr = formatLiveTime(item.timeline);
return ( return (
<Animated.View style={[liveStyles.row, { opacity: item._fadeAnim }]}> <Animated.View style={[liveStyles.row, { opacity: item._fadeAnim, borderBottomColor: theme.border }]}>
{timeStr ? ( {timeStr ? (
<Text style={liveStyles.time}>{timeStr}</Text> <Text style={liveStyles.time}>{timeStr}</Text>
) : null} ) : null}
@@ -240,27 +242,27 @@ export default function DanmakuList({
{item.uname ?? "匿名"} {item.uname ?? "匿名"}
</Text> </Text>
<Text style={liveStyles.colon}></Text> <Text style={liveStyles.colon}></Text>
<Text style={liveStyles.text} numberOfLines={2}> <Text style={[liveStyles.text, { color: theme.text }]} numberOfLines={2}>
{item.text} {item.text}
</Text> </Text>
</View> </View>
</Animated.View> </Animated.View>
); );
}, []); }, [theme]);
// ─── Video mode render (original bubble) ─────────────────────────────────── // ─── Video mode render (original bubble) ───────────────────────────────────
const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => { const renderVideoItem = useCallback(({ item }: { item: DisplayedDanmaku }) => {
const dotColor = danmakuColorToCss(item.color); const dotColor = danmakuColorToCss(item.color);
return ( return (
<Animated.View style={[styles.bubble, { opacity: item._fadeAnim }]}> <Animated.View style={[styles.bubble, { opacity: item._fadeAnim, backgroundColor: theme.bg }]}>
<View style={[styles.colorDot, { backgroundColor: dotColor }]} /> <View style={[styles.colorDot, { backgroundColor: dotColor }]} />
<Text style={styles.bubbleText} numberOfLines={3}> <Text style={[styles.bubbleText, { color: theme.text }]} numberOfLines={3}>
{item.text} {item.text}
</Text> </Text>
<Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text> <Text style={styles.timestamp}>{formatTimestamp(item.time)}</Text>
</Animated.View> </Animated.View>
); );
}, []); }, [theme]);
const keyExtractor = useCallback( const keyExtractor = useCallback(
(item: DisplayedDanmaku) => String(item._key), (item: DisplayedDanmaku) => String(item._key),
@@ -268,7 +270,7 @@ export default function DanmakuList({
); );
return ( return (
<View style={[styles.container, style]}> <View style={[styles.container, { backgroundColor: theme.card, borderTopColor: theme.border }, style]}>
{!hideHeader && ( {!hideHeader && (
<TouchableOpacity <TouchableOpacity
style={styles.header} style={styles.header}
@@ -298,7 +300,7 @@ export default function DanmakuList({
data={displayedItems} data={displayedItems}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}
renderItem={isLive ? renderLiveItem : renderVideoItem} renderItem={isLive ? renderLiveItem : renderVideoItem}
style={isLive ? liveStyles.list : styles.list} style={[isLive ? liveStyles.list : styles.list, { backgroundColor: theme.bg }]}
contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent} contentContainerStyle={isLive ? liveStyles.listContent : styles.listContent}
onScroll={handleScroll} onScroll={handleScroll}
onScrollBeginDrag={handleScrollBeginDrag} onScrollBeginDrag={handleScrollBeginDrag}