弹窗BaseModel
<blockquote>
<p>温馨提示：示例代码是tsx语法</p>
<h2>先看下效果</h2>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/acae20de579c1b7e1a29d722071166af?showdoc=.jpg" alt="" /></p>
</blockquote>
<p>全屏展示，背景是灰色半透明。
源码：</p>
<pre><code class="language-javascript">interface BaseModelState {
visible: boolean;
}
@autobind
export class BaseModel extends React.PureComponent<BaseModelProps, BaseModelState> {
constructor(props: BaseModelProps) {
super(props);
this.state = {
visible: false
};
}
async setVisible(visible: boolean) {
await this.setState({
visible
});
}
render() {
return (<Modal
visible={this.state.visible}
transparent={true}
onRequestClose={() => this.setVisible(false)}>
<View style={styles.transparentBg}>
{this.props.children}
</View>
</Modal>);
}
}</code></pre>
<p>用法：
可以先声明 -> private baseModel?: BaseModel;</p>
<pre><code class="language-javascript"><BaseModel ref={(model: BaseModel) => this.baseModel = model}>
<View style={styles.whiteBg}>
<Text style={styles.comfirmTitle}>提示</Text>
<Text style={styles.confirmDesript}>确定要申请调档吗？注意，申请调档成功后，当年不可再进行申请。</Text>
<View style={{ flexDirection: 'row' }}>
<TouchImageWithText
textStyle={styles.confirmBtnText}
text={'确定'}
activeOpacity={1}
touchStyle={{ flex: 1, height: 50 }}
onPress={() => {
this.setModelVisible(false);
this.props.confirm && this.props.confirm();
}} />
<View style={styles.confirmMidLine} />
<TouchImageWithText
textStyle={styles.confirmBtnText}
text={'取消'}
activeOpacity={1}
touchStyle={{ flex: 1, height: 50 }}
onPress={() => this.setModelVisible(false)} />
</View>
</View>
</BaseModel></code></pre>