react native (RN)中Alert使用總結

Alert即提示框，一般提示框又三種狀態，確認，取消，稍後。。。RN的Alert也提供了三種

直接上代碼

delCart = (customerId, customerName) => {
        Alert.alert(
            '', //提示標題
            `確定刪除該${customerName}？`, //提示內容
            [
                { text: '取消', onPress: () => console.log('點擊取消') },
                {
                  text: '確定', onPress:  () =>  console.log('點擊確定')
                }
            ] //按鈕集合
        )
    }

//調用

<TouchableOpacity onPress={() => this.delCart(id, name)}>
    <Text>刪除</Text>
</TouchableOpacity>

這是一個刪除商品的例子

下面是三種情況的使用

1.只有一個按鈕

oneBtn() {
        Alert.alert(
            'Alert提示 標題',
            '只有一個按鈕時的提示內容',
            [
                /**
                 *  注意參數名字一定不能錯
                 */
                {text: '確定', onPress: ()=> console.log('點擊確定')}
            ]);
    }

2.兩個按鈕

twoBtn() {
        Alert.alert(
            ' 標題（所有情況下，不需要標題是寫‘’空字符串即可）',
            '兩個按鈕的內容',
            [
                {text: '確定', onPress: ()=> console.log('點擊確定')},
                {text: '取消', onPress: ()=> console.log('點擊取消')}
            ]
        );
    }

3.三個按鈕

 threeBtn() {
        Alert.alert(
            'Alert 標題',
            '三個按鈕的內容',
            [
                {text: '取消', onPress: ()=> console.log('點擊取消')},
                {text: '確定', onPress: ()=> console.log('點擊確定')},
                {text: '稍後', onPress: ()=> console.log('點擊稍後')},
            ]
        );
    }

其實一看很簡單的，初學記錄一下

參考

https://reactnative.cn/docs/0.51/alert.html#content