應用場景：

用戶事件 -> 網絡請求 -> 根據結果彈出不同的內容彈窗

由于有多個地方使用同樣的邏輯，按照傳統的 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