自定義AlertView：主界面隨文本高度變化而變化

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'/>
    )
}