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

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 区域，因为我希望完整的模糊 View 屏幕响应触摸事件并将其隐藏。除了中心的景色。它将包含视频，并且不能接收其父组件的触摸事件，并且必须具有自己的触摸事件。

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

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它似乎接收到子触摸事件并忽略父。这似乎暂时有效，不确定它是否是好的选择，将愿意听取更好的选择。

我也发现了这个

How can I propagate touch event in nested Touchable in React Native?

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

React Native onStartShouldSetResponder and onResponderRelease?