React-native animation.event自定义onScroll侦听器 [英] React-native animated.event custom onScroll listener
本文介绍了React-native animation.event自定义onScroll侦听器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在本地本机文档中,有关于Animated.event
方法的部分.例如,他们使用以下代码:
In official react-native documentation there is a section about Animated.event
method. As example they use following code:
onScroll={Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{ nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)}
我想将正确的值映射到Animated.event
方法,并且我还要映射onScroll回调参数到我自己的回调.基本上我想做这样的事情:
I would like to map correct values to Animated.event
method and I would also like to map onScroll callback parameters to my own callback. Basically I would like to do something like this:
onScroll={(event) => {
myOwnCallback(event.nativeEvent.contentOffset.x)
Animated.event(
// scrollX = e.nativeEvent.contentOffset.x
[{nativeEvent: {
contentOffset: {
x: scrollX
}
}
}]
)
}}
您能解释一下该怎么做吗?
Could you please explain how to do that?
推荐答案
当您查看源代码时:
/**
* 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
},
},
)}
这篇关于React-native animation.event自定义onScroll侦听器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文