← React Native 中文文档 - 简介 React Native 中文文档 - Alert 模块的 alert 方法 →

React Native 中文文档 - 警告框（ Alert ）

我们先来看看 React Native 中的警告框长啥样

iOS	Android

从上面的图中可以看出，React Native 中的警告框是一个模态弹出框，会覆盖在其它 UI 的上面，并且由以下四部分组成

全屏的 半透明的黑色 背景
一个标题
一段描述文字 ( 可选 )
一系列按钮 ( 可选 )

默认情况下，警告框（ Alert ）一定会有，且只有一个 OK 按钮，点击 OK 按钮就会关闭 警示框

我同时还可以定制按钮，提供一系列其它按钮，点击（触摸）了这些按钮就会触发这些按钮上的 onPress 属性提供的回调函数并且关闭 警示框

也就是说，不管是系统提供的默认 OK 按钮，还是我们定制的其它按钮，都会关闭 警示框。

这个警示框在 iOS 和 Android 中都是可以用的，只是显示样式不同而已。

注意

警示框（ Alert ）是一个静态的弹出框，这个静态的意思呢，就是不能做其它的定制，比如添加一个输入框等。

如果要实现 HTML 中的 promt 这种功能，则可以使用 Modal 自己定制一个

官方文档说如果要实现可输入信息的警示框，可以使用 AlertIOS。

但我认为，最好不要使用 AlertIOS ，因为这仅仅能在 iOS 平台使用，这就违背了我们 write once，run iOS and Android 的理念

导入模块

import {Alert } from 'react-native'

语法

因为按钮是可选的，所以 Alert 的语法有以下几种格式

只有标题，同时会显示一个 OK 按钮

Alert.alert('这是标题')
只有默认 OK 按钮的警示框，也就是只要设置标题和描述即可
```
Alert.alert('这是标题','这是描述文字')
```
同时添加， OK 和 CANCEL 按钮
```
Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)
```
这里有两点要注意：
1. 按钮的声明顺序显示时会从左往右显示，也就是按照上面的声明，OK 会显示在右边
2. 一旦声明了自己的按钮，那么默认的 OK 按钮就不会自动添加了，需要我们主动声明

额外添加一个自定义的按钮

Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)

按钮的声明语法

Alert 的每一个按钮都是一个对象，至少应该包含 text 和 onPress 两个属性，和可选的 style 属性

属性	是否必填	说明
text	是	按钮上要显示的文字
onPress	是	按钮点击要执行的回调函数
style	否	按钮类型

范例

只有默认 OK 按钮的警示框

Alert.alert('这是标题','这是描述文字')

显示 OK 和 CANCEL 按钮

Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)

额外添加一个自定义的按钮

Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)

定制按钮

iOS

iOS 平台上我们可以定制和添加任意数量的按钮，大家从上图中可以看到，当多余两个按钮时，所有的按钮会竖直排列

但我们建议不要设置太多，毕竟屏幕高度有限。

另一方面，所有添加的按钮，提供了三种类型可供选择，不过只能选择其一

'default'
'cancel'
'destructive'

例如下面的代码，Cancel 按钮的类型为 cancel 的自定义

Alert.alert(
  '这是标题',
  '这是描述',
  [
    {text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')},
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ]
)

那么，这三种按钮有啥区别呢？

答案就是颜色的区别，废话不多说，直接看代码吧

xx

如果你想要了解 iOS 平台上 Alert 的更多细节，可以参考 AlertIOS ，毕竟 Alert 的底层实现就是 AlertIOS

Android

在 Android 平台上，需要注意的是，最多只能存在三个按钮。我们可以从上图中看到，即使是三个按钮，Android 仍然是横排显示。

Android 平台上的所有按钮，同 iOS 一样，也可以有三种类型可通选择，它们分别是

neutral 平常态
negative 消极态
positive 积极态

这个分类，怎么说呢，其实和 iOS 平台的三种类型是一一对应的，对照表如下

iOS	Android
neutral	cancel
positive	default
negative	destructive

这个表有毒，哪里看都不正常，诶

Android 上的 Alert 按钮类型，是不可以定制的，而是系统根据按钮的数量自动设置的，设置规则如下

如果只有一个按钮，那么这个按钮就是的类型就是 'positive' ，比如 'OK'
如果有两个按钮，那么这两个按钮的类型就是 'negative' 和 'positive'，例如 'Cancel' 和 'OK'
如果有三个按钮，那么这三个按钮的类型就是 'neutral'，'negative', 'positive' ,例如 'Later', 'Cancel', 'OK'

另外需要注意的是，这个按钮的类型是根据它们的声明顺序来设定的，按钮的顺序是从 左往右

Android 平台上的 Alert 还有另一个特征，如果点击或者触摸了按钮之外的 半透明黑色背景，那么会默认关闭 Alert。

那么要如何取消这个特征呢，有两种方案：

第一种方案是在第四个参数中设置 onDismiss 这个属性为一个空函数，比如设置为 { onDismiss: () => {} }
第二种方案是在第四个参数中设置 cancelable 这个属性为 false，比如设置为 { cancelable: false }

综上所述，一个常见的 Alert 警示框的代码如下，这段代码能够在 iOS 和 Android 平台上都正常运行

Alert.alert(
  '这是警示框标题',
  '这是警示框描述',
  [
    {text: '自定义按钮', onPress: () => console.log('Ask me later pressed')},
    {
      text: '取消',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {text: '确定', onPress: () => console.log('OK Pressed')},
  ],
  {cancelable: false},
);

方法

Alert 模块只提供了一个方法，就是 alert() 方法

方法	说明
`alert`	显示一个警示框