React-native animated.event custom onScroll listener

Question

在官方的 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
}
}
}]
)
}}

你能解释一下如何做到这一点吗？

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
},
},
)}

Answer 2

无法让 Michal 的解决方案为我工作。最终选择了这个

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

Answer 3

编写处理程序函数，如下所示：

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

您可以像这样添加listener：

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