如何自定义React Native FlatList的滚动与吸附动画？解决卡顿及时长问题

核心思路 #

放弃FlatList内置的自动吸附逻辑，改用Reanimated监听滚动状态，手动计算目标位置并通过自定义动画控制滚动到指定项，以此实现可配置时长的平滑吸附效果。

实现步骤 #

1. 依赖准备 #

确保安装Reanimated及React Native Gesture Handler（Reanimated v2+版本必需）：

npm install react-native-reanimated react-native-gesture-handler

（注：需按照Reanimated官方要求完成原生端配置，比如iOS执行pod install、Android修改gradle文件）

2. 完整代码实现 #

import React, { useRef, useState } from 'react';
import { Dimensions, View, Text } from 'react-native';
import Animated, {
  useAnimatedRef,
  useAnimatedScrollHandler,
  useSharedValue,
  withTiming,
  runOnJS,
} from 'react-native-reanimated';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const ITEM_WIDTH = SCREEN_WIDTH;

const CustomSnapFlatList = ({ data }) => {
  const flatListRef = useAnimatedRef();
  const scrollOffset = useSharedValue(0);
  const [currentIndex, setCurrentIndex] = useState(0);
  const isScrolling = useSharedValue(false);

  // 监听滚动事件，判断滚动结束时机并计算目标索引
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollOffset.value = event.contentOffset.x;
    },
    onBeginDrag: () => {
      isScrolling.value = true;
    },
    onEndDrag: () => {
      isScrolling.value = false;
      // 计算当前最接近的目标项索引
      const targetIndex = Math.round(scrollOffset.value / ITEM_WIDTH);
      // 限制索引在有效范围内
      const clampedIndex = Math.max(0, Math.min(data.length - 1, targetIndex));
      
      // 执行自定义时长的滚动动画
      scrollOffset.value = withTiming(clampedIndex * ITEM_WIDTH, {
        duration: 500, // 自定义动画时长，单位毫秒
        easing: (t) => t * t * (3 - 2 * t), // 可选：自定义缓动函数，让动画更自然
      });
      
      // 更新当前索引到JS线程
      runOnJS(setCurrentIndex)(clampedIndex);
    },
  });

  // 根据动画后的滚动偏移量控制FlatList滚动
  React.useEffect(() => {
    flatListRef.current?.scrollTo({
      x: scrollOffset.value,
      animated: false, // 禁用原生动画，完全使用Reanimated的自定义动画
    });
  }, [scrollOffset.value]);

  return (
    <Animated.FlatList
      ref={flatListRef}
      data={data}
      horizontal
      pagingEnabled={false} // 关闭内置分页逻辑
      snapToInterval={0} // 禁用内置吸附
      decelerationRate="fast" // 可根据需求调整滚动减速速率
      scrollEventThrottle={16} // 确保滚动事件高频触发，提升动画精度
      onScroll={scrollHandler}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ width: ITEM_WIDTH, height: '100%', justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 24 }}>{item.content}</Text>
        </View>
      )}
    />
  );
};

export default CustomSnapFlatList;

3. 关键细节说明 #

• 禁用内置逻辑：通过pagingEnabled={false}和snapToInterval={0}关闭FlatList原生分页与吸附，避免和自定义动画冲突。
• 动画参数自定义：withTiming的duration可直接设置动画时长，easing参数可配置缓动函数，让动画过渡更顺滑。
• 边界处理：计算目标索引时做范围限制，防止滚动超出列表首尾项。
• 滚动状态判断：通过onBeginDrag和onEndDrag确保仅在用户停止拖拽后触发吸附动画，避免干扰正常滚动。

备选优化方案 #

若上述方案仍存在卡顿，可尝试：

• 降低scrollEventThrottle的值（最小为1），提升滚动事件触发频率。
• 使用withSpring替代withTiming，利用弹簧物理效果实现更自然的吸附：

scrollOffset.value = withSpring(clampedIndex * ITEM_WIDTH, {
  damping: 20,
  stiffness: 100,
});

内容的提问来源于stack exchange，提问作者03_rising