扁平化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";
- 写一个按钮 呼出alertView :
this.refs.RNAlertView_CL.showAlert();
4.当点击确定的时候:
alertSureDown=()=>{
//打电话
//隐藏弹框
this.refs.RNAlertView_CL.closeAlert();
}
嗯 就酱
如果把描述 DesText 放出来的话就是