應用場景:
用戶事件 -> 網絡請求 -> 根據結果彈出不同的內容彈窗
由于有多個地方使用同樣的邏輯,按照傳統的 Model 寫法,在 render 里實現,這樣需要寫多次同樣的內容。考慮像原生開發一樣,實現統一的彈窗處理邏輯。
要用js達到這種效果,基本思路是,獲取應用當前視圖,將彈窗層渲染其上。
正好需求的邏輯跟網絡請求后 toast 彈窗相似,只是需要一直顯示。
所以 參照 ant-design-mobile
Popup 的方式,實現了一個全局彈框 github。
效果
preview.gif
使用
$ 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