react-native 实现全局弹窗的一种方法

应用场景：

用户事件 -> 网络请求 -> 根据结果弹出不同的内容弹窗

由于有多个地方使用同样的逻辑，按照传统的 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