Question

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

Answer 1

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

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

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

Answer 2

你应该看看手势响应者的方法：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。我不确定这是否会处理你的长篇大论？

Answer 3

我通过使用将内部变量设置为true的类方法包装我的press事件来解决此问题，然后执行原始逻辑，并在完成之后再次将内部变量设置为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) {

    }
}

Answer 4

这将是最简单的答案：

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

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

Answer 5

就我而言，即使我按下了内部可触摸对象，也首先调用了外部可触摸对象的onPress。

我所做的是在内部可触摸对象中使用onPressIn和onPressOut来确定用户是按下内部可触摸对象还是外部可触摸对象-通过在{{ 1}}并在onPressIn上将其清除，然后在外部touchable的onPressOut处理程序中检查该标志，并对其进行设置以备援。

Answer 6

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

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>

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

6 个答案: