import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
View,
Modal,
ImageBackground,
TouchableHighlight,
Animated,
Text,
TouchableWithoutFeedback,
} from "react-native";
import styles from "./AlertImageViewStyle";
class AlertImageView extends Component<{}> {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
msgHeight: 10,
contentHeight: this.props.contentHeight,
};
}
/*true是可見,false是不可見*/
onChangeVisible(isShow) {
this.setState({
modalVisible: isShow,
});
}
/*隱藏view*/
onCloseView() {
this.onChangeVisible(false)
}
_titleLayout(event) {
var titleHeight=event.nativeEvent.layout.height
if (this.state.msgHeight < titleHeight) {
this.setState({
contentHeight: 170 + titleHeight,
msgHeight: titleHeight,
})
}
// this.getItemHeight(this.titleHeight,this.textHeight)
}
render() {
return (
<Modal
visible={this.state.modalVisible}
animationType={'none'}
transparent = {true}
onRequestClose={() => {this.setModalVisible(false);}}
>
<View style={styles.view_main} >
<View style = {[styles.view_content,{height: this.state.contentHeight, width: this.props.contentWidth, backgroundColor: 'red'}]}>
<ImageBackground source={{uri: 'alert_bg.png'}} style = {styles.bg}>
</ImageBackground>
<View style = {styles.view_content_title}>
<Text style = {styles.text_title}>
Success
</Text>
</View>
<View style = {[styles.view_content_msg, {height: this.state.msgHeight}]}>
<Text style = {styles.text_msg}
onLayout={this._titleLayout.bind(this)}
>
fisafhoiafoashfoihsaoifhaos
fisafhoiafoashfoihsaoifhaos
fisafhoiafoashfoihsaoifhaos
</Text>
</View>
<View style = {styles.view_content_btn}>
<TouchableHighlight style = {styles.btn_done} onPress = {this.onCloseView.bind(this)}>
<Text style = {styles.text_done}>
DONE
</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>
)
}
}
AlertImageView.defaultProps = {
contentHeight: 280,
contentWidth: 280,
}
AlertImageView.propTypes = {
contentHeight: PropTypes.number,
contentWidth: PropTypes.number,
}
export default AlertImageView;
使用:
onPressSubmit() {
var myAlertView = this.refs.MyAlertView;
myAlertView.onChangeVisible(true);
}
-------
render() {
return (
*******其他控件********
<AlertImageView ref = 'MyAlertView'/>
)
}