React Native FlatList的onMomentumScrollEnd多次触发问题求解

问题核心原因 #

该异常通常由三类原因导致：滚动过程中FlatList发生不必要重渲染、回调无重复触发拦截逻辑、旧版本React Native原生层实现bug。

可落地修复方案 #

• 方案1：给回调加防抖处理
  给业务逻辑加300~500ms防抖，短时间内多次触发只会执行一次，推荐优先使用该方案，改造成本最低。
  示例代码（函数组件）：

  import { useCallback } from 'react';
  import { debounce } from 'lodash';
  
  const handleMomentumScrollEnd = useCallback(
    debounce((event) => {
      // 你的业务逻辑代码
    }, 300, { leading: true, trailing: false }),
  []);
  

  如果你不想引入lodash，也可以手动实现简易防抖逻辑。

• 方案2：避免FlatList不必要重渲染
  很多重复触发问题都是FlatList频繁重绘导致的，可通过以下优化点避免：

  • 确保data属性引用稳定，更新列表时不要每次都生成全新数组，仅修改对应项的引用
  • 使用useMemo缓存renderItem、keyExtractor等传入FlatList的属性，避免每次渲染生成新的函数引用
  • 非必要不要绑定onScroll回调，如需绑定请设置合理的scrollEventThrottle值

• 方案3：添加状态锁控制执行
  用状态变量标记回调执行状态，滚动开始时解锁，回调执行后锁定，避免同一次滚动过程中多次执行业务逻辑：

  import { useState } from 'react';
  import { FlatList } from 'react-native';
  
  const Demo = () => {
    const [isScrollEndExecuted, setIsScrollEndExecuted] = useState(false);
  
    const handleScrollBegin = () => {
      setIsScrollEndExecuted(false);
    };
  
    const handleScrollEnd = (event) => {
      if (isScrollEndExecuted) return;
      setIsScrollEndExecuted(true);
      // 执行业务逻辑
    };
  
    return (
      <FlatList
        onScrollBeginDrag={handleScrollBegin}
        onMomentumScrollEnd={handleScrollEnd}
        // 其他FlatList属性
      />
    )
  }
  

• 方案4：校验滚动偏移量去重
  每次触发回调时记录当前滚动偏移量，和上一次的偏移量对比，数值完全一致则跳过执行：

  const lastOffset = useRef({ x: 0, y: 0 });
  
  const handleScrollEnd = (event) => {
    const currentOffset = event.nativeEvent.contentOffset;
    if (currentOffset.x === lastOffset.current.x && currentOffset.y === lastOffset.current.y) {
      return;
    }
    lastOffset.current = currentOffset;
    // 执行业务逻辑
  };
  

如果以上方案都无效，可尝试升级React Native到0.64及以上稳定版本，部分0.6x之前的版本存在原生层回调重复触发的已知bug，升级后即可修复。

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