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(
<View>
<Modal
animationType={"fade"}
visible={this.state.modalVisible}
transparent={true}
onRequestClose={()=>this.setState({modalVisible:false})}
>
{this.renderContent()}
</Modal>
</View>
);
}
renderContent(){
return(
<View style={styles.ViewPage}>
<View style={{
// height: this.props.HeightModal ? this.props.HeightModal : (this.props.TextInputVisible?300:150),
height: this.props.HeightModal ? this.props.HeightModal : 150,
width: this.props.WidthModal ? this.props.WidthModal : 303,
backgroundColor: 'white',
borderRadius: 4,
display:'flex',
marginBottom:this.state.placeViewHeight,
}}>
<View style={{flex: 1,justifyContent:'space-around',marginTop:10}}>
{
/********title**********/
<View style={{
height: this.props.TitleHeight ? this.props.TitleHeight : (this.props.HeightModal?(this.props.HeightModal-50):100),
width: this.props.TitleWidth ? this.props.TitleWidth : 303,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{
fontSize: this.props.TitleFontSize ? this.props.TitleFontSize : 18,
color: this.props.TitleFontColor ? this.props.TitleFontColor : '#243047',
// marginTop: this.props.TitleMarginTop ? this.props.TitleMarginTop : 18,
marginBottom: this.props.TitleMarginBottom ? this.props.TitleMarginBottom : 10,
marginLeft:15,
marginRight:15,
}}>{this.props.TitleText}</Text>
{
this.props.DesText &&
<Text style={{
fontSize: this.props.TitleFontSize ? this.props.TitleFontSize : 18,
color: this.props.TitleFontColor ? this.props.TitleFontColor : '#243047',
// marginTop: this.props.TitleMarginTop ? this.props.TitleMarginTop : 18,
marginBottom: this.props.TitleMarginBottom ? this.props.TitleMarginBottom : 10,
marginLeft: 15,
marginRight: 15,
}}>{this.props.DesText}</Text>
}
</View>
}
<View style={{flex: 1}}/>
<View style={{
/***取消确定**/
height: this.props.BottomHeight ? this.props.BottomHeight : 50,
width: this.props.BottomWidth ? this.props.BottomWidth : 303,
flexDirection: 'row',
borderTopWidth: 0.5,
borderColor: '#E5E5E5',
}}>
<TouchableOpacity style={{flex: 1}}
onPress={()=>this.setState({modalVisible:false})}
>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 0.5,
borderColor: '#E5E5E5'
}}>
<Text style={{
fontSize: this.props.BottomFontSize ? this.props.BottomFontSize : 18
, color: this.props.BottomFontColor ? this.props.BottomFontColor : '#9EA3AD'
}}>{this.props.CancelText ? this.props.CancelText : '取消'}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flex: 1}}
onPress={()=>this.alertSureDown()
}>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center',borderBottomRightRadius:8}}>
<Text style={{
fontSize: this.props.BottomFontSize ? this.props.BottomFontSize : 18
, color: this.props.BottomFontColor ? this.props.BottomFontColor : '#3576F0'
}}>{this.props.OkText ? this.props.OkText : '确定'}</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
}
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";
<RNAlertView_CL ref="RNAlertView_CL" TitleText="拨打:18969604030" // DesText="就是一句话可以分两部分写" alertSureDown={this.alertSureDown} />- 写一个按钮 呼出alertView ：
this.refs.RNAlertView_CL.showAlert();
4.当点击确定的时候：
alertSureDown=()=>{
//打电话
//隐藏弹框
this.refs.RNAlertView_CL.closeAlert();
}
嗯 就酱
image.png
如果把描述 DesText 放出来的话就是
image.png