react native Modal 制作背景变暗
/**
* Create by bamboo on 2018-05-07
* Modal 例子
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Modal,
View, TouchableOpacity, TouchableHighlight,TouchableWithoutFeedback,
} from 'react-native';
export default class ModalTest extends Component {
constructor(props) {
super(props);
this.state = {
animationType: 'fade',//none slide fade 动画效果
modalVisible: false, //模态场景是否可见
transparent: true, //是否透明显示
};
}
render() {
return (
<View style={{ alignItems: 'center',}}>
<TouchableOpacity onPress={() => { this._setModalVisible(true)}}>
<Text style={{ fontSize: 30,color:'red' }} > 点击背景变暗</Text>
</TouchableOpacity>
<Modal style={{height:50,}}
animationType={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => { this._setModalVisible(false) } }
>
<TouchableWithoutFeedback onPress={() => { this._setModalVisible(false)}}>{/**触屏*/}
<View style={[styles.container, {backgroundColor:'rgba(0, 0, 0, 0.5)'}]}>
<View style={[styles.innerContainer]}>
<Text
style={{fontSize:20,marginTop:10}}>
随便点击屏幕变亮
</Text>
<Text>我注意你很久了</Text>
</View>
</View>
</TouchableWithoutFeedback>
</Modal>
</View>
);
}
/**
* 修改是否可见
*/
_setModalVisible =(visible)=>{
this.setState({
modalVisible: visible,
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 40,
},
innerContainer: {
borderRadius: 10,
alignItems: 'center',
},
});
以上是 react native Modal 制作背景变暗 的全部内容， 来源链接： utcz.com/z/381116.html
