> [ActionSheetIOS](http://facebook.github.io/react-native/docs/actionsheetios.html#content)
## 方法
* static showActionSheetWithOptions(options: Object, callback: Function) :显示上拉菜单
* static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function):显示分享菜单
## 实例
~~~
'use strict';
var React = require('react-native');
var {
ActionSheetIOS,
StyleSheet,
Text,
View,
} = React;
var BUTTONS = [
'Button Index: 0',
'Button Index: 1',
'Button Index: 2',
'Destruct',
'Cancel',
];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;
var ActionSheetExample = React.createClass({
getInitialState() {
return {
clicked: 'none',
};
},
render() {
return (
<View>
<Text onPress={this.showActionSheet} style={style.button}>
Click to show the ActionSheet
</Text>
<Text>
Clicked button at index: "{this.state.clicked}"
</Text>
</View>
);
},
showActionSheet() {
ActionSheetIOS.showActionSheetWithOptions({
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
},
(buttonIndex) => {
this.setState({ clicked: BUTTONS[buttonIndex] });
});
}
});
var ShareActionSheetExample = React.createClass({
getInitialState() {
return {
text: ''
};
},
render() {
return (
<View>
<Text onPress={this.showShareActionSheet} style={style.button}>
Click to show the Share ActionSheet
</Text>
<Text>
{this.state.text}
</Text>
</View>
);
},
showShareActionSheet() {
ActionSheetIOS.showShareActionSheetWithOptions({
url: 'https://code.facebook.com',
},
(error) => {
console.error(error);
},
(success, method) => {
var text;
if (success) {
text = `Shared via ${method}`;
} else {
text = 'You didn\'t share';
}
this.setState({text})
});
}
});
var style = StyleSheet.create({
button: {
marginBottom: 10,
fontWeight: '500',
}
});
exports.title = 'ActionSheetIOS';
exports.description = 'Interface to show iOS\' action sheets';
exports.examples = [
{
title: 'Show Action Sheet',
render(): ReactElement { return <ActionSheetExample />; }
},
{
title: 'Show Share Action Sheet',
render(): ReactElement { return <ShareActionSheetExample />; }
}
];
~~~
## 效果
## 上拉菜单
![](https://box.kancloud.cn/2016-01-07_568e13f2c0a64.jpg)
## 分享菜单
![](https://box.kancloud.cn/2016-01-07_568e13f2e1399.jpg)
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件