React Native-15.React Native 常用API及实践 AlertIOS AlertSh
发布时间:2020-12-15 04:39:28 所属栏目:百科 来源:网络整理
导读:动起来,我们来看个效果 AlertIOS简介 完全理解成iOS中的UIAlert, 有两个方法: alert(title,message,buttons) : 普通对话框,其中buttons是对象数组。 prompt(title,value,buttons) : 提供输入的对话框,其中buttons是对象数组。 AlertSheetIOS简介 完全
动起来,我们来看个效果AlertIOS简介完全理解成iOS中的UIAlert,
AlertSheetIOS简介完全理解成UIActionSheet.但是它还可以换出系统自带的分享面板。
我们来封装一个组件 alert.jsvar 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;
'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);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |