React Native中如何调整FlatList scrollToIndex的滚动动画时长？

FlatList 是基于原生 ScrollView 封装的组件，其提供的scrollToIndex方法在传入animated: true参数时，会直接调用平台原生滚动接口驱动动画。

核心限制：该原生接口不对外暴露动画时长配置，默认使用系统级滚动速度（iOS 约250ms、Android 约300ms），因此无论怎么调整方法参数，都无法拉长动画时长，这是你排查多日找不到修改入口的根本原因。

绕开原生scrollToIndex的默认动画逻辑，用自定义Animated驱动滚动，即可完全掌控动画时长参数。

改造步骤 #

• 复用现有已绑定的滚动位置值y
  从现有代码可看到，你已经给AnimatedFlatList绑定了onScroll事件，且定义了和滚动位置双向绑定的Animated.Valuey（已作为参数传入每个列表项组件），可以直接复用这个值驱动滚动，不需要额外新增状态。
• 计算目标滚动的y轴偏移量
  结合你当前的滚动规则（每次跳转到下一个index、保留200的viewOffset）计算目标偏移值：

  // 单列表项的高度根据实际项目取值，整屏滚动场景可直接使用窗口高度
  const ITEM_UNIT_HEIGHT = WINDOW_HEIGHT;
  const targetOffset = (currentIndex + 1) * ITEM_UNIT_HEIGHT - 200;
  

  如果列表项高度不固定，可在每个item的onLayout回调里，将对应index的实际距离列表顶部的偏移量存在本地Map中，滚动时直接取对应index的记录值即可。
• 替换原scrollToIndex调用，使用自定义时长的timing动画
  删掉原有触发原生滚动的代码，替换为自定义动画逻辑：

  const scrollUp = () => {
    if (currentIndex >= DATA.length - 1) return;
    const nextIndex = currentIndex + 1;
    const ITEM_UNIT_HEIGHT = WINDOW_HEIGHT;
    const targetOffset = nextIndex * ITEM_UNIT_HEIGHT - 200;
  
    Animated.timing(y, {
      toValue: targetOffset,
      // 在此处调整需要的动画时长，数值越大滚动速度越慢
      duration: 800,
      useNativeDriver: true,
    }).start(() => {
      // 动画完全结束后再更新currentIndex状态，避免动画过程中状态不同步
      setCurrentIndex(nextIndex);
    });
  }
  

注意事项 #

• 不要再在AnimatedFlatList上调用带动画参数的原生scrollTo、scrollToIndex方法，否则两个动画逻辑叠加会出现滚动位置错乱
• 如果你后续开启scrollEnabled={false}（即禁止用户手动拖拽列表），这种自定义驱动滚动的方式依然可以正常生效，不受拖拽开关的影响
• useNativeDriver设为true可以让动画在原生线程运行，避免JS线程阻塞导致的动画掉帧

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