React 原生绑定动画事件
Posted
技术标签:
【中文标题】React 原生绑定动画事件【英文标题】:React native bind animated event 【发布时间】:2017-07-31 16:34:49 【问题描述】:需要一些 JS 的帮助。是否可以根据需要绑定动画事件?
我需要这样做:
onScroll=
Animated.event([
nativeEvent:
contentOffset: y: this.state.animTop
])
我也需要这样做
onScroll=(e) =>
let positionY = e.nativeEvent.contentOffset.y;
this._handleScroll(positionY);
this.setState(y: positionY)
我试过像这样绑定两者,但不需要做 Animated.event
componentDidMount()
this._handleScroll = this._handleScroll.bind(this);
onScroll=
this._handleScroll
_handleScroll(e)
Animated.event([
nativeEvent:
contentOffset: y: this.state.animTop
]);
if(e > 30)
this.setState(statusBarHidden: true);
else
this.setState(statusBarHidden: false);
【问题讨论】:
【参考方案1】:终于搞定了:
将函数绑定到 Animated.event 监听器:
onScroll=Animated.event(
[ nativeEvent: contentOffset: y: this.state.animTop ],
listener: this._handleScroll ,
)
【讨论】:
【参考方案2】:您也可以使用setValue()
。
这样就可以了:
_handleScroll(event)
// Do stuff
this.state.animTop.setValue(event.nativeEvent.contentOffset.y);
// Do other stuff
【讨论】:
请注意Animated.event
具有useNativeDriver
的能力,而.setValue
使用JS线程来制作动画。以上是关于React 原生绑定动画事件的主要内容,如果未能解决你的问题,请参考以下文章