react-native-actionsheet

来源：互联网发布：网络棋牌打鱼违法吗编辑：程序博客网时间：2024/05/20 13:19
/** * 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 = ['取消','删除',<Text style={{          fontSize:22,          color:'pink'      }}>{'随便添加的'}</Text>];    return (      <View style={styles.container}>          <Text onPress={() => {                  // 显示ActionSheet                  this.refs['as'].show();              }}>{'显示ActionSheet'}</Text>          <Text>{this.state.defaultValue}</Text>          {              /**               * title 标题               * options 里面的数组的内容，最好是字符串               * cancelButtonIndex 取消按钮的索引，在options               * destructiveButtonIndex 删除按钮的索引，在options ， 加红色的按钮               * onPress 当点击选项的时候调用，同时传递给我们被点击的索引               * tintColor 选项的颜色               */          }          <ActionSheet              tintColor={'green'}              ref={'as'}              title={<Text style={{                  fontSize:18,                  color:'#ff6633'              }}>{'这是新标题'}</Text>}              options={options}              cancelButtonIndex={0}              destructiveButtonIndex={1}              onPress={(index) => {                this.setState({                    defaultValue:options[index]                });              }}              />      </View>    );  }}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);
0 0