React 原生绑定动画事件答案

【问题标题】：React native bind animated eventReact 原生绑定动画事件
【发布时间】：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});
    }
}

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 ecmascript-next

【解决方案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线程来制作动画。