ant弹窗_基于AntDesign改造优化的Modal弹窗

一、前言

在日常开发中，Modal使用必不可少，但是如果一个页面Modal弹窗过多，Modal的使用又必须要在render()方法里声明，这无疑是一件很恐怖的事情，就像如下场景

render() {

if (this.state.isLoading) {

return (

);

} else {

return (

style={ {flex: 1, backgroundColor: StyleConfig.color_background}}

contentContainerStyle={ {paddingTop: 0, paddingBottom: 50 + Global.bottomOfSafeArea}}

automaticallyAdjustContentInsets={false}

keyboardShouldPersistTaps="handled"

showsHorizontalScrollIndicator={false}

removeClippedSubviews={true}

showsVerticalScrollIndicator={false}>

props={this.props}

isAdd={true}

relationSex={this.state.relationSex}

relation={this.state.relation}

imageUrl={this.state.imageUrl}

userInfo={this.state.userInfo}

isFamilyMemeber={RelationShipMap.isFamilyMember(this.state.relation)}

loginType={this.state.loginType}

uploadImgCallBack={(fileId, picUrl) => {

this.fileId = fileId;

this.setState({imageUrl: picUrl});

}}

selectRelationCallback={relation => {

this.isCheckMember = true;

if (relation != null) {

this.setState({relation: Number.parseInt(relation)});

this.setAddress(relation);

this.getFamilyMemberByRelation(relation);

}

}}

idCardChangeCallBack={idCardNo => {

this.setState({relationSex: Common.isMaleFromIdCard(idCardNo) ? 1 : 0});

let value = {};

value[FamilyMemberKey.IDCARD] = idCardNo;

this.props.form.setFieldsValue(value);

}}

/>

{/*是否加入安心管*/}

{RelationShipMap.isFamilyMember(this.state.relation) && (

style={ {marginTop: 15}}

isJoinAnxin={this.isJoinAnxin}

promptText={'如将该成员加入安心管，可能引起家庭抗风险能力值发生变化'}

joinAnxinChange={checked => {

this.isJoinAnxin = checked;

}}

/>

)}

onPress={() => {

if (!RelationShipMap.isFamilyMember(this.state.relation)) {

this.isJoinAnxin = false;

}

if (this.checkParams()) {

if (this.isCheckMember) {

this.checkMember();

} else {

let forms = this.props.form.getFieldsValue();

this.updateMember(this.insurantId, forms);

}

}

}}>

保存

style={ {

alignSelf: 'center',

marginTop: 15,

marginLeft: 20,

marginRight: 20,

marginBottom: 20,

color: '#666',

fontSize: 13,

}}>

以上信息仅用于新一站保险业务办理，我们会严格保密。

{/*操作是本人提示弹窗*/}

transparent={true}

visible={this.state.modalMeVisiable}

onRequestClose={() => {

this.setState({modalMeVisiable: false});

}}>

message={'身份号已被本人使用'}

isHideCancal