Reanimated的ScrollView下拉动画卡顿怎么解决？

Des.涵菲提问于 2026-01-28 17:43:29 阅读 53

移动

我在用Reanimated 2实现下拉刷新动画时，滑动特别卡顿，控制台还报Jank警告。代码都用useSharedValue和interpolate了，但手指松开后动画还是不流畅。

这是我的核心代码片段：


<GestureDetector gesture={panGesture}>
  <Reanimated.View style={[{ 
    transform: [{ translateY: animatedValue }]
  }]}>
    <ScrollView contentContainerStyle={{ paddingTop: 50 }}>
      {/* 列表内容 */}
    </ScrollView>
  </Reanimated.View>
</GestureDetector>

我试过把动画值更新改成extrapolateClamp，也给ScrollView加了overScrollMode=”never”，但滑动到临界点时还是有拖影。是不是嵌套结构有问题？或者需要手动调整帧率？

移动端动画

我来解答赞 6 收藏

反馈

1 条解答

端木奕珩 Lv1

我之前踩过这个坑，问题出在ScrollView和Reanimated的嵌套上。ScrollView自带优化机制，但它跟Reanimated的动画引擎会有冲突，导致卡顿和拖影。

解决方法是用Animated.ScrollView替换普通ScrollView，并把下拉动画逻辑交给onScroll事件处理。不要直接在外面包一层Reanimated.View，这样会破坏滚动优化。

这是改进后的代码：

import { useSharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';



const translateY = useSharedValue(0);



const scrollHandler = useAnimatedScrollHandler({

  onScroll: (event) => {

    translateY.value = event.contentOffset.y;

  },

});



return (

  
    onScroll={scrollHandler} 

    scrollEventThrottle={16} // 必须加，控制帧率

    overScrollMode="never"

    contentContainerStyle={{ paddingTop: 50 }}

  >

    {/* 列表内容 */}

  

);

关键是用了useAnimatedScrollHandler来处理滚动事件，它直接运行在UI线程上，比手势检测器流畅得多。还有，记得加scrollEventThrottle={16}，否则事件频率太高也会卡。

最后提醒一下，别再外面包一层Reanimated.View了，ScrollView自己就能搞定动画，嵌套只会让性能更差。

2026-01-29 16:10