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

Question

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

Answer 1

将以下内容添加到

<View>

以捕获传播的事件并停止它：

• 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>

Answer 2

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

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

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

onPressOuter

Answer 3

我通过用类方法包装新闻事件来解决这个问题，将内部变量设置为 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) {

    }
}

Answer 4

这是最简单的答案：

在内部视图中您希望传播停止的位置使用此功能

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

Answer 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。我不确定这是否能处理你的长按情况？

Answer 6

在我的例子中，外部可触摸的

onPress

首先被调用，即使我按下了内部可触摸。

我所做的是使用内部可触摸中的

onPressIn

和

onPressOut

来确定用户是按下内部还是外部可触摸 - 通过在组件类中的

onPressIn

上设置一个标志并在

 上清除它onPressOut

，然后在外部可触摸对象的

onPress

处理程序中检查该标志，如果已设置则退出。

Answer 7

经过一天多的时间寻找答案，这对我有用。

import {TouchableOpacity} from 'react-native-gesture-handler';

<TouchableOpacity onPress={outside}>
  //outside code here
  <TouchableOpacity 
    onPress={inside}
    disallowInterruption={true}>
      //inner code here
  </TouchableOpacity>
</TouchableOpacity>

将

disallowInterruption

设置为

true

将防止 React Native 中的事件冒泡。 原始来源：https://github.com/software-mansion/react-native-gesture-handler/issues/784

Answer 8

几年后我才提出这个问题，因此为较新的 React Native 提供注释

Pressable

，以防对任何人有帮助。

最初我有一个

Pressable

包裹了一些内容，我想防止内容上的触摸事件导致可按的

onPress

触发。

<Pressable onPress={() => doSomething()}>
  <View 
    onStartShouldSetResponder={() => true} 
    onTouchEnd={(e) => e.stopPropagation()}>
  <Content ... />
  </View>
</Pressable>

但是，这不起作用。解决方法是不使用

Pressable

作为包装器，而是使用

View

。特别注意，如果内部

View

在触摸结束时停止传播，则外部

View

必须仅响应触摸结束而不是触摸开始。

<View onTouchEnd={() => doSomething()}>
  <View 
    onStartShouldSetResponder={() => true} 
    onTouchEnd={(e) => e.stopPropagation()}>
  <Content ... />
  </View>
</View>