如何禁用可触摸组件中子元素的触摸

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

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。这似乎暂时有效，不确定它是否是好的选择，将愿意听取更好的选择。

我也发现了这个

如何在 React Native 的嵌套 Touchable 中传播触摸事件？

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

React Native onStartShouldSetResponder 和 onResponderRelease？

Answer 2

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