ReactNative: 使用对话框组件AlertIOS组件

时间:2022-06-28 06:24:36

一、简介

在使用一款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("---钉钉---")}}])

ReactNative: 使用对话框组件AlertIOS组件 ReactNative: 使用对话框组件AlertIOS组件 ReactNative: 使用对话框组件AlertIOS组件 ReactNative: 使用对话框组件AlertIOS组件

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

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

ReactNative: 使用对话框组件AlertIOS组件