反应：忽略从孩子到父母的触摸事件

Question

我遇到了React Native的问题： 我有我的简单视图层次结构：

<View><MapView/></View>

我想听取根视图的onClick监听器，并根据这些监听器执行某些操作。与此同时，我希望我的用户使用Mapview，执行某些类型的触摸交互，而不触发用于监听的监听器父母（他们不幸地做了：作为父母 - 大拇指的经验法则）

<View><MapView pointerEvents="none"/><View>

这在某种程度上起作用，但它根本不会提供我与MapView的交互。我正在寻找一种方法，我们可以与MapView进行交互，同时触摸事件也不会被触发到父视图。 ：）

Answer 1

**

捕获ShouldSet处理程序

**

使用冒泡模式调用

onStartShouldSetResponder 和onMoveShouldSetResponder，首先调用最深的节点。这意味着当多个Views为* ShouldSetResponder处理程序返回true时，最深的组件将成为响应者。在大多数情况下，这是可取的，因为它确保所有控件和按钮都可用。

假设您有一个简单的视图层次结构。

<强>样品-1

在这种情况下，首先控制view2，因为它返回true，它变为可点击

<View onStartShouldSetResponder={(evt) => return true}> //View1
 <View onStartShouldSetResponder={(evt) =>//do something return true}>//View2
 </View>
</View>

<强>样品-2

在这种情况下，view2首先被控制，因为它返回false，它不可点击，然后View1被控制，因为它返回true，它变得可点击。

<View onStartShouldSetResponder={(evt) => //do something return true}> //View1
 <View onStartShouldSetResponder={(evt) => return false}>//View2
 </View>
</View>

使用组件时，此层次结构非常有用。例如，您想要创建一个名为mapView的组件，并且您希望根据您使用它的组件使其可点击。

class mapView extends Component
{
  .
  .
  render(){
return(
  <View onStartShouldSetResponder={(evt) => return {this.props.shouldBeClickable}>
   .
   .
  </View>
)
}
}


 -make your parent component clickable
class oneOfyourComponentUsingMapView extends Component
    {
      .
      .
      render(){
    return(
      <View onStartShouldSetResponder={(evt) =>//do something return true>
       <MapView shouldBeClickable={false}>
       .
       .
       </MapView>
      </View>
    )
    }
    }

- 使您的子组件可点击

  class oneOfyourComponentUsingMapView2 extends Component
        {
          .
          .
          render(){
        return(
          <View>
           <MapView shouldBeClickable={true}>
           .
           .
           </View>
          </View>
        )
        }
        }

https://facebook.github.io/react-native/docs/gesture-responder-system.html