React native animation scrollview onScroll event not working with external method

浪子不回头ぞ 提交于 2020-05-14 01:44:07

问题


I make a collapsing tollbar in ReactNative and i need stop de animation when the Animated.ScrollView contentOffset.y is equal 240. If i put any condition or call the Animated.event in external function it dosn´t work.

The Animated.Value.stopAnimation() doesn´t work either.

This works:

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

This doesn´t work:

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

and this doesn´t work either

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

I don´t know what more i can use to stop my animation.

I need make this effect:


回答1:


Instead of stopping scroll event mapping, why not use interpolate for your animation with extrapolate set to 'clamp'? This will stop your animation from going beyond the bounds of input and output values.

Not sure what styles you’re trying to animate but for the sake of showing an example let’s say it was a translateY transform:

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



回答2:


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

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



来源:https://stackoverflow.com/questions/44661557/react-native-animation-scrollview-onscroll-event-not-working-with-external-metho

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!