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 一个登陆弹出框,有一个用户名输入框和一个密码输入框

范例

  1. 只有默认 OK 按钮的警示框,也就是只要设置 标题描述 即可

    Alert.alert('这是标题','这是描述文字')
    
  2. 同时添加, OKCANCEL 按钮

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

    这里有两点要注意:

    1. 按钮的声明顺序显示时会从左往右显示,也就是按照上面的声明,OK 会显示在右边
    2. 一旦声明了自己的按钮,那么默认的 OK 按钮就不会自动添加了,需要我们主动声明
  3. 额外添加一个自定义的按钮

    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 的每一个按钮都是一个对象,至少应该包含 textonPress 两个属性,和可选的 style 属性

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

范例

  1. 只有默认 OK 按钮的警示框

    Alert.alert('这是标题','这是描述文字')
    
  2. 显示 OKCANCEL 按钮

    Alert.alert(
      '这是标题',
      '这是描述',
      [
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ]
    )
    
  3. 额外添加一个自定义的按钮

    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')},
      ]
    )
    
  4. 点击背景不取消警示框

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

返回上一级

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.