React Native中能否修改FlatList使用scrollToOffset时的默认动画？

React Native官方的FlatList.scrollToOffset方法本身不支持直接配置动画时长和缓动效果，但可以通过以下几种方式实现需求：

一、JS层无需原生修改的方案 #

用Animated API手动驱动滚动，自己控制动画的时长和缓动逻辑：

import React, { useRef } from 'react';
import { Animated, FlatList, View, Text } from 'react-native';

const CustomScrollFlatList = () => {
  const flatListRef = useRef(null);
  const scrollAnim = useRef(new Animated.Value(0)).current;

  const triggerCustomScroll = () => {
    // 清除之前的监听，避免重复触发
    scrollAnim.removeAllListeners();
    
    Animated.timing(scrollAnim, {
      toValue: 600, // 目标滚动偏移量
      duration: 1200, // 自定义动画时长（毫秒）
      easing: (t) => 1 - Math.pow(1 - t, 3), // 自定义缓动（这里是三次缓出）
      useNativeDriver: true,
    }).start();

    // 逐帧更新滚动位置
    scrollAnim.addListener(({ value }) => {
      flatListRef.current?.scrollToOffset({
        offset: value,
        animated: false, // 禁用原生动画，用自定义动画驱动
      });
    });
  };

  return (
    <>
      <Text onPress={triggerCustomScroll} style={{ padding: 16, backgroundColor: '#eee' }}>
        触发自定义滚动
      </Text>
      <FlatList
        ref={flatListRef}
        data={Array(60).fill(0)}
        renderItem={({ index }) => (
          <View style={{ height: 40, padding: 12, borderBottomWidth: 1, borderColor: '#f0f0f0' }}>
            <Text>列表项 {index + 1}</Text>
          </View>
        )}
      />
    </>
  );
};

export default CustomScrollFlatList;

注意：这种方案在滚动距离较大时，JS层逐帧调用可能会有轻微性能损耗，适合中小距离滚动场景。

二、iOS原生修改方案 #

直接修改RCTScrollView的原生实现，让scrollToOffset支持自定义参数：

1. 找到iOS项目中的RCTScrollView.m文件，修改scrollToOffset:方法：

- (void)scrollToOffset:(NSDictionary *)params
{
    CGFloat offset = [RCTConvert CGFloat:params[@"offset"]];
    BOOL animated = [RCTConvert BOOL:params[@"animated"]];
    
    // 读取自定义的动画参数，没有则用默认值
    NSTimeInterval duration = [RCTConvert NSTimeInterval:params[@"duration"] ?: @0.3];
    UIViewAnimationOptions easingOption = [RCTConvert UIViewAnimationOptions:params[@"easing"] ?: @UIViewAnimationOptionCurveEaseInOut];

    if (animated) {
        [UIView animateWithDuration:duration delay:0 options:easingOption animations:^{
            self.contentOffset = CGPointMake(self.contentOffset.x, offset);
        } completion:nil];
    } else {
        self.contentOffset = CGPointMake(self.contentOffset.x, offset);
    }
}

2. JS层调用时传入自定义参数：

flatListRef.current?.scrollToOffset({
    offset: 600,
    animated: true,
    duration: 1200, // 动画时长（毫秒）
    easing: 7 // 对应UIViewAnimationOptionCurveEaseOut，可根据需求传枚举值
});

三、Android原生修改方案 #

修改RecyclerViewBackedScrollView的平滑滚动逻辑，支持自定义时长和插值器：

1. 找到Android项目中的RecyclerViewBackedScrollView.java，添加带参数的滚动方法：

public void scrollToPositionWithOffset(int position, int offset, boolean animated, long duration, Interpolator interpolator) {
    if (animated) {
        RecyclerView.SmoothScroller smoothScroller = new LinearSmoothScroller(getContext()) {
            @Override
            protected int getVerticalSnapPreference() {
                return SNAP_TO_START;
            }

            @Override
            protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
                // 根据自定义时长计算每像素的滚动时间，实现自定义duration
                return duration / (float) getMaxScrollAmount();
            }

            @Override
            protected void onTargetFound(View targetView, RecyclerView.State state, Action action) {
                // 应用自定义插值器
                action.update(targetView, -offset, 0, interpolator);
            }
        };
        smoothScroller.setTargetPosition(position);
        getRecyclerView().getLayoutManager().startSmoothScroll(smoothScroller);
    } else {
        getRecyclerView().scrollToPosition(position);
        getRecyclerView().scrollBy(0, -offset);
    }
}

2. 修改对应的桥接代码（比如RCTFlatListManager.java），让JS层可以传递duration和easing参数，然后在JS层调用：

flatListRef.current?.scrollToOffset({
    offset: 600,
    animated: true,
    duration: 1200, // 动画时长（毫秒）
    easing: 'easeOutQuad' // 对应Android的AccelerateDecelerateInterpolator等，需在原生层映射
});

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