React Native中如何在scrollTo动画完成后执行函数？

在React Native中，scrollToOffset本身没有提供动画完成的回调参数，我们可以通过以下几种方式实现需求：

方法一：使用Animated组件驱动滚动（推荐） #

通过Animated.createAnimatedComponent包装ScrollView/FlatList，利用Animated.timing控制滚动偏移，动画完成后在start方法的回调中执行逻辑：

import { Animated, ScrollView } from 'react-native';
import { useRef } from 'react';

// 创建动画化的ScrollView
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

function YourComponent() {
  const scrollRef = useRef(null);
  // 初始化滚动偏移的动画值
  const scrollOffset = useRef(new Animated.Value(0)).current;

  const scrollToTopWithCallback = () => {
    Animated.timing(scrollOffset, {
      toValue: 0,
      duration: 300, // 与React Native默认scrollTo动画时长保持一致
      useNativeDriver: true,
    }).start(() => {
      // 动画完成后执行的逻辑
      console.log('滚动动画已完成');
      // 这里编写你的业务代码
    });
  };

  return (
    <AnimatedScrollView
      ref={scrollRef}
      scrollEventThrottle={16}
      // 将滚动偏移与动画值绑定
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
        { useNativeDriver: true }
      )}
    >
      {/* 你的滚动内容 */}
    </AnimatedScrollView>
  );
}

方法二：利用滚动结束事件（适用于FlatList/SectionList） #

对于列表组件，可通过onMomentumScrollEnd事件判断代码触发的滚动是否完成，需要标记滚动类型避免混淆用户手动滚动：

import { FlatList } from 'react-native';
import { useRef, useState } from 'react';

function YourComponent() {
  const listRef = useRef(null);
  const [isProgramScroll, setIsProgramScroll] = useState(false);

  const scrollToTop = () => {
    setIsProgramScroll(true);
    listRef.current.scrollToOffset({ animated: true, offset: 0 });
  };

  return (
    <FlatList
      ref={listRef}
      onMomentumScrollEnd={() => {
        if (isProgramScroll) {
          // 动画完成后的回调逻辑
          console.log('滚动动画已完成');
          setIsProgramScroll(false);
        }
      }}
      // 其他列表属性（data、renderItem等）
    />
  );
}

方法三：setTimeout模拟（不推荐） #

如果不需要精准的回调时机，可以根据默认动画时长（约300ms）设置定时器，但该方法受设备性能影响，准确性差：

const scrollToTop = () => {
  ref.current.scrollToOffset({ animated: true, offset: 0 });
  // 模拟动画完成的时机
  setTimeout(() => {
    console.log('滚动动画已完成');
    // 你的回调逻辑
  }, 300);
};

内容的提问来源于stack exchange，提问作者Blogger Klik