IT技术 - react-native动画滚动视图 onScroll 事件不适用于外部方法 - 吾爱随笔录

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

该Animated.Value.stopAnimation（） doesn't工作无论是。

这有效：

<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}
     )
   }
>
...

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

我需要做这个效果：

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

// 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>