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