React Native绑定动画事件

Question

我可以帮您进行一些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});
    }
}

- Malte Schulze-Boeing

Answer 1

终于让它工作了：

将函数与Animated.event监听器绑定：

onScroll={Animated.event(
                    [{ nativeEvent: { contentOffset: { y: this.state.animTop } } }],
                    { listener: this._handleScroll },
                )}

- Malte Schulze-Boeing

Answer 2

您也可以使用setValue()。

因此，它的用法如下：

_handleScroll(event) {
    // Do stuff
    this.state.animTop.setValue(event.nativeEvent.contentOffset.y);
    // Do other stuff
}

- Scherdin

---

请注意，Animated.event 具有 useNativeDriver 的功能，而 .setValue 使用 JS 线程进行动画处理。 - sweatherall