import React, {Component} from 'react';
import {
  View,
  Text,
  Button,
} from 'react-native';
import Picker from 'react-native-picker';

let data = ['男', '女', '未知'];

export default class PickerExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      gender: '未知'
    }
  }

  showPicker = () => {
    Picker.init({
      pickerData: data,
      selectedValue: [this.state.gender],
      pickerConfirmBtnText: "我確定",
      pickerFontSize: 20,
      onPickerConfirm: data => {
          this.setState({
            gender: data
          })
      },
      onPickerCancel: data => {
          console.log(data);
      },
      onPickerSelect: data => {
          console.log(data);
      }
    });
    Picker.show();
  }

  render() {
    return (
      <View style={{marginTop: 100, alignItems: 'center'}}>
        <Button title="按我選擇" color="red" onPress={() => this.showPicker()} />
        <Text>{this.state.gender}</Text>
      </View>
    );
  }
}