如何阻止用户点击叠加层?

时间:2017-10-20 10:39:49

标签: react-native

我有一个位于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>
        );
    }
}

2 个答案:

答案 0 :(得分: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>
            );
        }
    }

答案 1 :(得分:0)

  • 解决方案1-您可以尝试使用react-native
  • 中的Modal组件
  • 解决方案2-包裹TouchableWithoutFeedback在你的叠加层周围有空白onPress,不要忘记给TouchableWithoutFeedback提供完整的高度和宽度

类似

 <TouchableWithoutFeedback/>
     <Overlay/>
 <TouchableWithoutFeedback>