分享或者弹出更多选项操作, ActionSheetIOS
ActionSheetIOS提供了两个静态方法, 对应两种功能
1 操作表
* showActionSheetWithOptions(options, callback) 弹出一个分类菜单
* 方法中第一个参数 options 是一个对象,该对象里各个属性介绍如下:
options:表示可选项的名称,是一个字符串数组。
cancelButtonIndex:表示“取消”按钮的位置,即“取消”按钮在 options 数组中的索引。
destructiveButtonIndex:表示不能使用的按钮位置,即不能使用的按钮在 options 数组中的索引。
2 分享框
* showShareActionSheetWithOptions(options, failureCallback, successCallback) 作用是分享一个 url
options:表示分享的 url
failureCallback:失败的回调函数
successCallback:成功的回调函数
3 代码效果
/**
* Created by licc on 2017/7/9.
*/
import React, {Component } from 'react';
import {
StyleSheet,
View,
Text,
ActionSheetIOS
} from 'react-native';
import NavigationBar from './NavigationBar'
export default class ActionSheetExample extends Component {
render(){
return(
<View style={styles.container}>
<NavigationBar
title={'ActionSheetIOS'}
statusBar={{backgroundColor:'blue'}}
/>
<Text style={styles.item} onPress={this.doSheet.bind(this)}>打开操作表</Text>
<Text style={styles.item} onPress={this.doShare.bind(this)}>打开分享框</Text>
</View>
);
}
doSheet(){
ActionSheetIOS.showActionSheetWithOptions({
options:[
'拨打电话',
'发送邮件',
'发送短信',
'取消'
],
cancelButtonIndex: 3,
destructiveButtonIndex: 0
},
(index)=>{
alert('您点击了:' + index);
}
);
}
doShare(){
ActionSheetIOS.showShareActionSheetWithOptions({
url:''
},
(error)=>{
alert(error)
},
(e)=>{
alert(e)
}
);
}
}
const styles = StyleSheet.create({
container:{
flex:1
},
item:{
marginTop:10,
marginLeft:5,
marginRight:5,
height:30,
borderWidth:1,
padding:6,
borderColor:'#ddd',
textAlign:'center'
},
});