react-native试玩(27)-上拉菜单API

前端之家收集整理的这篇文章主要介绍了react-native试玩(27)-上拉菜单API前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ActionSheetIOS

方法

  • static showActionSheetWithOptions(options: Object,callback: Function) :显示上拉菜单

  • static showShareActionSheetWithOptions(options: Object,failureCallback: Function,successCallback: Function):显示分享菜单

实例

  1. 'use strict';
  2.  
  3. var React = require('react-native');
  4. var {
  5. ActionSheetIOS,StyleSheet,Text,View,} = React;
  6.  
  7. var BUTTONS = [
  8. 'Button Index: 0','Button Index: 1','Button Index: 2','Destruct','Cancel',];
  9. var DESTRUCTIVE_INDEX = 3;
  10. var CANCEL_INDEX = 4;
  11.  
  12. var ActionSheetExample = React.createClass({
  13. getInitialState() {
  14. return {
  15. clicked: 'none',};
  16. },render() {
  17. return (
  18. <View>
  19. <Text onPress={this.showActionSheet} style={style.button}>
  20. Click to show the ActionSheet
  21. </Text>
  22. <Text>
  23. Clicked button at index: "{this.state.clicked}"
  24. </Text>
  25. </View>
  26. );
  27. },showActionSheet() {
  28. ActionSheetIOS.showActionSheetWithOptions({
  29. options: BUTTONS,cancelButtonIndex: CANCEL_INDEX,destructiveButtonIndex: DESTRUCTIVE_INDEX,},(buttonIndex) => {
  30. this.setState({ clicked: BUTTONS[buttonIndex] });
  31. });
  32. }
  33. });
  34.  
  35. var ShareActionSheetExample = React.createClass({
  36. getInitialState() {
  37. return {
  38. text: ''
  39. };
  40. },render() {
  41. return (
  42. <View>
  43. <Text onPress={this.showShareActionSheet} style={style.button}>
  44. Click to show the Share ActionSheet
  45. </Text>
  46. <Text>
  47. {this.state.text}
  48. </Text>
  49. </View>
  50. );
  51. },showShareActionSheet() {
  52. ActionSheetIOS.showShareActionSheetWithOptions({
  53. url: 'https://code.facebook.com',(error) => {
  54. console.error(error);
  55. },(success,method) => {
  56. var text;
  57. if (success) {
  58. text = `Shared via ${method}`;
  59. } else {
  60. text = 'You didn\'t share';
  61. }
  62. this.setState({text})
  63. });
  64. }
  65. });
  66.  
  67. var style = StyleSheet.create({
  68. button: {
  69. marginBottom: 10,fontWeight: '500',}
  70. });
  71.  
  72. exports.title = 'ActionSheetIOS';
  73. exports.description = 'Interface to show iOS\' action sheets';
  74. exports.examples = [
  75. {
  76. title: 'Show Action Sheet',render(): ReactElement { return <ActionSheetExample />; }
  77. },{
  78. title: 'Show Share Action Sheet',render(): ReactElement { return <ShareActionSheetExample />; }
  79. }
  80. ];

效果

上拉菜单

分享菜单

猜你在找的React相关文章