如何在 React-Native 中从内部 Touchable 到外部 Touchable 冒泡新闻事件？

Question

I've 2 nested Touchable s, I would like to capture the onPress event in either the outer Touchable and the inner Touchable , but only the inner one will fire the onPress event, so we can say that the event is not propagated to the parent element

I'm using React-Native 0.57

This is my snack example .

I also repost my render code here:

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

How you can see only the inner alert or the outer alert are showed.
Instead I would like to show either the outer and the inner alert pressing on the green View...

The code is a simplified version, in the real case the inner Touchable is a component that can be used in various scenario, either inside a Touchable , either in non Touchable component

Answer 1

You could make the reusable component render conditionally either with View or TouchableOpacity depending on a property you pass it.

If you always want the outer component to trigger this will probably do the trick

Answer 2

If you want to call the other TouchableOpacity 's onPress handler when one is triggered, just call it from the onPress handler of the one that is triggered.

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

If myOtherHandler is called by the inner-most TouchableOpacity 's onPress , you call myHandler like this:

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