如何解决慢速滚动期间的 React Native 滚动动画问题？

Question

我在这里用 Snack expo 制作了一个示例代码 Animated Header

我遇到的问题是我的动画不够流畅。 好像在抖

演示视频YouTube Video

我似乎找不到这里的问题，也尝试 fiddle 在 ScrollView 中使用 scrollEventThrottle、alwaysBounceVertical、bounces、bouncesZoom 道具。

Answer 1

尝试添加 useNativeDriver:

onScroll={
    Animated.event([
        {
         nativeEvent: {
            contentOffset: {
                y: scrollY,
           },
         },
      },
    ], 
    { useNativeDriver: true })
}

但我认为在 React Native 中，ScrollView 不应该处理极长的重复内容。我建议您为您的用例使用 flatlist。

Answer 2

我弄清楚是什么问题了，问题不是因为性能。

问题出在 header 的样式上。 把position加成absolute就可以解决这个问题

但是在position为absolute的时候又出现了一个问题，header里面的组件比如TextInput等在触摸事件发生的时候不会出现

要解决这个新问题，您必须添加 zIndex。 More tutorial about zIndex

Animated Header Fixed

Answer 3

在最顶部的 ScrollView 上添加 removeClippedSubviews = {true} 解决了我的问题，应用程序性能感觉很轻松。