React Native实现两个水平FlatList同步滚动方案咨询

可行，以下是具体实现方案：

核心思路 #

给两个FlatList添加引用（ref），监听其中一个的滚动事件，获取当前滚动偏移量，再调用另一个FlatList的scrollToOffset方法同步位置，同时加入防循环触发标记避免死循环。

代码实现 #

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

// 组件内部逻辑
const list1Ref = useRef(null);
const list2Ref = useRef(null);
let isSyncing = false; // 标记是否正在同步，防止循环触发滚动事件

// 列表1的滚动处理函数
const handleList1Scroll = useCallback((e) => {
  if (isSyncing) return;
  const offsetX = e.nativeEvent.contentOffset.x;
  isSyncing = true;
  // 同步列表2的滚动位置
  list2Ref.current?.scrollToOffset({ offset: offsetX, animated: false });
  // 延迟重置标记，确保同步完成后再响应下一次滚动
  setTimeout(() => isSyncing = false, 50);
}, []);

// 列表2的滚动处理函数
const handleList2Scroll = useCallback((e) => {
  if (isSyncing) return;
  const offsetX = e.nativeEvent.contentOffset.x;
  isSyncing = true;
  // 同步列表1的滚动位置
  list1Ref.current?.scrollToOffset({ offset: offsetX, animated: false });
  setTimeout(() => isSyncing = false, 50);
}, []);

// 渲染两个横向FlatList
return (
  <>
    <FlatList
      ref={list1Ref}
      data={categories}
      horizontal
      scrollEnabled={true}
      keyExtractor={(item) => item._id}
      onScroll={handleList1Scroll}
      scrollEventThrottle={16} // 控制滚动事件触发频率，平衡性能与流畅度
      renderItem={({ item, index }) => {
        return (
          <Box mr={index === categories.length - 1 ? 0 : "10px"}>
            <CategoryTile category={item} inlineTitle={false} inGrid={true} />
          </Box>
        );
      }}
    />

    <FlatList
      ref={list2Ref}
      data={yourSecondListData} // 替换为第二个列表的数据源
      horizontal
      scrollEnabled={true}
      keyExtractor={(item) => item._id}
      onScroll={handleList2Scroll}
      scrollEventThrottle={16}
      renderItem={({ item, index }) => {
        // 替换为第二个列表的渲染项
        return (
          <Box mr={index === yourSecondListData.length - 1 ? 0 : "10px"}>
            {/* 你的第二个列表组件 */}
          </Box>
        );
      }}
    />
  </>
);

关键注意事项 #

• 防循环触发：必须用isSyncing标记，否则滚动一个列表时，另一个的滚动会触发自身的滚动事件，导致无限循环。
• 滚动事件频率：scrollEventThrottle设为16（对应60fps），既保证滚动同步的流畅度，又不会因事件触发太频繁导致性能问题。
• 关闭同步动画：scrollToOffset的animated设为false，避免两个列表的动画冲突，造成滚动抖动。
• 内容宽度匹配：尽量保证两个FlatList的总滚动宽度一致，否则其中一个滚动到边界后，另一个无法继续同步。

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