当模态打开时，停止新闻事件的传播/防止React Native应用程序冒泡

Question

我目前正在开发React Native移动应用程序。

我在主视图上设置了PanResponder。我的主视图创建了一个包含Modal的组件。

我的问题是，当Modal打开时，位于模态(在主视图中(下方的PanResponder仍然对滑动事件做出响应，我正试图阻止它们。

我试图在Modal中创建一个PanResponder来阻止后面的那个，但它不起作用。

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,
}); 

也来自文档：

因此，如果父视图希望阻止子对象成为响应者在触摸启动时，它应该具有onStartShouldSetResponderCapture返回true的处理程序。

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