React Native - 捕获所有触摸事件，但 Touchable 没有冒泡 [英] 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.

我尝试将我的应用包装在 TouchableWithoutFeedback 中:

I tried wrapping my app in a TouchableWithoutFeedback:

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

如果按下的元素不是 Touchable，这会起作用，但否则事件似乎被吞没，不会冒泡到顶层 onPress.

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.

这似乎是 Touchables 的限制(他们吞下手势) - https://github.com/facebook/react-native/issues/6796

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

推荐答案

如果您在使用 TouchableHighlight 的可触摸背景组件之后渲染工具提示组件，则由于组件的渲染顺序，您将保留可触摸工具提示特性.

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.

所以你将有:

|工具提示1||工具提示2||背景可触摸|

|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}

这篇关于React Native - 捕获所有触摸事件，但 Touchable 没有冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！