React Native 中文文档 - Alert 模块的 alert 方法
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')}, ] )
这里有两点要注意:
- 按钮的声明顺序显示时会从左往右显示,也就是按照上面的声明,
OK
会显示在右边 - 一旦声明了自己的按钮,那么默认的
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}, );