我有一个位于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>
);
}
}
答案 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)
类似
<TouchableWithoutFeedback/>
<Overlay/>
<TouchableWithoutFeedback>