React Native API之 ActionSheetIOS

ok！先来演示是下效果：

React Native API之 ActionSheetIOS-LMLPHP

官网教程：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/>

api

React Native API之 ActionSheetIOS