react-native - 如何解决慢滚动期间的 React Native Scroll Animation 问题？

Question

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

我遇到的问题是我的动画不够流畅。看起来它在颤抖。

演示视频YouTube 视频

我似乎找不到这里的问题，还试图在 ScrollView 中摆弄 scrollEventThrottle、alwaysBounceVertical、bounces、bouncesZoom 道具。

Answer 1

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

问题是因为标题上的样式。将位置添加到绝对将解决此问题。

但是当位置为绝对位置时出现了另一个问题，当发生触摸事件时，标题内的组件（如 TextInput）不会出现。

要解决这个新问题，您必须添加 zIndex。 更多关于 zIndex 的教程

动画标题已修复

Answer 2

尝试添加useNativeDriver：

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

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

Answer 3

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