[英]React Native Modal Transparent Not Working
So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. 因此,我想使用“模态”来禁用屏幕上的所有交互,但我仍然希望屏幕上的所有内容都可见。 It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly.
奇怪的是,它对我来说早些时候就可以正常工作,然后我尝试将Modal变成自己的组件,但是一旦这样做,它就停止了正常工作。 I then went back to what I originally did but still having the same issue.
然后我回到原来的工作,但仍然遇到同样的问题。 I should've committed it when it worked.
当它起作用时,我应该提交它。
Any idea where I went wrong? 知道我哪里出错了吗?
Here's my code: 这是我的代码:
import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
openModal() {
this.setState({modalVisible: true});
}
closeModal() {
this.setState({modalVisible: false});
}
render() {
return (
<View style={styles.container}>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.closeModal()}
>
<TouchableHighlight
style={styles.modalContainer}
onPress={() => this.closeModal()}
>
<Text>"Words n stuff"</Text>
</TouchableHighlight>
</Modal>
<View
style={styles.upperContainer}
/>
<View
style={styles.lowerContainer}
/>
</View>
);
}
}
}
Styles: 样式:
modalContainer: {
flexGrow: 1,
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
},
container: {
flexGrow: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
upperContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 18,
width: screenWidth,
marginTop: -140,
},
lowerContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'space-around',
width: screenWidth,
},
Try to add transparent
property to your Modal. 尝试将
transparent
属性添加到您的模态。
Example: 例:
<Modal
transparent
...>
...
</Modal>
Doc: https://facebook.github.io/react-native/docs/modal.html#transparent Doc: https : //facebook.github.io/react-native/docs/modal.html#transparent
在<Modal />
上尝试transparent={true}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.