一、简介

在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可。但是,对于需要交互性和美观性的对话框,alert就明显无法满足需求了,首先alert对话框比较丑陋,不符合我们的业务和审美需求,此时如果我们去定制的话,稍微有些浪费。React-Native在这一点上做的很好,给我们提供了一个原生的对话框,那就是AlertIOS,跟iOS中的UIAlertView(deprecated use)样式基本无差。

二、API

AlertIOS组件应用很广,使用也很简单,默认的AlertIOS组件会提供一个“确认”或者“OK”按钮,默认情况下,数组中的最后一个按钮高亮显示。如果数组的个数过多,按钮就会呈现垂直排列。AlertIOS组件一共有两个静态的方法如下所示:

//创建普通对话框,单纯的文案提示
static alert(
title: ?string,
message?: ?string,
callbackOrButtons?: ?(() => void) | ButtonsArray,
type?: AlertType,
) //创建输入对话框,用户可以选择输入内容
static prompt(
title: ?string,
message?: ?string,
callbackOrButtons?: ?((text: string) => void) | ButtonsArray,
type?: ?AlertType = 'plain-text',
defaultValue?: string,
keyboardType?: string
) //对话框类型
export type AlertType = $Enum<{
/**
* Default alert with no inputs
*/
'default': string,
/**
* Plain text input alert
*/
'plain-text': string,
/**
* Secure text input alert
*/
'secure-text': string,
/**
* Login and password alert
*/
'login-password': string,
}>; //按钮数组类型
export type ButtonsArray = Array<{
/**
* Button label
*/
text?: string,
/**
* Callback function when button pressed
*/
onPress?: ?Function,
/**
* Button style
*/
style?: AlertButtonStyle,
}>; //按钮样式类型
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;

三、格式

AlertIOS中的传入的按钮数组格式是固定的,如下所示:

//传入的按钮数组
[
{
text: '按钮文案1',
onPress: function(){
//点击按钮的触发事件1
}
} ,
{
text: '按钮文案2',
onPress: function(){
//点击按钮的触发事件2
}
} , ...
]

四、使用

1、普通对话框

//默认按钮
AlertIOS.alert("提示","数据加载成功!"); //一个按钮
AlertIOS.alert("提示","数据加载成功!",[{text:"知道了",onPress: ()=> {console.log("---onPress---")}}]); //两个按钮
AlertIOS.alert("提示","确定付款吗?",[{text:"取消",onPress: ()=> {console.log("---取消---")}},{text:"确认",onPress: ()=> {console.log("---确认---")}}]); //多个按钮
AlertIOS.alert("提示","请选择发送方式",[ {text:"邮箱",onPress: ()=> {console.log("---邮箱---")}},{text:"微信",onPress: ()=> {console.log("---微信---")}},{text:"钉钉",onPress: ()=> {console.log("---钉钉---")}}])

   

2、输入对话框【按钮排列方式相同,就不一一列举了】

//输入对话框
AlertIOS.prompt("提示","请在下面的输入框中输入付款金额",[{text:"取消",onPress: ()=> {console.log("---取消---")}},{text:"确认",onPress: ()=> {console.log("---确认---")}}]);

ReactNative: 使用对话框组件AlertIOS组件的更多相关文章

  1. ReactNative: 使用弹出框组件ActionSheetIOS组件

    一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...

  2. ReactNative Android之原生UI组件动态addView不显示问题解决

    ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com ...

  3. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  4. ReactNative: 使用滚动视图ScrollView组件

    一.简介 当页面内容的非常多时,即使换行后仍然无法充分显示,此时最好的解决办法就是让页面可以滚动显示.在React-Native中,提供了可供滚动的视图组件ScrollView组件.它的属性和方法以及 ...

  5. ReactNative: 使用Touchable触摸类组件

    一.简介 在应用程序中,最灵魂的功能就是交互.通过给应用程序的组件添加事件来实现交互,进而提高用户体验.然而,ReactNative并不能像Web开发那样可以给大多数的标签元素绑定click事件,例如 ...

  6. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  7. Vue中父子组件通讯——组件todolist

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...

  8. $Django Rest Framework-认证组件,权限组件 知识点回顾choices,on_delete

    一 小知识点回顾 #orm class UserInfo (models.Model): id = models.AutoField (primary_key=True) name = models. ...

  9. Vuejs——(12)组件——动态组件

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

随机推荐

  1. Chapter 07-Basic statistics(Part2 Frequency and contingency tables)

    这一部分使用在vcd包中的Arthritis数据集. > library(vcd) 载入需要的程辑包:MASS 载入需要的程辑包:grid 载入需要的程辑包:colorspace > he ...

  2. selenium无界面执行和反爬

    selenium无界面执行和反爬 无界面执行 from selenium import webdriver from selenium.webdriver.chrome.options import ...

  3. 大白话OSI七层协议

    目录 一.物理层 二.数据链路层 2.1 以太网协议 2.2 Mac地址 2.3 广播地址 三.网络层 3.1 IP协议详解 3.1.1 IP地址的两部分 3.2 子网掩码详解 3.3 IP数据包详解 ...

  4. 关于servlet报错和jsp中报关于servlet的错误

    servlet-api是对servlet的支持,如果你导入别人的项目后出现servlet中的导包处出现关于javax.servlet.的错误,那么就是缺少这个包了.还有对jsp页面中的报错的支持. 下 ...

  5. 基于Quartz.NET框架的任务计划管理工具

    最近接到一个小需求 ——可以定期同步20个Sql Server 7.0数据库里的数据(数据量会预计>10000),并保存为CSV格式文件 ——可以设置保存文件数据量 ——该应用需要用WinFor ...

  6. 华为云BigData Pro解读: 鲲鹏云容器助力大数据破茧成蝶

    华为云鲲鹏云容器 见证BigData Pro蝶变之旅大数据之路顺应人类科技的进步而诞生,一直顺风顺水,不到20年时间,已渗透到社会生产和人们生活的方方面面,.然而,伴随着信息量的指数级增长,大数据也开 ...

  7. 在Linux中配置jdk,Tomcat,MySQL

    解压缩: tar 命令 : 使用方式 tar [参数] source [target] source - 压缩文件 target - 解压缩后的目标位置, 默认解压到当前目录 常用写法 : 解压缩 : ...

  8. BZOJ 3108: [cqoi2013]图的逆变换

    3108: [cqoi2013]图的逆变换 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 627  Solved: 415[Submit][Statu ...

  9. Day 03 作业

    简述变量的组成 变量名,赋值符号,变量值 简述变量名的命名规范 变量名应该能反映变量值所描述的状态 变量名必须以字母数字下划线组合且不能以数字开头 变量名不能是关键字 简述注释的作用 让后面的代码失效 ...

  10. JS系列:js节点

    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...