应用场景:
用户事件 -> 网络请求 -> 根据结果弹出不同的内容弹窗
由于有多个地方使用同样的逻辑,按照传统的 Model 写法,在 render 里实现,这样需要写多次同样的内容。考虑像原生开发一样,实现统一的弹窗处理逻辑。
要用js达到这种效果,基本思路是,获取应用当前视图,将弹窗层渲染其上。
正好需求的逻辑跟网络请求后 toast 弹窗相似,只是需要一直显示。
所以 参照 ant-design-mobile
Popup 的方式,实现了一个全局弹框 github。
效果
使用
$ yarn add rn-global-modal
import Pop from 'rn-global-modal'
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this._showPop.bind(this)}>
Show Pop
</Text>
</View>
);
}
_showPop(){
Pop.show(
<View style={{height: 300, width: '80%', backgroundColor:'red'}}/>
,{animationType: 'slide-up', maskClosable: true, onMaskClose: ()=>{}})
}
// animationType fade slide-down slide-up