React native 在react native中检测2个手指的滑动方向

React native 在react native中检测2个手指的滑动方向,react-native,React Native,当用户在react native中用两个手指刷卡时,如何计算刷卡方向? 我使用的是PanResponder,当用一根手指滑动时,它工作正常。在这种情况下,我能够检测到方向。 但当用户用两个手指刷卡时,如何检测刷卡方向 this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleShouldSetPanResponder, o

当用户在react native中用两个手指刷卡时,如何计算刷卡方向? 我使用的是PanResponder,当用一根手指滑动时,它工作正常。在这种情况下,我能够检测到方向。 但当用户用两个手指刷卡时,如何检测刷卡方向

        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会使我的滑动方向对象为空。

您可以使用此选项

它会做你想做的一切


以下是其文档:

无需使用第三方库。此外,该库是否支持双重滑动(两个手指同时滑动)?但我仍然不应该使用任何库。如果您能帮助我完成上述工作或对上述代码段进行任何更改,那就太好了。谢谢