一、前言
在日常开发中,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