React-native animated.event custom 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 
       }, 
      }, 
     )}