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 

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 用到的組件 1、通過CocoaPods安裝 2、第三方類庫安裝 3、第三方服務 友盟社會化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,709評論 1 180
  • 關于文章的推送時間段的講究(1) 我關注的所有公眾號中,覺得最妙的就是羅輯思維了。 首先從它的推送時間段來看...
    海底世界飛閱讀 1,011評論 0 0
  • 遇到事情肌肉總是酸疼 邁不開腿 走不動道 都交給明天 也許明天就不會拖延 都是騙人的 跟童話里的一樣 都是騙鬼的 ...
    小臉貓閱讀 273評論 0 1
  • 坦白說來直到現在,他對于自己制作蛋糕這一興趣的來由都沒有絲毫頭緒,實在無法回憶起一個稱得上節點的存在(即時間或事件...
    凍墩爾咚閱讀 632評論 2 2
  • 01 最近,【合適】這個詞總是能浮現在我的腦海里。 合適的關系,合適的崗位職責,合適的影響力等。 有句話講,你現在...
    Chloeeeee_e閱讀 258評論 0 0