QQ20171027-101023.gif
實現(xiàn)了一個很簡單的效果蚌堵,主要目的是為了了解下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是一個合成事件十绑,它包含以下結(jié)構(gòu):
nativeEvent
changedTouches - 在上一次事件之后拆撼,所有發(fā)生變化的觸摸事件的數(shù)組集合(即上一次事件后夫凸,所有移動過 的觸摸點)
identifier - 觸摸點的ID
locationX - 觸摸點相對于父元素的橫坐標
locationY - 觸摸點相對于父元素的縱坐標
pageX - 觸摸點相對于根元素的橫坐標
pageY - 觸摸點相對于根元素的縱坐標
target - 觸摸點所在的元素ID
timestamp - 觸摸事件的時間戳,可用于移動速度的計算
touches - 當前屏幕上的所有觸摸點的集合