React Native Alert

17 Mar 2025 | 阅读 2 分钟

React Native Alert 是一个 API，用于显示带有指定标题和消息的警告对话框。它使用 alert() 方法来提示一个警告对话框。这个警告对话框提供了三个不同的按钮列表（中性、否定和肯定按钮的组合）来执行操作。按下这些按钮中的任何一个都会调用 onPress 回调方法并关闭警告。默认情况下，Alert 只有一个肯定（OK）按钮。

提示输入一些信息的 Alert 是使用 AlertIOS 创建的。它仅在 iOS 中受支持。

iOS 中的 React Native Alert

在 iOS 中，我们可以指定按钮的数量。每个按钮都可以单独指定一个样式，样式可以是 default、cancel 或 destructive 之一。

Android 中的 React Native Alert

在 Android 中，Alert 按钮主要可以指定三个按钮。这些按钮是中性按钮、否定按钮和肯定按钮。

Alert 按钮以三种不同的组合指定。这些是：

如果我们只指定一个按钮，它将是“肯定”按钮（例如“OK”）。
如果我们指定两个按钮，它将是“否定”和“肯定”按钮（例如“取消”、“OK”）。
指定三个按钮意味着“中性”、“否定”、“肯定”按钮（例如“稍后”、“取消”、“OK”）。

在 Android 中，默认情况下，通过单击警告对话框外部来关闭警告。可以使用带有 onDismiss 回调属性的可选参数 { onDismiss: () => {} } 来处理 dismiss 事件。但是，我们可以使用属性 {cancelable: false} 来禁用 dismiss 属性。

React Native Alert 示例

在此示例中，我们在两个按钮上创建两个警告。一个警告包含两个选项按钮，且不可取消。另一个警告包含三个选项按钮，且cancelable 为 false。

App.js

import React, { Component } from 'react';
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
    showAlert1() {
        Alert.alert(
            'Alert Title',
            'My Alert Msg',
            [
                {
                    text: 'Cancel',
                    onPress: () => console.log('Cancel Pressed'),
                    style: 'cancel',
                },
                {text: 'OK', onPress: () => console.log('OK Pressed')},
            ]
        );
    }
    showAlert2() {
        Alert.alert(
            'Alert Title',
            'My Alert Msg',
            [
                {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
                {
                    text: 'Cancel',
                    onPress: () => console.log('Cancel Pressed'),
                    style: 'cancel',
                },
                {text: 'OK', onPress: () => console.log('OK Pressed')},
            ],
            {cancelable: false}
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <Button
                        onPress={this.showAlert1}
                        title="Button 1"
                    />
                </View>
                <View style={styles.buttonContainer}>
                    <Button
                        onPress={this.showAlert2}
                        title="Button 2"
                        color="#009933"
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    },
    multiButtonContainer: {
        margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

输出