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 { 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 { ThemedView } from "@/components/ThemedView";
import { ThemedText } from "@/components/ThemedText";
@@ -167,7 +167,7 @@ export default function HomeScreen() {
<View style={dynamicStyles.headerContainer}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<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 }) => (
<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 { 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 { Colors } from "@/constants/Colors";
import { useButtonAnimation } from "@/hooks/useAnimation";
@@ -108,7 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
return (
<Animated.View style={[animationStyle, style]}>
<Pressable
android_ripple={{ color: Colors.dark.link, borderless: false }}
android_ripple={Platform.isTV ? {color:'transparent'} : { color: Colors.dark.link, borderless: false }}
ref={ref}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}

28
components/VideoCard.tv.tsx
View File

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