(27)-上拉菜單API · react-native試玩

> [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)