React-native animated.event 自定义 onScroll 监听器

Posted 2023-02-22

【中文标题】React-native animated.event 自定义 onScroll 监听器

【英文标题】：React-native animated.event custom onScroll listener

【发布时间】：2018-01-14 21:41:58

【问题描述】：

在官方 react-native 文档中有一个关于 Animated.event 方法的部分。例如，他们使用以下代码：

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

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

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

你能解释一下怎么做吗？

【参考方案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
    ,
  ,
)

【讨论】：

如何在这里添加一个函数作为监听器？我尝试将它绑定在那里，但它似乎没有触发。对此有何进一步解释？

【参考方案2】：

编写处理函数，如：

    handleScroll = (e) => 
        console.log(e.nativeEvent.contentOffset.y);
    

你可以像这样添加listener：

    Animated.event(
       [ nativeEvent:  contentOffset:  y: this.state.scrollY   ],
        listener: (event) => this.handleScroll(event) 
    )

【参考方案3】：

无法让 Michal 的解决方案为我工作。结束了这个

onScroll=( nativeEvent ) => 
               animatedY.setValue(nativeEvent.contentOffset.y);
               // other actions to be performed on scroll