如何在 React-Native 中将按下事件从内部 Touchable 冒泡到外部 Touchable？答案

【问题标题】：How to Bubbling press event from inner Touchable to outer Touchable in React-Native?如何在 React-Native 中将按下事件从内部 Touchable 冒泡到外部 Touchable？
【发布时间】：2019-06-19 02:29:43
【问题描述】：

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

我正在使用 React-Native 0.57

这是我的零食example。

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

<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内部，也可以在非Touchable组件中

【问题讨论】：

为什么要嵌套两个TouchableOpacity 组件。只需删除您不想用View替换的那个。
代码是简化版，实际情况下，内部Touchable是一个可以在各种场景中使用的组件，要么在Touchable内部，要么在非Touchable组件中
用VIew替换TouchableOpacity
对不起，但这不是我问题的答案，使用您的解决方案，应用程序的行为会非常不同。我想要一个事件触发按下红色块（不是绿色），2 个事件触发按下绿色块
@David 我可以看到这两个答案都不是很好的解决方案，您找到解决方案了吗？

标签： javascript react-native

【解决方案1】：

您可以使用View 或TouchableOpacity 使可重用组件有条件地呈现，具体取决于您传递的属性。

如果您总是希望外部组件触发这可能会成功

【讨论】：

但是如果渲染内部组件没有Touchable，我会丢失内部onPress 事件
如果您的自定义组件具有<CustomComponent renderWithTouchable={true} /> 之类的属性，那么您可以控制是使用视图还是使用可触摸对象进行渲染。如果组件周围有 TouchableOpacity 并且您想优先使用，您只需设置 renderWithTouchable={true}

【解决方案2】：

如果您想在一个被触发时调用另一个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
}

【讨论】：

是的，这可能是一个解决方案，但我的代码是一个简化版本，在原始版本中，内部Touchable是一个可重用组件，所以它不知道是否有外部@ 987654331@。而且不仅onPress有问题，onLongPress等新闻发布会也有问题。