如何在 Touchable Component 中禁用子元素的触摸

Question

我有以下代码

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

结果如下

我有 TouchableOpacity 覆盖 BlurView 区域，因为我希望完整的模糊视图屏幕响应触摸事件并将其隐藏。除了中心的景色。它将包含视频并且不能接收其父组件的触摸事件并且它必须有自己的触摸事件。

我该怎么做？或者我想知道是否有其他方法可以达到类似的结果。

Answer 1

您可以利用 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>

Answer 2

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>

当我点击 child TouchableHighlight 时，它似乎接收到 child 触摸事件并忽略 parent。这似乎暂时有效，不确定它是否是好的选择，将开放听取更好的选择。

我也找到了这个

https://facebook.github.io/react-native/docs/gesture-responder-system

React Native onStartShouldSetResponder and onResponderRelease?

Answer 3

嵌套的可触摸对象对我不起作用，因为我在浮动视图中也有按钮。在背景叠加视图（本例中为 BlurView）上，添加以下道具：

onStartShouldSetResponder={(event) => {
    return event.nativeEvent.touches.length == 1;
}}
onResponderRelease={(event) => {
    if (event.target == event.currentTarget) {
        this.props.onCancel()
    }
}}

之所以有效，是因为 event.currentTarget 是具有属性 onResponderRelease 的视图，而 target 是释放触摸的视图。

React Native 手势响应系统文档：https://facebook.github.io/react-native/docs/gesture-responder-system

如何在 Touchable Component 中禁用子元素的触摸

How do I disable the touch of a child element in Touchable Component

react-native

touchableopacity