如何在本机模式中使背景变暗? [英] How to dim a background in react native modal?
本文介绍了如何在本机模式中使背景变暗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下是我创建的反应原生模态,但仍然找不到如何在弹出模态周围调暗背景和透明.我没有使用任何外部库并试图找到没有库的解决方案.是否可以用在这条路上?
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?
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>
);
}
模态组件样式
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;
推荐答案
我通过创建自己的组件 MyPopup 来解决这个问题,如下所示
I solve this one by create my own component MyPopup like below
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>
)
}}
那我就这么用
<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>
这篇关于如何在本机模式中使背景变暗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文