陣營天然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 
       }, 
      }, 
     )}