React Native 中文文档 - Alert 模块的 alert 方法 - React Native 中文文档

React Native 中的 Alert 组件的 alert() 方法用于显示一个警示框

导入模块

import {Alert } from 'react-native'

方法原型

static alert(title, message?, buttons?, options?, type?)

alert() 方法用于显示一个警示框

参数说明

参数	是否必填	说明
title	是	警示框标题
message	否	警示框描述
buttons	否	警示框按钮
options	否	其它可选的参数
type	否	警示框类型，只有 iOS 可用

type 参数的可选值如下

值	说明
default	默认的警示框，没有任何输入框
plain-text	有一个普通的输入框
secure-text	有一个密码输入框
login-password	一个登陆弹出框，有一个用户名输入框和一个密码输入框

范例

只有默认 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')},
  ]
)

点击背景不取消警示框

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},
);