Question

我目前正在使用React-Native移动应用程序。

我的主视图中设置了PanResponder。我的主视图创建了一个包含Modal。

的组件

我的问题是当Modal打开时，位于模式下方的PanResponder（在主视图中）仍然响应滑动事件，我试图阻止它们

我尝试在PanResponder中创建一个Modal以阻止后面的人，但它无法正常工作。

MainView.js

componentWillMount() {
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponderCapture: () => false,
        onMoveShouldSetPanResponderCapture: () => true,
    });
}
render() {
    return (
        <View {...this.panResponder.panHandlers}>
            {...}
            <SubView />
        </View>
    )
}

SubView.js

componentWillMount() {
    // Tentative of blocking the main view PanResponder
    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onStartShouldSetPanResponderCapture: () => true,
        onMoveShouldSetPanResponder: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
    });
}
render() {
    return (
        <Modal transparent {...this.panResponder.panHandlers}>
            {...}
        </Modal>
    )
}

我想避免更改主视图上的PanResponder设置，我不希望它知道是否有模态打开。

您是否知道阻止事件传播的良好解决方案？

由于

Answer 1

那么，如果您不想响应手势，为什么在SubView方法中返回true。我想你应该回复假：

this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => false,
    onStartShouldSetPanResponderCapture: () => false,
    onMoveShouldSetPanResponder: () => false,
    onMoveShouldSetPanResponderCapture: () => false,
});

也来自文档：

因此，如果父View希望阻止孩子成为响应者在触摸开始时，它应该有一个onStartShouldSetResponderCapture 处理程序返回true。

View.props.onStartShouldSetResponderCapture: (evt) => true,
View.props.onMoveShouldSetResponderCapture: (evt) => true,

当模态打开时，停止传播事件/防止在React-Native应用程序上冒泡

1 个答案: