Ma/OrionTV
1
0
Fork 0
mirror of https://github.com/zimplexing/OrionTV.git synced 2026-02-04 03:36:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(platform): customize android ripple effect for Pressable based on platform type

Browse Source
This commit is contained in:
James Chen
2025-08-27 18:07:22 +08:00
parent 4c93736c5e
commit 9bcdeaa44d
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useCallback, useRef, useState } from "react"; import React, { useEffect, useCallback, useRef, useState } from "react";
import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar } from "react-native"; import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar, Platform } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ThemedView } from "@/components/ThemedView"; import { ThemedView } from "@/components/ThemedView";
import { ThemedText } from "@/components/ThemedText"; import { ThemedText } from "@/components/ThemedText";
@@ -167,7 +167,7 @@ export default function HomeScreen() {
<View style={dynamicStyles.headerContainer}> <View style={dynamicStyles.headerContainer}>
<View style={{ flexDirection: "row", alignItems: "center" }}> <View style={{ flexDirection: "row", alignItems: "center" }}>
<ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText> <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
<Pressable android_ripple={{color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}> <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : {color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
{({ focused }) => ( {({ focused }) => (
<ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText> <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
)} )}

4
components/StyledButton.tsx
View File

@@ -1,5 +1,5 @@
import React, { forwardRef } from "react"; import React, { forwardRef } from "react";
import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View } from "react-native"; import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View, Platform } from "react-native";
import { ThemedText } from "./ThemedText"; import { ThemedText } from "./ThemedText";
import { Colors } from "@/constants/Colors"; import { Colors } from "@/constants/Colors";
import { useButtonAnimation } from "@/hooks/useAnimation"; import { useButtonAnimation } from "@/hooks/useAnimation";
@@ -108,7 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
return ( return (
<Animated.View style={[animationStyle, style]}> <Animated.View style={[animationStyle, style]}>
<Pressable <Pressable
android_ripple={{ color: Colors.dark.link, borderless: false }} android_ripple={Platform.isTV ? {color:'transparent'} : { color: Colors.dark.link, borderless: false }}
ref={ref} ref={ref}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)} onBlur={() => setIsFocused(false)}

28
components/VideoCard.tv.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react"; import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated } from "react-native"; import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated, Platform } from "react-native";
import { useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { Star, Play } from "lucide-react-native"; import { Star, Play } from "lucide-react-native";
import { PlayRecordManager } from "@/services/storage"; import { PlayRecordManager } from "@/services/storage";
@@ -148,7 +148,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
return ( return (
<Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}> <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
<Pressable <Pressable
android_ripple={{ android_ripple={Platform.isTV ? {color:'transparent'} : {
color: Colors.dark.link, color: Colors.dark.link,
borderless: false, borderless: false,
foreground: true, foreground: true,
@@ -162,17 +162,18 @@ const VideoCard = forwardRef<View, VideoCardProps>(
delayLongPress={1000} delayLongPress={1000}
> >
<View style={styles.card}> <View style={styles.card}>
<Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
{isFocused && ( <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
<View style={styles.overlay}> {isFocused && (
{isContinueWatching && ( <View style={styles.overlay}>
<View style={styles.continueWatchingBadge}> {isContinueWatching && (
<Play size={16} color="#ffffff" fill="#ffffff" /> <View style={styles.continueWatchingBadge}>
<ThemedText style={styles.continueWatchingText}>继续观看</ThemedText> <Play size={16} color="#ffffff" fill="#ffffff" />
</View> <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
)} </View>
</View> )}
)} </View>
)}
{/* 进度条 */} {/* 进度条 */}
{isContinueWatching && ( {isContinueWatching && (
@@ -197,6 +198,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
<Text style={styles.badgeText}>{sourceName}</Text> <Text style={styles.badgeText}>{sourceName}</Text>
</View> </View>
)} )}
</View> </View>
<View style={styles.infoContainer}> <View style={styles.infoContainer}>
<ThemedText numberOfLines={1}>{title}</ThemedText> <ThemedText numberOfLines={1}>{title}</ThemedText>