RN-移动手势

QQ20171027-101023.gif

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

 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 - 当前屏幕上的所有触摸点的集合