react-native-actionsheet

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import ActionSheet from 'react-native-actionsheet';

export default class D20170509 extends Component {
    constructor(props){
        super(props);
        this.state = {
           defaultValue:''
        }
    }
  render() {
    //   var options = ['取消','删除','随便添加的'];
      var options = ['取消','删除',{'随便添加的'}];
    return (
      

           {

                  // 显示ActionSheet
                  this.refs['as'].show();

              }}>{'显示ActionSheet'}
          {this.state.defaultValue}
          {
              /**
               * title 标题
               * options 里面的数组的内容，最好是字符串
               * cancelButtonIndex 取消按钮的索引，在options
               * destructiveButtonIndex 删除按钮的索引，在options ， 加红色的按钮
               * onPress 当点击选项的时候调用，同时传递给我们被点击的索引
               * tintColor 选项的颜色
               */
          }
          {'这是新标题'}}
              options={options}
              cancelButtonIndex={0}
              destructiveButtonIndex={1}
              onPress={(index) => {
                this.setState({
                    defaultValue:options[index]
                });
              }}
              />

      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('D20170509', () => D20170509);