如何在React Native中实现无卡顿双向无限滚动年份选择器

实现无中断无限滚动年份选择器方案 #

你当前方案的核心问题是滚动到底部时强制调用scrollToIndex跳转到列表顶部，这个操作会直接打断原生滚动的手势动量，导致滚动中断。可以通过「缓冲区预载+两端动态替换数据」的逻辑实现无感知滚动，不需要强制跳转滚动位置，也不会丢失滚动动量：

1. 调整数据结构，增加滚动缓冲区 #

不要每次只加载10个年份，改成加载3段数据：前序缓冲段、当前显示段、后序缓冲段，总共30~50个年份即可，既不会占用过多内存，也能保证滚动到边缘前有足够的时间更新数据。

2. 核心逻辑修改 #

去掉硬跳滚动位置的逻辑，通过监听滚动位置动态替换列表两端的旧数据，全程保持滚动位置不变，用户完全感知不到数据更新。

3. 修改后的代码示例 #

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

// 单段年份数量，可自行调整
const SEGMENT_SIZE = 10;
// 单个年份项的固定高度，要和你实际的item高度一致
const ITEM_HEIGHT = 50;

export default function YearPicker() {
  const [currentCenterYear, setCurrentCenterYear] = useState(2005);
  const [DATA, setDATA] = useState([]);
  const Scrollref = useRef(null);

  // 更新年份数据范围
  const updateYearRange = useCallback((centerYear) => {
    const tempArr = [{ key: 'placeholder_top', title: '' }];
    // 计算前后覆盖的年份范围：中心前后各留1.5段的缓冲
    const startYear = centerYear - 15;
    const endYear = centerYear + 15;
    for (let i = startYear; i <= endYear; i++) {
      // 过滤0-9999范围外的年份
      if (i >= 0 && i <= 9999) {
        tempArr.push({ key: `year_${i}`, title: i });
      }
    }
    tempArr.push({ key: 'placeholder_bottom', title: '' });
    setDATA(tempArr);
  }, []);

  // 初始化加载数据
  useEffect(() => {
    updateYearRange(currentCenterYear);
  }, [updateYearRange, currentCenterYear]);

  return (
    <FlatList
      ref={Scrollref}
      data={DATA}
      keyExtractor={(item) => item.key}
      getItemLayout={(data, index) => (
        { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
      )}
      onScroll={(e) => {
        const offsetY = e.nativeEvent.contentOffset.y;
        const listHeight = e.nativeEvent.layoutMeasurement.height;
        // 计算当前可视区中心对应的item索引
        const centerIndex = Math.round((offsetY + listHeight / 2) / ITEM_HEIGHT);
        const currentItem = DATA[centerIndex];
        if (currentItem?.title && currentItem.title !== '') {
          // 当当前中心年份和加载中心差超过半段时，更新加载范围
          if (Math.abs(currentItem.title - currentCenterYear) > SEGMENT_SIZE / 2) {
            setCurrentCenterYear(currentItem.title);
          }
        }
      }}
      scrollEventThrottle={16}
      // 其余原有配置保持不变
      {...yourFlatListProps}
    />
  )
}

4. 注意事项 #

• 单个item高度必须固定，不然计算索引会有误差，如果你的item高度不固定，可以通过onLayout回调提前记录每个item的高度再做计算。
• 所有item的key必须和年份绑定，不要用数组索引作为key，不然数据替换时会出现闪动。
• 滚动到0年或者9999年边界时，停止往对应方向更新数据即可，不会出现越界问题。

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