reactjs - 反应原生动画滚动视图 onScroll 事件不适用于外部方法

Question

我在 ReactNative 中制作了一个折叠收费栏，当Animated.ScrollView contentOffset.y 等于 240 时，我需要停止动画。如果我设置任何条件或在外部函数中调用 Animated.event 它不起作用。

Animated.Value.stopAnimation()也不起作用。

这有效：

<Animated.ScrollView
   scrollEventThrottle={1}
   onScroll={
     Animated.event(
       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
       {useNativeDriver: true}
     )
   }
>
...

这不起作用：

handlerScroll() {
  Animated.event(
    [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
    {useNativeDriver: true}
  )
}
...
render() {
 return(
   <Animated.ScrollView
      scrollEventThrottle={1}
      onScroll={this.handlerScroll.bind(this)}
    >
 )
}
...

这也不起作用

<Animated.ScrollView
   scrollEventThrottle={1}
   onScroll={
     this.state.canScroll &&
     Animated.event(
       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
       {useNativeDriver: true}
     )
   }
>
...

我不知道我还能用什么来停止我的动画。

我需要做这个效果：

Answer 1

onScroll= {Animated.event(                                         
  [{ nativeEvent: { contentOffset: { y: this. state.scrollY } } }], 
  {                                                                
    useNativeDriver: true,                                         
    listener: event => {                                           
      handlerScroll(event);                             
    },                                                             
  },                                                               
)}                                                                 

见https://reactnative.dev/docs/animated#event

Answer 2

为什么不使用设置为“clamp”的动画而不是停止滚动事件映射？这将阻止您的动画超出输入和输出值的范围。interpolateextrapolate

不确定您要制作动画的样式，但为了展示示例，假设它是 translateY 变换：

// onScroll map data to Animated value
onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
    { useNativeDriver: true }
)}

<Animated.View
    style={{
        transform: [{
            translateY: this.state.scrollY.interpolate({
                inputRange: [0, 240],
                outputRange: [0, -160],
                extrapolate: 'clamp' // clamp so translateY can’t go beyond -160
            })
        }]
    }}
>
    ...
</Animated.View>