Question

现在，我在true中返回onStartShouldSetPanResponder，因此PanResponder想要处理水龙头和平底锅。有没有办法将它限制为只是平底锅，因为我想要TouchableHighlight来处理它？（我知道Gesture Responder应该同时处理两者，但是＃34; Pan＆＃34; Responder处理水龙头似乎很奇怪）

由于手势刚刚开始，dx / dy在onStartShouldSetPanResponder中为0。有没有办法检测它是否是点击的开始并返回false，如果是的话？

或者我应该只检测它是OnPanResponderRelease中的点击还是平移？

Answer 1

panResponder有两个事件：

onStartShouldSetPanResponder（捕捉）
onMoveShouldSetPanResponder（捕捉）

我只能通过删除onStartShouldSetPanResponderCapture 来解决此问题。

Answer 2

我能够通过如下的onMoveShouldSetPanResponder方法完成此任务：

onMoveShouldSetPanResponder: (evt, gestureState) => {
    return Math.abs(gestureState.dx) >= 1 || Math.abs(gestureState.dy) >= 1
}

如果x或y运动大于1，则返回true。为了随后检测到敲击，我必须将包含panHandlers的所有内容包装在具有可触摸元素的视图中。这是一个完整的工作示例：

class CircleTapExample extends Component {
    constructor(props) {
        super(props)
        this.position = new Animated.ValueXY({ x: 0, y: 0 });
        this.panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: (evt, gestureState) => { return Math.abs(gestureState.dx) >= 1 || Math.abs(gestureState.dy) >= 1 },//true,
            onPanResponderMove: (evt, gestureState) => {
                console.log("I was moved")
                this.position.setValue({ x: gestureState.moveX, y: gestureState.moveY })
            },
        });
    }
    circleTapped() {
        // Do something here when tapped
        console.log("I was tapped")
    }
    render() {
        return (
            <Animated.View style={[styles.container, { ...this.position.getLayout() }]} {...this.panResponder.panHandlers}>
                <TouchableOpacity onPress={() => this.circleTapped()} style={{ flex: 1 }}>
                    <View style={styles.circle} />
                </TouchableOpacity>
            </Animated.View>
        )
    }
}
const styles = {
    container: {
        width: 75,
        height: 75,
        bottom: 5,
        left: 5,
        position: 'absolute'
    },
    circle: {
        width: 75,
        height: 75,
        borderRadius: 40,
        backgroundColor: 'red'
    }
}

在React Native中，是否可以在Pan Responder的onStartShouldSetPanResponder中检测滑动与点按？

2 个答案: