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