ActionSheet

方法

<
div class="props"
>
<
div class="prop"
>
<
h4 class="propTitle"
>
<
a class="anchor" name="showactionsheetwithoptions"
>
<
/a
>
<
span class="propType"
>
static 
<
/span
>
showActionSheetWithOptions
<
span class="propType"
>
(options: Object, callback: Function)
<
/span
>
<
a class="hash-link" href="#showactionsheetwithoptions"
>
#
<
/a
>
<
/h4
>
<
div
>
<
p
>
在设备上显示一个ActionSheet弹出框，其中options参数为一个对象，其属性必须包含以下一项或多项：
<
/p
>
<
ul
>
<
li
>
<
code
>
options
<
/code
>
（字符串数组） - 一组按钮的标题（必选）
<
/li
>
<
li
>
<
code
>
cancelButtonIndex
<
/code
>
（整型） - 选项中取消按钮所在的位置（索引）
<
/li
>
<
li
>
<
code
>
destructiveButtonIndex
<
/code
>
（整型） - 选项中删除按钮所在的位置（索引）
<
/li
>
<
li
>
<
code
>
title
<
/code
>
（字符串） - 弹出框顶部的标题
<
/li
>
<
li
>
<
code
>
message
<
/code
>
（字符串） - 弹出框顶部标题下方的信息
<
/li
>
<
/ul
>
<
/div
>
<
/div
>

例子

'use strict';
import React,{Component} from 'react';
import {StyleSheet,Text,UIManager,View,AppRegistry} from 'react-native';
import ActionSheet from '../ActionSheet';


var BUTTONS = [
  'Option 0',
  'Option 1',
  'Option 2',
  'Delete',
  'Cancel',
];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

class AwesomeProject extends Component {
  constructor(props){
      super(props);
      this.state = {
      clicked: 'none'
      }
  }
  render() {
    return (

<
View style={styles.container}
>
<
Text onPress={this.showActionSheet} style={styles.button}
>

          Click to show the ActionSheet

<
/Text
>
<
Text
>

          Clicked button: {this.state.clicked}

<
/Text
>
<
/View
>

    );
  }

  showActionSheet() {
    var that = this;
    console.log(that);
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
      destructiveButtonIndex: DESTRUCTIVE_INDEX
    },
    (buttonIndex) =
>
 {
      console.log(BUTTONS[buttonIndex] );
      // this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    marginBottom: 10,
    fontWeight: '500',
  }
});
AppRegistry.registerComponent('AwesomeProject', () =
>
 AwesomeProject);

截图