React Native TV端卡片滚动缩放效果实现问题求助

嘿，我仔细看了你写的React Native TV卡片滚动缩放的代码，确实存在几个小问题导致效果不符合预期——比如卡片放大时只往底部扩展、首尾卡片无法被选中聚焦，而且切换时没有平滑动画。我帮你调整了代码，解决这些问题，同时让交互更贴合TV端的操作逻辑~

核心问题分析 #

1. 卡片放大仅向下扩展：原代码直接修改宽高时，卡片布局从左上角开始延伸，视觉上只有底部被拉长，没有做到均匀缩放
2. 首尾卡片无法聚焦：原FlatList的滚动配置和可视区域判断逻辑，导致首尾卡片无法滚动到屏幕中心被识别为聚焦项
3. 动画过渡生硬：直接通过条件判断切换样式是瞬间变化，没有平滑的过渡效果

修正后的完整代码 #

import React, { useRef, useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, Image, Dimensions, Animated, Pressable } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const CARD_BASE_WIDTH = SCREEN_WIDTH * 0.25;
const CARD_BASE_HEIGHT = 180;
const CARD_SCALE_FACTOR = 1.5; // 放大比例，对应原需求的尺寸比例
const SPACING = 15;
const FOCUSED_SPACING = SPACING * 2;

const data = [
  { id: '1', title: 'Card 1', image: 'https://via.placeholder.com/300x180' },
  { id: '2', title: 'Card 2', image: 'https://via.placeholder.com/300x180' },
  { id: '3', title: 'Card 3', image: 'https://via.placeholder.com/300x180' },
  { id: '4', title: 'Card 4', image: 'https://via.placeholder.com/300x180' },
  { id: '5', title: 'Card 5', image: 'https://via.placeholder.com/300x180' },
];

export default function CurrentCollectionScreen() {
  const [focusedIndex, setFocusedIndex] = useState(0);
  const flatListRef = useRef(null);
  const scaleAnimations = useRef(
    data.map(() => new Animated.Value(1))
  ).current;

  // 焦点切换时的平滑动画
  useEffect(() => {
    data.forEach((_, index) => {
      Animated.timing(scaleAnimations[index], {
        toValue: index === focusedIndex ? CARD_SCALE_FACTOR : 1,
        duration: 200,
        useNativeDriver: true,
      }).start();
    });
  }, [focusedIndex, scaleAnimations]);

  // TV端焦点切换逻辑，比可视区域判断更准确
  const handleCardFocus = (index) => {
    setFocusedIndex(index);
    // 自动滚动到聚焦卡片的中心位置
    flatListRef.current?.scrollToIndex({
      index,
      animated: true,
      viewPosition: 0.5,
    });
  };

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        horizontal
        data={data}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingHorizontal: SCREEN_WIDTH / 2 - CARD_BASE_WIDTH / 2 }}
        contentInset={{
          left: SCREEN_WIDTH / 2 - CARD_BASE_WIDTH / 2,
          right: SCREEN_WIDTH / 2 - CARD_BASE_WIDTH / 2,
        }}
        showsHorizontalScrollIndicator={false}
        snapToAlignment="center"
        snapToInterval={CARD_BASE_WIDTH + SPACING}
        decelerationRate="fast"
        renderItem={({ item, index }) => {
          const isFocused = index === focusedIndex;
          const scale = scaleAnimations[index];
          // 聚焦时增加左右间距，拉开与其他卡片的距离
          const horizontalMargin = isFocused ? FOCUSED_SPACING : SPACING / 2;

          return (
            <Pressable
              style={{ marginHorizontal: horizontalMargin }}
              onFocus={() => handleCardFocus(index)}
              focusable
            >
              <Animated.View
                style={[
                  styles.card,
                  {
                    width: CARD_BASE_WIDTH,
                    height: CARD_BASE_HEIGHT,
                    transform: [{ scale }],
                  },
                ]}
              >
                <Image source={{ uri: item.image }} style={styles.image} />
                <Text style={styles.title}>{item.title}</Text>
              </Animated.View>
            </Pressable>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    justifyContent: 'center',
    paddingTop: 60,
  },
  card: {
    backgroundColor: '#1c1c1e',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'flex-start',
    overflow: 'hidden', // 防止图片缩放时超出卡片圆角
  },
  image: {
    width: '100%',
    height: '75%',
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  },
  title: {
    color: '#fff',
    fontSize: 14,
    padding: 8,
    textAlign: 'center',
  },
});

关键修改说明 #

1. 中心缩放动画：用Animated.Value的scale变换替代直接修改宽高，确保卡片从中心均匀放大，解决了仅向下扩展的问题
2. 首尾卡片聚焦修复：通过contentInset和contentContainerStyle设置左右内边距，让首尾卡片能滚动到屏幕中心；开启snapToAlignment和snapToInterval让滚动自动对齐，确保所有卡片都能被聚焦
3. TV端焦点优化：用Pressable的onFocus事件跟踪焦点变化，比依赖可视区域判断更符合TV端遥控器导航的交互逻辑
4. 平滑过渡效果：通过Animated.timing实现缩放动画的平滑过渡，提升视觉体验
5. 布局细节优化：给卡片添加overflow: 'hidden'，防止图片缩放时超出卡片圆角范围

内容来源于stack exchange