如何判断FlatList滚动由用户手势还是scrollToOffset等方法触发

你写的onScroll回调传isGesture参数的写法无法生效，核心原因是FlatList的onScroll默认只会注入原生滚动事件对象这一个参数，不存在内置的手势标识字段。

最稳定的实现方式是通过拖拽相关的生命周期事件维护自定义标记位，逻辑如下：

• 用户手势触发的滚动（包括手指拖拽、拖拽松手后的惯性滚动），一定会先触发onScrollBeginDrag事件；而通过scrollToOffset、scrollToIndex等代码方法主动触发的滚动，不会触发该拖拽开始事件。
• 基于这个特性，用ref维护一个是否为用户触发滚动的标记即可，避免用state存储导致频繁重渲染影响滚动性能。

具体实现代码 #

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

const DemoList = () => {
  const flatListRef = useRef(null);
  // 滚动来源标记：true=用户手势触发，false=代码调用触发
  const isUserScroll = useRef(false);

  // 用户开始拖拽时标记为用户触发
  const handleScrollBeginDrag = () => {
    isUserScroll.current = true;
  };

  // 滚动完全停止后重置标记
  const resetScrollFlag = () => {
    isUserScroll.current = false;
  };

  const handleScroll = (event) => {
    // 非用户触发的滚动直接拦截
    if (!isUserScroll.current) return;

    // 此处写用户触发滚动后的业务逻辑
    const { contentOffset } = event.nativeEvent;
    console.log('用户滚动位置：', contentOffset);
  };

  // 主动调用滚动方法的示例
  const scrollToPosition = (index) => {
    // 如果存在用户滚动过程中主动调用代码滚动的场景，调用前先手动重置标记
    isUserScroll.current = false;
    flatListRef.current?.scrollToIndex({ index, animated: true });
  };

  return (
    <FlatList
      ref={flatListRef}
      data={[]} // 替换为实际数据源
      renderItem={({ item }) => null} // 替换为实际渲染逻辑
      onScroll={handleScroll}
      onScrollBeginDrag={handleScrollBeginDrag}
      // 两个结束事件都要绑定，覆盖手指松开、惯性滚动结束两种场景
      onScrollEndDrag={resetScrollFlag}
      onMomentumScrollEnd={resetScrollFlag}
      scrollEventThrottle={16} // 保证滚动回调触发频率匹配60fps
    />
  );
};

注意事项 #

• 必须同时绑定onScrollEndDrag和onMomentumScrollEnd两个事件重置标记：前者对应手指离开屏幕的时机，后者对应松手后惯性滚动完全停止的时机，缺省任意一个都会导致标记位状态错误，把惯性滚动误判为代码触发。
• 不要用普通state存储滚动标记：onScroll每秒会触发数十次，用state存值会触发大量无意义的组件重渲染，直接导致滚动卡顿，用ref存值不会触发重渲染，性能最优。
• 如果业务中存在用户滚动过程中代码主动触发滚动的场景，在调用scrollToOffset/scrollToIndex前手动将标记位置为false即可，避免判断冲突。

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