React Native 彈窗（二）Modal.alert (Ant Design Mobile RN)

之前談到過項目中的彈窗使用系統的Alert的局限性，

那么在Ant Design Mobile RN這個三方庫中，

使用Modal.alert自定義了alert（本質就是使用Modal自定義alert，和系統的Alert沒有任何關系，僅僅是看起來相似而已）,靈活了很多，可以進行UI的定制

Modal.alert

效果如圖：

 

API  

Modal.alert(title, message, actions?, platform?)

我們可以發現title, message不止支持String，亦支持組件React.Element，即可以自定義標題和消息，

按鈕可以通過style自定義

 

 

actions Action

export interface Action<T = TextStyle> {
    text: string;
    onPress?: () => void | Promise<any>;
    style?: T | string;
}

 

項目實際使用

如圖效果：

 

代碼如下：

Modal.alert('我是標題', '我是內容我是內容', [{text: '知道了',onPress: () => {},style: 'cancel'}])

綜上所述：

Ant Design Mobile RN的Modal.alert已經封裝的比較靈活了，標題、內容、按鈕都可以自定義樣式，但也僅限於此

但是當我們要改變彈框位置或者大小或者出現方式的時候，就只能自定義了

官方文檔：

https://rn.mobile.ant.design/components/modal-cn/