[英]React Native Modal Transparent Not Working
因此,我想使用“模态”来禁用屏幕上的所有交互,但我仍然希望屏幕上的所有内容都可见。 奇怪的是,它对我来说早些时候就可以正常工作,然后我尝试将Modal变成自己的组件,但是一旦这样做,它就停止了正常工作。 然后我回到原来的工作,但仍然遇到同样的问题。 当它起作用时,我应该提交它。
知道我哪里出错了吗?
这是我的代码:
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>
);
}
}
}
样式:
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,
},
尝试将transparent
属性添加到您的模态。
例:
<Modal
transparent
...>
...
</Modal>
Doc: https : //facebook.github.io/react-native/docs/modal.html#transparent
在<Modal />
上尝试transparent={true}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.