react native学习笔记23——常用API（5）弹出框Alert、AlertIOS

前言

React Native中提供弹出对话框的api有两个——Alert与AlertIOS，前者在Android平台和IOS平台通用，后者只能适用于IOS平台。既然Alert双平台通用，为何还需要AlertIOS？主要是由于AlertIOS功能更丰富一些。Alert可弹出一个提示对话框，包含对应的标题和信息，该弹出框可以提供一系列的可选按钮（Android中最多三个），点击任何一个按钮都会调用onPress方法并且关闭弹框，默认情况下，只会显示一个“确定”按钮。而AlertIOS除此之外，还能显示一个带输入框的提示框，可以接受用户输入信息。

如果我们希望在Android中也实现带输入框的提示框该怎么办呢，别担心我们还可以通过调用原生平台api来实现定制化提示框的需求，别说带输入功能的提示框，更复杂的对话框都可以实现出来。另外其实React Native有提供一个更方便实现自定义对话框的组件Modal，后面我会介绍如何实现双平台通用的自定义对话框。

Alert

• iOS平台
  可以指定多个数量的button,每个按钮都可以设置特殊的风格，不过风格为’default’,’cancel’,’destructive’三种状态之一。
• Android平台
  最多只能指定三个按钮。Android平台的弹出框的按钮有’中间态’,’取消’,’确认’三种状态。
  
  • 如果只指定了一个按钮，则其属性为’positive’ (例如：确定)
  • 如果你指定了两个按钮，则其属性为’negative’,’positive’ (例如:确定，取消)
  • 如果你指定了三个按钮，则其属性为’neutral’,’negative’,’positive’(例如:’稍后再说’,’确定’,’取消’)

Alert方法

static alert(title:string,message?:string,buttons?:Buttons,type?:AlertType)显示提示弹框的静态方法，有四个参数，分别为标题，信息，按钮，以及按钮的风格类型

使用实例

 import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Alert,
    Button,
    ToastAndroid,
    TouchableHighlight,
} from 'react-native';

export default class AlertDemo extends Component {
    render() {
        return (
            <View>
                <Button  title='默认Alert'
                              onPress={()=>Alert.alert('提醒','确定退出吗?')}
                />
                <Button  title='两个按钮的Alert'
                              onPress={()=>Alert.alert('提醒','确定退出吗?',[
                                  {text:'取消',onPress:()=>ToastAndroid.show('取消',ToastAndroid.SHORT)},
                                  {text:'确定',onPress:()=>ToastAndroid.show('确定',ToastAndroid.SHORT)}
                              ])}
                />
                <Button  title='三个按钮的Alert'
                              onPress={()=>Alert.alert('提醒','确定退出吗?',[
                                  {text:'One',onPress:()=>ToastAndroid.show('One',ToastAndroid.SHORT)},
                                  {text:'Two',onPress:()=>ToastAndroid.show('Two',ToastAndroid.SHORT)},
                                  {text:'Three',onPress:()=>ToastAndroid.show('Three',ToastAndroid.SHORT)}
                              ])}
                />
            </View>
        );
    }
}

示例中Alert按钮的点击事件用ToastAndroid展示出来，如果在ios环境运行，可以改为log的形式或用第三方通用的Toast来处理。

AlertIOS方法

AlertIOS仅支持iOS平台，弹出一个包含标题和信息的提示对话框，默认情况下，只会显示一个“确定”按钮，也可指定多个按钮。除此之外，还能显示一个带输入框的提示框，可以接受用户输入信息。如果仅仅显示一个静态的提示框时，推荐使用跨平台的Alert。

AlertIOS方法

alert(title:string,message?:string,callbackOrButtons?:?(()=>void)|ButtonsArray,type?:AlertType)
显示提示弹框的静态方法，参数解释：

• title: string 对话框的标题
• message:string 可选参数，用于在输入框组件上面显示提示信息
• callbackOrButtons 可选的参数，可以为回调方法或者一组按钮。如果传入的是一个方法，那么当用户点击’OK’的时候会回调该方法。如果传入是一组按钮的配置，那么没有一个按钮可应该包括一个text属性,同样也可以加入一些可选的参数例如onPress和style属性，styles的值应该为’default’,’cancel’或者’destructive’中的一个。
• type –deprecated,该类型已经废弃了，无需使用。

使用方法如：

AlertIOS.alert(
 'Sync Complete',
 'All your data are belong to us.'
);

prompt(title:string,message?:string,callbackOrButtons?:?((text:string)=>void)|ButtonsArray,type?:AlertType,defaultValue?:string)
提示用户输入一些文字信息，参数解释如下：
前面三个参数title,message,callbackOrButtons同上，第四个参数type:string进行设置输入框的类型配置可选值有'plain-text','secure-text','password',第五个参数为defaultValue:string为需要输入信息的默认值(textfield)。

创建自定义按钮的弹框：

AlertIOS.prompt(
  'Enter password',
  'Enter your password to claim your $1.5B in lottery winnings',
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)},
  ],
  'secure-text'
);

创建一个自定义的回调方法和默认的按钮代码:

AlertIOS.prompt(
  'Update username',
  null,
  text => console.log("Your username is "+text),
  null,
  'default'
)

AlertIOS使用实例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AlertIOS,
} from 'react-native';

export default class AlertIOSDemo extends Component {
    render() {
        return (
            <View style={{backgroundColor:'#b9b9b9',flex:1}}>

                <Text style={{color:'white',height:20,marginTop:5,marginLeft:5}}>AlertIOS.Alert实例:</Text>
                <Text style={styles.item} onPress={()=>AlertIOS.alert('标题','Message')}>一个带有标题和信息默认弹出框</Text>
                <Text style={styles.item} onPress={()=>AlertIOS.alert('标题','Message',[
                    {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
                    {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
                ])}>两个按钮的弹出框</Text>
                <Text style={{color:'white',height:20,marginTop:10,marginLeft:5}}>AlertIOS.Prompt实例:</Text>
                <Text style={styles.item} onPress={()=>AlertIOS.prompt('提醒','请输入相关信息')}>默认提醒框</Text>
                <Text style={styles.item} onPress={()=>AlertIOS.prompt('提醒','请输入密码',[
                    {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
                    {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
                ],'secure-text')}>两个按钮带密码输入框的弹出框-</Text>
                <Text style={styles.item} onPress={()=>AlertIOS.prompt('提醒','请输入相关信息',[
                    {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
                    {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
                ],'plain-text','默认信息')}>两个按钮的弹出框-输入框存在默认信息</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    item:{
        margin:10,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});