首页 > 解决方案 > 当我有 PanResponder 时,如何保持滑动以返回?

问题描述

我的组件有效,但它会覆盖react-navigation的边缘滑动以返回。

如何捕获平移处理程序的“开始”,以免后退手势被覆盖?

import React from 'react'
import { PanResponder, Animated, View } from 'react-native'

class SwipeView extends React.Component{
    translateX = new Animated.Value(0);
    panResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: (e, gs) => {  
            return gs.dx > 0  //only allow right swipes
        },
        onPanResponderMove: (e, gs) => { 
            if(gs.dx > 0) { //only allow right swipes
                Animated.event([null, {dx: this.translateX}])(e, gs) 
            }
        },
        onPanResponderTerminationRequest: (e, gs) => {
            return false 
        },
        onPanResponderTerminate: (e, {vx, dx} ) => {
            //do nothing
        },
        onPanResponderRelease: (e, {vx, dx}) => {
            Animated.spring(this.translateX, { toValue: 0, bounciness: 8, speed:48, }).start((result) => {
                if(dx > 24){
                    if(this.props.onSwipe) this.props.onSwipe(this.props)                    
                }
            });
        },
    })
    constructor(props){
        super(props)
    }
    render(){
        return(
            <Animated.View
                style={{transform: [{translateX: this.translateX}]}}  {...this.panResponder.panHandlers}
            >
                <View>{React.cloneElement(this.props.children, this.props)}</View>
            </Animated.View>
        )
    }
}
export default SwipeView

标签: react-nativegesture

解决方案


推荐阅读