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