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 原生绑定动画事件的主要内容,如果未能解决你的问题,请参考以下文章

React事件系统入门

前端开发工具库:包含事件委托,动画处理,以及大部分常用的前端工具

React事件

react事件注册

JSX详解&&React的事件绑定&&事件参数的传递

原生js如何绑定a连接点击事件?