React Native - catch all touch events but Touchable's are not bubbling

问题

I've made a tooltip and I want it to close on a touch event outside the tooltip. However I don't want to make an opaque view because I still want the touch to work on whatever was pressed.

I tried wrapping my app in a TouchableWithoutFeedback:

<TouchableWithoutFeedback onPress={(e) => this.onAppTouch(e)}>

This works if the element pressed isn't a Touchable, but otherwise the event seems to get swallowed and not bubble up to that top level onPress.

Is there a way to get this to work or else an alternative? Thanks.

Edit: this seems to be a limitation of Touchables (they swallow up gestures) - https://github.com/facebook/react-native/issues/6796

回答1:

If you render your tooltip components after a touchable background component with TouchableHighlight you will preserve the touchable tooltip characteristic because of the rendering order of you components.

So you will have:

|Tooltip1| |Tooltip2| |Background Touchable|

If you want to hide it or shown it depending on your state:

var touchOn = (<TouchableHighlight>Background Component</TouchableHighlight>)
var touchOff = <Your other component/>

And the to control the state and render one or the other write the condition:

{this.state.openTooltip ? touchOn : touchOff}

来源：https://stackoverflow.com/questions/38632613/react-native-catch-all-touch-events-but-touchables-are-not-bubbling