javascript - React native bind animated event - Stack Overflow

admin管理员组

文章数量:1344682

Need a little help with some JS. Is it possible to bind an animated event as needed below?

I need to do this:

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

I also need to do this

onScroll={(e) => {
    let positionY =  e.nativeEvent.contentOffset.y;
    this._handleScroll(positionY);
    this.setState({y: positionY})

}}

I have tried binding both like this, but it not take doing the Animated.event

ponentDidMount() {
    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});
    }
}

Need a little help with some JS. Is it possible to bind an animated event as needed below?

I need to do this:

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

I also need to do this

onScroll={(e) => {
    let positionY =  e.nativeEvent.contentOffset.y;
    this._handleScroll(positionY);
    this.setState({y: positionY})

}}

I have tried binding both like this, but it not take doing the Animated.event

ponentDidMount() {
    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

Share Follow edited Mar 10, 2017 at 16:19 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Mar 10, 2017 at 10:52 Malte Schulze-BoeingMalte Schulze-Boeing 1,1451111 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Finally got it work:

Bound the function to the Animated.event listener:

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

You could also use setValue().

So that would work like this:

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

本文标签： javascriptReact native bind animated eventStack Overflow