如何在 React-Native 中停止触摸事件传播答案

【问题标题】：How to stop touch event propagation in React-Native如何在 React-Native 中停止触摸事件传播
【发布时间】：2015-08-06 22:12:10
【问题描述】：

当我长按图像时，我有一个带有图像网格的滚动视图，我想停止将鼠标事件传播到滚动视图并仅监视移动。意图在按下时重新初始化传播。有人知道怎么做吗？

【问题讨论】：

你有没有找到解决这个问题的方法？

标签： react-native

【解决方案1】：

这可能是自之前的答案以来的新内容，但我发现您可以使用另一个“可触摸”来吞噬该事件：

<TouchableOpacity onPress={this.onPressOuter}>
    <TouchableOpacity activeOpacity={1}>
        <Text>Content</Text>
    </TouchableOpacity>
</TouchableOpacity>

在本例中，触摸文字不会触发onPressOuter

【讨论】：

如果你有任何子元素，这不起作用，例如：<TouchableOpacity onPress={this.onPressOuter}> <TouchableOpacity activeOpacity={1}> <Text>Content</Text> <View> // this.onPressOuter is called here </View> </TouchableOpacity> </TouchableOpacity>

【解决方案2】：

我通过使用将内部变量设置为 true 的类方法包装我的新闻事件来解决此问题，然后执行原始逻辑，并在完成后再次将内部变量设置为 false。然后，您可以包装容器组件事件处理程序以检查内部变量是否设置为 true 或 false。例如：

<TouchableOpacity onPress={this.doSomething1}>
    <TouchableOpacity onPress={this.doSomething2}>
        <Image ... />
    </TouchableOpacity>
</TouchableOpacity>

doSomething1() {
    this.preventDefault = true;
    doSomeLogic();
    this.preventDefault = false;
}

doSomething2() {
    if(!this.preventDefault) {

    }
}

【讨论】：

【解决方案3】：

这是最简单的答案：

在您希望传播停止的点的内部视图上使用它

onTouchEnd={(e) => {
   e.stopPropagation()
}}

【讨论】：

这适用于 React Native，而不是 React web。 stopPropogation 是浏览器方法。
@EhrenMurdick 你确定吗？它在 react native 的 SyntheticEvent 类型 def 中 github.com/facebook/react-native/blob/…
@EhrenMurdick 我建议阅读这篇文章以更好地了解反应事件系统架构levelup.gitconnected.com/…
我的立场是正确的！感谢您纠正我，这一点很重要！

【解决方案4】：

添加到视图以捕获传播的事件并停止它

onStartShouldSetResponder={(event) => true}
onTouchEnd={(e) => { e.stopPropagation(); }}

<TouchableOpacity onPress={this.doSomething1}>
  <View
   onStartShouldSetResponder={(event) => true}
   onTouchEnd={(e) => {
     e.stopPropagation();
   }}
  >
      <TouchableOpacity onPress={this.doSomething2}>
        <Image ... />
      </TouchableOpacity>
  </View>
</TouchableOpacity>

【讨论】：

【解决方案5】：

您应该看看手势响应器的方法：https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle。实际上，更简单的方法是查看 PanResponder https://facebook.github.io/react-native/docs/panresponder.html - 首先查看 UIExplorer 示例以查看它的运行情况：https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ResponderExample.js。我不确定这是否能处理你的长按案例？

【讨论】：

其实我已经找到并开始使用它了。忘了我发布了这个问题。它会导致我正在尝试完成的其他问题，但它正在工作。我使用长按来翻转启用滚动，然后使用响应者生命周期挂钩来获取事件并观察移动和释放。
只需将 prop onStartShouldSetResponder={event => true} 添加到您要防止冒泡的中。
@jarek 示例链接已损坏

【解决方案6】：

在我的例子中，外部可触摸的onPress 被首先调用，即使我按下了内部可触摸。

我所做的是在内部触摸屏中使用onPressIn 和onPressOut 来确定用户是按下内部触摸屏还是外部触摸屏 - 通过在组件类中设置一个标志，在onPressIn 上并清除它在onPressOut 上，然后在外部可触摸的onPress 处理程序中检查该标志，如果已设置则退出。

【讨论】：