2020-05-11 React Native Animated

Animated.event(argMapping, config?)

Takes an array of mappings and extracts values from each arg accordingly, then calls setValue on the mapped outputs

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {y: this._scrollY}}}],
   {listener: (event) => console.log(event)}, // 可选的异步监听函数
 )}
 ...
 onPanResponderMove: Animated.event(
    [
      null,                // 忽略原始事件
      {dx: this._panX}   // 手势状态参数
    ],  
    {listener: (event, gestureState) => console.log(event, gestureState)}, // 可选的异步监听函数
 ),

接受一个映射的数组，对应的解开每个值，然后调用映射到的值（Animate的值）的 setValue 方法。
例如ScrollView的onScroll 方法在滑动时会被多次调用，每次都有对应的Y轴的滑动距离 event.nativeEvent.contentOffset.y，这个方法就可以把一连串的 y 值 变成动画值（Animated值）,然后你就可以用这个动画值做一些基于滑动的动画效果了。

注意，以下都是错误的用法：

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

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

要想在onScroll的时候做一些额外的工作，只能在可选的异步监听函数listener中做：

onScroll= {Animated.event(                                         
  [{ nativeEvent: { contentOffset: { y: this. state.scrollY } } }], 
  {                                                                
    useNativeDriver: true,                                         
    listener: event => {
      // 在这里做一些额外的工作                                          
      handlerScroll(event);                             
    },                                                             
  },                                                               
)}   

可不可以手动setValue呢？