如何在 React-Native 中从内部可触摸到外部可触摸冒泡新闻事件

Question

我有 2 个嵌套Touchable，我想在外部Touchable和内部Touchable中捕获onPress事件，但只有内部事件会触发onPress事件，因此我们可以说该事件不会传播到父元素

我正在使用反应原生 0.57

这是我的零食示例。

我也在这里重新发布我的渲染代码：

<TouchableOpacity onPress={() => alert('outer')}
    style={{ backgroundColor: 'red', width: 200, height: 200 }}>
    <TouchableOpacity onPress={() => alert('inner')}
        style={{ backgroundColor: 'green', width: 100, height: 100 }}
    />
</TouchableOpacity>

如何仅显示内部警报或外部警报。
相反，我想显示外部和内部警报按下绿色视图......

代码是简化版本，在实际情况下，内部Touchable是一个可以在各种场景中使用的组件，要么在Touchable内部，要么在非可触摸组件中

Answer 1

如果你想在

触发一个处理程序时调用另一个TouchableOpacity的onPress处理程序，只需从触发的处理程序的onPress处理程序调用它。

<TouchableOpacity onPress={myHandler}
    style={{ backgroundColor: 'red', width: 200, height: 200 }}>
    <TouchableOpacity onPress={myOtherHandler}
        style={{ backgroundColor: 'green', width: 100, height: 100 }}
    />
</TouchableOpacity>

如果myOtherHandler被最内层的TouchableOpacity onPress调用，你这样调用myHandler：

cost myOtherHandler = () => {
   myHandler(); 
   // ...other stuff
}

Answer 2

您可以根据传递的属性，有条件地呈现具有View或TouchableOpacity的可重用组件。

如果您总是希望外部组件触发，这可能会解决问题