reactjs 如何在本机模式中使背景变暗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48058532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dim a background in react native modal?
提问by Asbar Ali
Following is my created react native Modal and still couldn't find how to dim the background and transparent around pop-up modal.I am not using any external libraries and trying to find solution without libraries.Is it possible to do with on this way?
以下是我创建的 react native Modal，但仍然找不到如何使背景变暗和在弹出模式周围透明。我没有使用任何外部库并试图找到没有库的解决方案。是否可以通过这种方式进行?
My Modal Component
我的模态组件
render() {
let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />;
return (
<View style={styles.container}>
<Modal
animationType='slide'
onRequestClose={() => console.log('no warning')}
presentationStyle="FormSheet"
transparent
visible={this.state.showModal}
>
<View>
<View style={styles.modalView} >
<TouchableOpacity
onPress={this.closeModalFunc}
>
<Text style={styles.closeText}>X</Text>
</TouchableOpacity>
<View>
{modal}
</View>
</View>
</View>
</Modal>
</View>
);
}
Modal Component Style
模态组件样式
import {StyleSheet} from 'react-native';
import colors from '../../../theme/colors';
import metrics from '../../../theme/metrics';
import {container} from '../../../theme/base';
const styles = StyleSheet.create({
container: {
backgroundColor: colors.background.gray,
},
modalView: {
backgroundColor: colors.background.white,
margin: 40,
},
closeText: {
backgroundColor: colors.background.purpleishBlue,
color: colors.background.white,
borderRadius: metrics.avatar.small,
width: 32,
padding: 6,
alignSelf: 'flex-end',
textAlign: 'center',
borderWidth: 1,
borderColor: colors.background.white,
},
});
export default styles;
回答by mai danh
I solve this one by create my own component MyPopup like below
我通过创建自己的组件 MyPopup 来解决这个问题，如下所示
class MyPopup extends React.PureComponent {
render() {
return (
<Modal
animationType="fade"
transparent={true}
visible={this.props.visible}
>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)'}}>
{this.props.children}
</View>
</Modal>
)
}}
Then I use it like
然后我用它就像
<MyPopup visible={this.state.modalVisible}>
<View style={{
width: '90%',
height: 50,
borderColor: '#ccc',
borderWidth: 1,
borderStyle: 'solid',
backgroundColor: 'white',
elevation: 20,
padding: 10,
borderRadius: 4,
}}>
<Text>Hello, This is my model with dim background color</Text>
</View>
回答by Ahsan Ali
You can programmatically set the opacity of your main Viewwhen Modalis visible.
您可以以编程方式设置主视图可见View时的不透明度Modal。
<View style={[styles.container, this.state.showModal ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']}>
回答by Yassine Letaief
I had the same problem as you and I solved it by setting transparent={true}in the Props of the modal and by setting a 50% transparency in the style of the Modal's main View: backgroundColor: 'rgba(0, 0, 0, 0.5)'
我和你有同样的问题，我通过transparent={true}在模态的道具中设置并在模态的主视图的样式中设置 50% 的透明度来解决它：backgroundColor: 'rgba(0, 0, 0, 0.5)'
回答by Tahir Khalid
I created a container style then I applied the rgba values for backgroundColore.g:
我创建了一个容器样式，然后应用了 rgba 值，backgroundColor例如：
modalContainer:{
flex: 1,
//backgroundColor: 'transparent',
backgroundColor: 'rgba(0,0,0,0.7)',
alignItems: 'center',
justifyContent: 'center',
},
Then inside the modal I created my actual modal dialog with rounded corners (I achieved this by adding another element inside the modal content and gave it a white background with rounded corners).
然后在模态中，我创建了带圆角的实际模态对话框（我通过在模态内容中添加另一个元素并给它一个带圆角的白色背景来实现这一点）。
