如何使用 ReactNative 中的 Alerts 对话框?

react nativejavascriptmobile development更新于 2025/7/25 19:24:17

Alert 组件有助于显示一个对话框，即向用户弹出一个带有标题、消息、按钮的窗口，以便根据显示的消息了解用户的确认。

Alert 的基本组件如下 −

Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)

要使用 Alert 组件，您需要按如下方式导入它 −

import { Alert } from 'react-native';

要获取弹出窗口，您只需调用 Alert.alert() 函数。 alert() 有四个参数，分别是标题、消息、按钮和选项。标题是必需参数，其余参数是可选的。

以下是有关如何使用 Alert.alert() 的简单示例 −

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: false }
);

此处的标题是"您好"，消息是"是否要继续"，我想在对话框中显示的按钮是稍后、取消和确定。每个按钮都添加了 onPress 事件，显示控制台消息。最后一个是选项参数，可用于控制弹出窗口的行为。在 Android 上，默认情况下，如果在弹出窗口边界外单击，弹出窗口将关闭。要禁用此功能，您可以使用 {cancelable: false} 作为选项参数。当您在弹出窗口区域外单击时，由于可取消设置为 false，它不会关闭。

在 iOS 中，您可以指定任意数量的按钮，但在 Android 中，您可以使用三个按钮。Android 中的三个按钮具有中性、负面和正面按钮的概念，例如 −

如果指定一个按钮，它将像"positive"一样例如"OK"。
如果有两个按钮，则第一个按钮为"negative"，第二个按钮为"positive"。例如"Cancel"和"OK"。
如果有三个按钮，则三个按钮为"negative"、"positive"。例如"Later"、"Cancel"和"OK"。

以下是展示 Alert 组件工作原理的一个工作示例 −

Example 1: Display of Alert box

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: false }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

输出

示例 2:在 Android 中使用 {cancelable: true}

在下面的示例中，{cancelable: true} 与标题、消息和按钮一起使用。因此警告框将如下所示 −

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: true }
);

完整工作示例如下 −

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: true }
   );
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

当您点击弹出区域之外的区域时，它将关闭。