如何防止用户单击覆盖层

Question

我有一个覆盖层定位absolute，它有backgroundColor，它覆盖了整个屏幕。它覆盖了几个按钮组件，我仍然可以通过覆盖层单击这些组件。

如何防止此行为？我想先吞下所有登陆叠加层的点击事件。

法典：

// Overlay
export default class Overlay extends Component {
    render() {
        return (
            <View style={styles.wrapper} />
        );
    }
}
const styles = StyleSheet.create({
    wrapper: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        backgroundColor: "black",
        opacity: 0.7
    }
});
// Container
export default class Container extends Component {
    render() {
        return (
            <View>
                <Overlay />
                <Button onPress={() => this.doSomething()}>
                    <Text>Hello</Text>
                </Button>
            </View>
        );
    }
}

Answer 1

将绝对位置组件写入其他组件之后，以将其呈现在其他组件上。

export default class Container extends Component {
        render() {
            return (
                <View>
                    <Button onPress={() => this.doSomething()} title="Hello" />
                    <Overlay />    // provide appropriate height and width to the overlay styles if needed...
                </View>
            );
        }
    }

Answer 2

• 解决方案 1 - 您可以尝试从 react-native 使用模态组件
• 解决方案 2 - 包装可触摸没有反馈有空白按下您的叠加层。不要忘记为TouchableWithoutFeedback提供完整的高度和宽度

类似的东西

 <TouchableWithoutFeedback>
     <Overlay/>
 <TouchableWithoutFeedback/>