RN-移动手势

作者: 精神病患者link常 | 来源:发表于2017-10-27 10:12 被阅读22次
    QQ20171027-101023.gif

    实现了一个很简单的效果,主要目的是为了了解下RN的移动手势

    <View style={[{
                        width: iconWH,
                        height: iconWH,
                        position: 'absolute',
                    }, iconStyle]}
                        onStartShouldSetResponder={() => true}
                        onMoveShouldSetResponder= {() => true}
                        onResponderGrant= {() => {
                            this.setState({
                                isMove: true,
                            });   
                        }}
                        onResponderMove= {(evt) => {
                          
                            if (evt.nativeEvent.pageX >= iconWH / 2 &&
                            evt.nativeEvent.pageX <=screenWidth - iconWH / 2 &&
                            evt.nativeEvent.pageY >= ConstValue.NavigationBar_StatusBar_Height + iconWH / 2 &&
                            evt.nativeEvent.pageY <= screenHeight - iconWH / 2 - ConstValue.Tabbar_marginBottom){
                                this.setState({
                                    iconX: evt.nativeEvent.pageX - iconWH / 2,
                                    iconY: evt.nativeEvent.pageY - iconWH / 2
                                })
                            }
                        }}
                        onResponderRelease= {() => {
                            this.setState({
                                isMove: false,
                            });
                        }}
                    >
    
    evt是一个合成事件,它包含以下结构:
    
     nativeEvent
    
        changedTouches - 在上一次事件之后,所有发生变化的触摸事件的数组集合(即上一次事件后,所有移动过        的触摸点)
        identifier - 触摸点的ID
        locationX - 触摸点相对于父元素的横坐标
        locationY - 触摸点相对于父元素的纵坐标
        pageX - 触摸点相对于根元素的横坐标
        pageY - 触摸点相对于根元素的纵坐标
        target - 触摸点所在的元素ID
        timestamp - 触摸事件的时间戳,可用于移动速度的计算
        touches - 当前屏幕上的所有触摸点的集合
    

    相关文章

      网友评论

        本文标题:RN-移动手势

        本文链接:https://www.haomeiwen.com/subject/qmkrpxtx.html