react-native - 滚动 ScrollView 时动画高度

Question

因此，当用户滚动特定的 ScrollView 时，我试图通过更改 View 的高度来为 View 设置动画。它在 IOS 上看起来不错，虽然它有一些抖动，但闪烁在 Android 上非常明显。这是我的代码。

Scrollview 处于滚动状态

 onScroll={(e) => {         
     this.state.profileTabAnimatedValue.setValue(e.nativeEvent.contentOffset.y);
 }}

高度插值对象

const headerHeight = this.state.profileTabAnimatedValue.interpolate({
      inputRange: [0,1],
      outputRange: [1,100]
});

然后我会将 headerHeight 应用到 View 以调整它的高度

Answer 1

尝试使用动画事件方法:

onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.profileTabAnimatedValue}}}]
)}

此外，如果您不想要一些奇怪的行为，例如负高度等，请将其添加到您的插值中:

const headerHeight = this.state.profileTabAnimatedValue.interpolate({
      inputRange: [0,1],
      outputRange: [1,100]
      extrapolate: 'clamp'
});

最后一件事是，您可以使用 scrollEventThrottle 来限制在 ScrollView 上触发的事件，请阅读 this