动起来,我们来看个效果
AlertIOS简介
完全理解成iOS中的UIAlert,
有两个方法:
- alert(title,message,buttons) : 普通对话框,其中buttons是对象数组。
- prompt(title,value,buttons) : 提供输入的对话框,其中buttons是对象数组。
AlertSheetIOS简介
完全理解成UIActionSheet.但是它还可以换出系统自带的分享面板。
有两个方法:
- showActionSheetWithOptions(options,callback) : 用于弹出分类菜单。
- showShareActionSheetWithOptions(options,failureCallback,successCallback) : 分享弹出框。
我们来封装一个组件 alert.js
var React = require('react-native');
var {
AppRegistry,StyleSheet,View,AlertIOS,Text,TouchableOpacity,ActionSheetIOS
} = React;
var Alert = React.createClass({
render: function(){
return(
<View style= {[styles.flex,{marginTop: 74}]}>
<TouchableOpacity style = {[styles.item]} onPress = {this.tip} >
<Text style = {styles.text_st}>
普通的提示框
</Text>
</TouchableOpacity>
<TouchableOpacity style = {[styles.item]} onPress = {this.input} >
<Text style = {styles.text_st}>
输入提示框
</Text>
</TouchableOpacity>
<TouchableOpacity style = {[styles.item]} onPress = {this.sheetShow} >
<Text style = {styles.text_st}>
提示列表菜单
</Text>
</TouchableOpacity>
<TouchableOpacity style = {[styles.item]} onPress = {this.shareShow} >
<Text style = {styles.text_st}>
分享弹出框
</Text>
</TouchableOpacity>
</View>
);
},tip: function(){
AlertIOS.alert('提示','普通提示框',[
{
text: '取消',onPress:function(){
alert('取消');
}
},{
text: '确定',onPress:function(){
alert('确定');
}
}
]);
},input:function(){
AlertIOS.prompt('提示','输入提示框',onPress: function(){
alert('取消')
}
},onPress:function(e) {
alert(e);
}
}
]);
},sheetShow: function(){
ActionSheetIOS.showActionSheetWithOptions({
options: [
'拨打电话','发送邮件','发送短信','取消'
],cancelButtonIndex : 3,destructiveButtonIndex: 0
},function(index){
if (index == 0) {
alert('拨打电话')
} else if (index == 1){
alert('发送邮件')
} else if (index == 2) {
alert('发送短信')
} else if ('3') {
alert('取消')
}
});
},shareShow: function(){
ActionSheetIOS.showShareActionSheetWithOptions({
url: 'http://blog.csdn.net/wxs0124'
},function(err){
alert(err)
},function(e){
alert(e)
});
}
});
var styles = StyleSheet.create({
flex: {
flex: 1
},item : {
marginLeft: 5,marginRight:5,marginTop: 10,borderWidth: 1,borderColor: '#ddd',borderRadius: 3,justifyContent: 'center',height: 30,},text_st : {
fontSize: 15,color: '#222',alignSelf:'center',}
})
module.exports = Alert;
在index.ios.js 中这样:
'use strict';
var React = require('react-native');
var Alert = require('./iOSFile/alert.js');
var {
AppRegistry,NavigatorIOS,} = React;
var styles = StyleSheet.create({
container : {
flex: 1
},});
var wxsPrj = React.createClass({
render: function() {
return (
<NavigatorIOS style = {styles.container} initialRoute = { { component:Alert,title:'样式列表',} }/> ); } }); AppRegistry.registerComponent('wxsPrj',() => wxsPrj);