React Native API之 ActionSheetIOS

ok！先来演示是下效果：

官网教程：http://reactnative.cn/docs/0.31/actionsheetios.html#content

上代码：引入API组件：

import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  ScrollView,
  Navigator,
  ActionSheetIOS,
  TouchableHighlight,
} from 'react-native';

定义json数组：---用来显示弹出层的item内容

var BUTTONS = [
  '拍照',
  '从相册选择',
  '取消',
  '删除',
  '删a',
  '删',
  '除',
];

var DESTRUCTIVE_INDEX = 1;  顺序索引
var CANCEL_INDEX = 2;

ok~自定义一个组件

{/*显示组件*/}
class CustomButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="red"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

自定义一个需要显示的组件（这个组件是包含这个API的具体实现）

class ActionSheetDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      clicked: 'none',
    };
    this._showActionSheet = this.showActionSheet.bind(this);
}
  //显示弹出的东东
  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
      destructiveButtonIndex: DESTRUCTIVE_INDEX,
      tintColor: 'blue',
      title:'发布工位',
    
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }    //回调函数

  render() {
    return (
      <View>

        <CustomButton text="弹出基本Action"
            onPress={this._showActionSheet}
        />
        <Text style={{margin:10}}>
           基本Action点击选择的项目为: {this.state.clicked}
        </Text>
</View>
    );
  }
}

　　好了 ！这样的话我们就可以使用啦 

<ActionSheetDemo/>