[英]How do I disable the touch of a child element in Touchable Component
I have following code我有以下代码
<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
<View style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
</View>
</TouchableOpacity>
</BlurView>
Which result in following结果如下
I have TouchableOpacity covering the BlurView area because I want the full blur view screen to respond to touch event and hide it.我有 TouchableOpacity 覆盖 BlurView 区域,因为我希望完整的模糊视图屏幕响应触摸事件并将其隐藏。 except the view in the center.
除了中心的景色。 It will contain the video and must not receive the touch event of its parent component and it must have touch event of its own.
它将包含视频,并且不能接收其父组件的触摸事件,并且必须具有自己的触摸事件。
How do I do this?我该怎么做呢? Or I am willing to know if there are alternatives to achieve the similar result.
或者我愿意知道是否有其他方法可以达到类似的结果。
Nested Touchable seems to work in my case. Nested Touchable 似乎对我有用。
<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
<TouchableHighlight style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
<View></View>
</TouchableHighlight>
</TouchableOpacity>
</BlurView>
When I click on child TouchableHighlight
it seems to receive the child touch event and ignore parent.当我单击 child
TouchableHighlight
它似乎收到了 child touch 事件并忽略了 parent。 This seems to work for now, not sure if it is the good option, will be open to hear for better options.这似乎暂时有效,不确定它是否是好的选择,将愿意听取更好的选择。
I also found this我也发现了这个
How can I propagate touch event in nested Touchable in React Native? 如何在 React Native 的嵌套 Touchable 中传播触摸事件?
https://facebook.github.io/react-native/docs/gesture-responder-system https://facebook.github.io/react-native/docs/gesture-responder-system
React Native onStartShouldSetResponder and onResponderRelease? React Native onStartShouldSetResponder 和 onResponderRelease?
You can leverage pointerEvents :您可以利用pointerEvents :
<BlurView blurType={'light'} blurAmount={10} style={{flex: 1}}>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.setState({displayVideoModal: false})}>
<View pointerEvents="none" style={{width: moderateScale(300), height: moderateScale(300), backgroundColor: '#333333', borderRadius: moderateScale(24)}}>
</View>
</TouchableOpacity>
</BlurView>
Nested touchables were not working for me because I also had buttons in the floating view.嵌套的可触摸对象对我不起作用,因为我在浮动视图中也有按钮。 On the background overlay view (BlurView in this case), add the following props:
在背景叠加视图(本例中为 BlurView)上,添加以下道具:
onStartShouldSetResponder={(event) => {
return event.nativeEvent.touches.length == 1;
}}
onResponderRelease={(event) => {
if (event.target == event.currentTarget) {
this.props.onCancel()
}
}}
This works because event.currentTarget
is the view that has the prop onResponderRelease
and target
is the view that the touch was released upon.这是有效的,因为
event.currentTarget
是具有道具onResponderRelease
的视图,而target
是释放触摸的视图。
React Native Gesture Responder System documentation: https://facebook.github.io/react-native/docs/gesture-responder-system React Native Gesture Responder 系统文档: https : //facebook.github.io/react-native/docs/gesture-responder-system
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.