React native 在react native中检测2个手指的滑动方向
当用户在react native中用两个手指刷卡时,如何计算刷卡方向? 我使用的是PanResponder,当用一根手指滑动时,它工作正常。在这种情况下,我能够检测到方向。 但当用户用两个手指刷卡时,如何检测刷卡方向React native 在react native中检测2个手指的滑动方向,react-native,React Native,当用户在react native中用两个手指刷卡时,如何计算刷卡方向? 我使用的是PanResponder,当用一根手指滑动时,它工作正常。在这种情况下,我能够检测到方向。 但当用户用两个手指刷卡时,如何检测刷卡方向 this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleShouldSetPanResponder, o
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: this._handleShouldSetPanResponder,
onMoveShouldSetPanResponder: this._handleShouldSetPanResponder,
onPanResponderRelease: this._handlePanResponderEnd,
onPanResponderTerminate: this._handlePanResponderEnd
});
}
_handleShouldSetPanResponder = (evt, gestureState) => {
return true;
};
_gestureIsClick(gestureState) {
return Math.abs(gestureState.dx) < 5 && Math.abs(gestureState.dy) < 5;
}
_handlePanResponderEnd = (evt, gestureState) => {
const swipeDirection = this._getSwipeDirection(gestureState);
this._triggerSwipeHandlers(swipeDirection, gestureState);
return true;
};
_triggerSwipeHandlers(swipeDirection, gestureState) {
const {
onSwipe,
onSwipeUp,
onSwipeDown,
onSwipeLeft,
onSwipeRight
} = this.props;
const {
SWIPE_LEFT,
SWIPE_RIGHT,
SWIPE_UP,
SWIPE_DOWN
} = swipeDirections;
onSwipe && onSwipe(swipeDirection, gestureState);
switch (swipeDirection) {
case SWIPE_LEFT:
onSwipeLeft && onSwipeLeft(gestureState);
break;
case SWIPE_RIGHT:
onSwipeRight && onSwipeRight(gestureState);
break;
case SWIPE_UP:
onSwipeUp && onSwipeUp(gestureState);
break;
case SWIPE_DOWN:
onSwipeDown && onSwipeDown(gestureState);
break;
}
}
_getSwipeDirection(gestureState) {
const {
SWIPE_LEFT,
SWIPE_RIGHT,
SWIPE_UP,
SWIPE_DOWN
} = swipeDirections;
const { dx, dy } = gestureState;
if (this._isValidHorizontalSwipe(gestureState)) {
return dx > 0 ? SWIPE_RIGHT : SWIPE_LEFT;
} else if (this._isValidVerticalSwipe(gestureState)) {
return dy > 0 ? SWIPE_DOWN : SWIPE_UP;
}
return null;
}
render() {
return <View {...this.props} {...this._panResponder.panHandlers} />;
}
this.\u panResponder=panResponder.create({
onStartShouldSetPanResponder:this.\u handles应设置PanResponder,
onMoveShouldSetPanResponder:这个.\u handlesshouldSetPanResponder,
onPanResponderRelease:这个。\u handlePanResponderRend,
onPanResponderTerminate:此。\u handlePanResponderRend
});
}
_handleShouldSetPanResponder=(evt,手势状态)=>{
返回true;
};
_手势单击(手势状态){
返回Math.abs(gestureState.dx)<5&&Math.abs(gestureState.dy)<5;
}
_handlePanResponderEnd=(evt,手势状态)=>{
const swipeDirection=this.\u获取swipeDirection(gestureState);
此._触发器SwipeHandlers(SwipDirection,手势状态);
返回true;
};
_触发器SwipeHandlers(SwipDirection、gestureState){
常数{
在斯威普,
他说,,
当你被击倒时,
在左边,
对
}=这是道具;
常数{
向左轻扫,
向右滑动,
刷卡,
刷下
}=旋转导向;
onSwipe&&onSwipe(开关方向、手势状态);
开关(开关方向){
案例左扫:
onSwipeLeft&&onSwipeLeft(手势状态);
打破
案例右击:
onSwipeRight&&onSwipeRight(手势状态);
打破
案例刷起:
onswipup&&onswipup(手势状态);
打破
机箱向下滑动:
onSwipeDown&&onSwipeDown(手势状态);
打破
}
}
_GetSwipDirection(手势状态){
常数{
向左轻扫,
向右滑动,
刷卡,
刷下
}=旋转导向;
常数{dx,dy}=gestureState;
如果(这是有效的横向滑动(手势状态)){
返回dx>0?向右滑动:向左滑动;
}否则(此为有效的垂直滑动(手势状态)){
返回dy>0?向下滑动:向上滑动;
}
返回null;
}
render(){
返回;
}
上面是我正在使用的代码片段。当我尝试使用两个手指滑动手势dx和dy为0时,hences会使我的滑动方向对象为空。您可以使用此选项
它会做你想做的一切
以下是其文档:无需使用第三方库。此外,该库是否支持双重滑动(两个手指同时滑动)?但我仍然不应该使用任何库。如果您能帮助我完成上述工作或对上述代码段进行任何更改,那就太好了。谢谢