禁用Tabbar在Tinder Like Cards UI上滑动

Question

我有3个标签，使用react-native-router-flux构建。

我正在使用react-native-swiper-cards在中心标签上创建Tinder Like Card Swiping UI。

但是，如果尝试使用“完全或几乎接近水平的手势”来刷卡，则不会拖动卡片，而是会滑动标签。在所有其他情况下，卡片被拖动而没有标签被刷过。

如果在完全水平拖动卡片时如何禁用标签滑动？

Tabs.js

<Scene 
        {...navbarPropsTabs}
        key={'tabBar'} tabs={true}
        swipeEnabled={true}
        default="swipe">
        <Scene
            {...navbarPropsTabs}
            key={'settings'}
            component={SettingsScreen}
        ></Scene>
        <Scene
            {...navbarPropsTabs}
            key={'swipe'}
            component={SwipeScreen}
            initial
        ></Scene>
        <Scene
            {...navbarPropsTabs}
            key={'profile'}
            component={ProfileScreen}>
        </Scene>

完全来自react-native-swipe-cards模块的代码。

this._panResponder = PanResponder.create({
            onMoveShouldSetPanResponderCapture: (e, gestureState) => {
                if (Math.abs(gestureState.dx) > this.minDeltaThreshold || Math.abs(gestureState.dy) > this.minDeltaThreshold) {
                    this.props.onDragStart();
                    return true;
                }
                return false;
            },

            onPanResponderGrant: (e, gestureState) => {
                this.state.pan.setOffset({ x: this.state.pan.x._value, y: this.state.pan.y._value });
                this.state.pan.setValue({ x: 0, y: 0 });
            },

            onPanResponderTerminationRequest: (evt, gestureState) => this.props.allowGestureTermination,

            onPanResponderMove: Animated.event([
                null, { dx: this.state.pan.x, dy: this.props.dragY ? this.state.pan.y : 0 },
            ]),

            onPanResponderRelease: (e, {vx, vy, dx, dy}) => {
                this.props.onDragRelease()
                this.state.pan.flattenOffset();
                let velocity;
                if (Math.abs(dx) <= 5 && Math.abs(dy) <= 5)   //meaning the gesture did not cover any distance
                {
                    this.props.onClickHandler(this.state.card)
                }

                if (vx > 0) {
                    velocity = clamp(vx, 3, 5);
                } else if (vx < 0) {
                    velocity = clamp(vx * -1, 3, 5) * -1;
                } else {
                    velocity = dx < 0 ? -3 : 3;
                }

                const hasSwipedHorizontally = Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD
                const hasSwipedVertically = Math.abs(this.state.pan.y._value) > SWIPE_THRESHOLD
                if (hasSwipedHorizontally || (hasSwipedVertically && this.props.hasSwipeUpAction)) {

                    let cancelled = false;

                    const hasMovedRight = hasSwipedHorizontally && this.state.pan.x._value > 0
                    const hasMovedLeft = hasSwipedHorizontally && this.state.pan.x._value < 0
                    const hasMovedUp = hasSwipedVertically && this.state.pan.y._value < 0

                    if (hasMovedRight) {
                        cancelled = this.props.onSwipeRight(this.state.card);
                    } else if (hasMovedLeft) {
                        cancelled = this.props.onSwipeLeft(this.state.card);
                    } else if (hasMovedUp && this.props.hasSwipeUpAction) {
                        cancelled = this.props.onSwipeUp(this.state.card);
                    } else {
                        cancelled = true
                    }

                    //Yup or nope was cancelled, return the card to normal.
                    if (cancelled) {
                        this._resetPan();
                        return;
                    };
                    this.props.onCardRemoved(currentIndex[this.guid]);

                    if (this.props.smoothTransition) {
                        this._advanceState();
                    } else {
                        this.cardAnimation = Animated.decay(this.state.pan, {
                            velocity: { x: velocity, y: vy },
                            deceleration: 0.98
                        });
                        this.cardAnimation.start(status => {
                            if (status.finished) this._advanceState();
                            else this._resetState();

                            this.cardAnimation = null;
                        }
                        );
                    }

                } else {
                    this._resetPan();
                }
            }
        });