Question

当用户用本机的2根手指滑动时，如何确定滑动方向？我正在使用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} />;
    }

以上是我正在使用的代码段。当我尝试使用2个手指滑动手势时，dx和dy为0，因此使我的swipe_direction对象为空。

Answer 1

您可以使用此https://github.com/kmagiera/react-native-gesture-handler

它将完成您想做的所有事情。

这是其文档：https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

检测本机反应中的两根手指滑动方向

1 个答案: