React-native 自定义alertView 即拿即用

扁平化UI。 Alert弹窗
======================js文件==========================
import React from 'react';
import PropTypes from 'prop-types';

import {Text, View, Modal, Image, Dimensions, Platform,Keyboard,TouchableOpacity, TextInput,KeyboardAvoidingView,} from 'react-native';
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default class RNAlertView_CL extends React.Component {
constructor(props) {
super(props);
this.state = {
placeViewHeight: 0,
checkIndex: 1,
modalVisible:false,

    }
}

static propTypes = {
    /****************是否显示************************/
    ModalVisible: PropTypes.bool,//是否显示对话框
    subTitleVisible: PropTypes.bool,//是否显示审核按钮

    /********文字****************/
    TitleText: PropTypes.any,//标题文字
    DesText:PropTypes.any,//描述文字
    CancelText: PropTypes.any,//取消文字
    OkText: PropTypes.any,//确定文字

    /***********宽高距离*************/
    HeightModal: PropTypes.any,//这个弹窗的高度
    WidthModal: PropTypes.any,//这个弹窗的宽度
    TitleHeight: PropTypes.any,//这个弹窗的标题高度
    TitleWidth: PropTypes.any,//这个弹窗的标题宽度
    TitleMarginTop: PropTypes.any,//标题顶部距离
    TitleMarginBottom: PropTypes.any,//标题底部距离
    BottomHeight: PropTypes.any,//这个弹窗的底部高度
    BottomWidth: PropTypes.any,//这个弹窗的底部宽度

    /********字体****************/
    TitleFontSize: PropTypes.number,//标题的文字大小
    TitleFontColor:PropTypes.any,//标题的文字颜色
    oneBtnSubtitleFontSize: PropTypes.number,//第一个按钮文字大小
    oneBtnSubtitleFontColor: PropTypes.any,//第一个按钮文字颜色
    TwoBtnSubtitleFontSize: PropTypes.number,//第二个按钮文字大小
    TwoBtnSubtitleFontColor: PropTypes.any,//第二个按钮文字颜色
    DescriptionFontSize: PropTypes.number,//描述的文字大小
    DescriptionFontColor: PropTypes.any,//描述的文字颜色
    BottomFontSize: PropTypes.number,//下面取消确定的文字大小
    BottomFontColor: PropTypes.any,//下面取消确定的文字的颜色


}

showAlert(){
    this.setState({modalVisible:true})
}

closeAlert(){
    this.setState({modalVisible:false})
}
alertSureDown(){
    this.props.alertSureDown();
}



    render(){
    return(
        
            this.setState({modalVisible:false})}
            >
                {this.renderContent()}
            
        
    );
    }

renderContent(){
    return(
        
            
                
                    {
                        /********title**********/
                        
                            {this.props.TitleText}
                            {
                                this.props.DesText &&
                                {this.props.DesText}
                            }
                        
                    }

                    

                    
                        this.setState({modalVisible:false})}
                        >
                            
                                {this.props.CancelText ? this.props.CancelText : '取消'}
                            
                        
                        this.alertSureDown()
                                                            }>
                            
                                {this.props.OkText ? this.props.OkText : '确定'}
                            
                        

                    
                
            
        
    )
}

}

const styles =
{
ViewPage: {
width: deviceWidth,
height:deviceHeight,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.2)'
},
container: {
flex: 1,
justifyContent: 'center',

    },
};

======================js文件==========================

用的时候 都在同一个界面
1.import RNAlertView_CL from "../../RNAlertView_CL";

3. 写一个按钮 呼出alertView ：
   this.refs.RNAlertView_CL.showAlert();

4.当点击确定的时候：
alertSureDown=()=>{
//打电话

    //隐藏弹框
    this.refs.RNAlertView_CL.closeAlert();
}

嗯 就酱

image.png

如果把描述 DesText 放出来的话就是

image.png