React Native iOS ScrollView：阻止点击停止滚动触发的二次滚动事件

针对你遇到的iOS端ScrollView问题，这里提供一个可行的解决方案——通过跟踪惯性滚动状态和触摸事件，过滤掉点击停止滚动时触发的无效拖拽事件：

import { useState } from 'react';
import { ScrollView } from 'react-native';

const CustomScrollView = () => {
  // 标记是否处于惯性滚动状态
  const [isMomentumScrolling, setIsMomentumScrolling] = useState(false);
  // 标记是否需要忽略下一次的拖拽开始事件
  const [isIgnoringNextDrag, setIsIgnoringNextDrag] = useState(false);

  return (
    <ScrollView
      onScrollBeginDrag={() => {
        if (isIgnoringNextDrag) {
          // 忽略点击停止滚动触发的二次拖拽事件
          setIsIgnoringNextDrag(false);
          return;
        }
        console.log('dragging');
      }}
      onScrollEndDrag={() => {
        console.log('finished');
      }}
      onMomentumScrollBegin={() => {
        // 进入惯性滚动，标记状态
        setIsMomentumScrolling(true);
      }}
      onMomentumScrollEnd={() => {
        // 惯性滚动结束，重置状态
        setIsMomentumScrolling(false);
        setIsIgnoringNextDrag(false);
      }}
      onTouchStart={() => {
        // 如果当前处于惯性滚动，说明是点击停止滚动，标记要忽略下一次拖拽
        if (isMomentumScrolling) {
          setIsIgnoringNextDrag(true);
        }
      }}
    >
      {/* 你的滚动内容 */}
    </ScrollView>
  );
};

export default CustomScrollView;

逻辑说明： #

• isMomentumScrolling：用来跟踪ScrollView是否处于惯性滚动阶段（也就是用户抬手后，ScrollView自己继续滚动的状态）。
• isIgnoringNextDrag：当用户在惯性滚动时点击屏幕，会触发onTouchStart，此时我们标记这个状态，告诉后续的onScrollBeginDrag要忽略这次无效的拖拽事件。
• 在onScrollBeginDrag里，先检查是否需要忽略，如果是就重置状态并直接返回，不执行你的业务逻辑；否则正常处理拖拽开始事件。

这样就能精准区分用户的正常拖拽操作和点击停止滚动的操作，避免二次触发拖拽事件。

内容的提问来源于stack exchange，提问作者sir-haver