阵营天然animated.event定制onScroll听者

Question

在官方反应天然文档有一个部分大约Animated.event方法。作为例子，他们使用下面的代码：

onScroll={Animated.event(
    // scrollX = e.nativeEvent.contentOffset.x 
    [{ nativeEvent: { 
     contentOffset: { 
      x: scrollX 
     } 
     } 
    }] 
)} 

我现在用JavaScript和ES6工作相当长一段时间，但我不知道什么是发生在那里。

我想正确的值映射到Animated.event方法，我也想onScroll回调参数映射到我自己的回调。基本上，我愿做这样的事情：

onScroll={(event) => { 
    myOwnCallback(event.nativeEvent.contentOffset.x) 
    Animated.event(
    // scrollX = e.nativeEvent.contentOffset.x 
    [{nativeEvent: { 
     contentOffset: { 
      x: scrollX 
     } 
     } 
    }] 
) 
}} 

能否请您解释一下发生了什么呢？

Answer 1

当寻找到源代码：

/** 
    * Takes an array of mappings and extracts values from each arg accordingly, 
    * then calls `setValue` on the mapped outputs. e.g. 
    * 
    *```javascript 
    * onScroll={Animated.event(
    * [{nativeEvent: {contentOffset: {x: this._scrollX}}}] 
    * {listener},   // Optional async listener 
    * ) 
    * ... 
    * onPanResponderMove: Animated.event([ 
    * null,    // raw event arg ignored 
    * {dx: this._panX}, // gestureState arg 
    * ]), 
    *``` 
    * 
    * Config is an object that may have the following options: 
    * 
    * - `listener`: Optional async listener. 
    * - `useNativeDriver`: Uses the native driver when true. Default false. 
    */ 
    event, 

这是我如何做它的工作：

onScroll={Animated.event(
      [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }], 
      { 
       useNativeDriver: true, 
       listener: event => { 
       const offsetY = event.nativeEvent.contentOffset.y 
       // do something special 
       }, 
      }, 
     )}