# Picker 基础用法

- order: 0
- title_en: Picker basic usage

基本用法

---

```js
<NukePlayGround>
  Picker.show(
    {
      title: 'Select Quantity',
      dataSource: data0,
      selectedKey: this.state.selected,
      hasBottomButton: true,
      hasToolbar: true,
      locale: {
        confirm: 'yes',
        cancel: 'no'
      }
    },
    result => {
      this.setState({
        data: data0[result.data],
        selected: result.data
      });
    },
    e => {
      // debugger;
      console.log('canceled');
    }
  )
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Button from 'nuke-button';
import Picker from 'nuke-picker';
import Env from 'nuke-env';
import ThemeProvider from 'nuke-theme-provider';

const { isWeb, appInfo } = Env;
const { StyleProvider } = ThemeProvider;
const isAndroid = appInfo.platform.toLowerCase() === 'android';
let md = {
  Core: {
    [`color-brand1-6`]: '#1A9CB7'
  },
  Picker: {
    'bottom-button-bg-color': '#ff6600',
    'item-text-color': '#1e1e1e',
    'toolbar-title-color': '#202020'
  }
};
let data0 = ['Rick', 'Morty', 'Hulk', 'Iron Man'];

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      selected: 1
    };
  }

  press() {
    Picker.show(
      {
        title: 'Select Quantity',
        dataSource: data0,
        selectedKey: this.state.selected,
        hasBottomButton: true,
        hasToolbar: true,
        locale: {
          confirm: 'yes',
          cancel: 'no'
        }
      },
      (result) => {
        this.setState({
          data: data0[result.data],
          selected: result.data
        });
      },
      (e) => {
        // debugger;
        console.log('canceled');
      }
    );
  }

  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: isAndroid }}>
        <Page title="Picker">
          <View style={styles.result}>
            {this.state.data ? <Text style={styles.resultText}>Your choice is : {this.state.data}</Text> : null}
          </View>
          <View style={styles.btns}>
            <Button style={styles.btn} block onPress={this.press.bind(this)} type="primary">
              open
            </Button>
          </View>
        </Page>
      </StyleProvider>
    );
  }
}

const styles = {
  result: {
    height: 480,
    margin: 30,
    padding: 10,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: 28
  },
  btns: {
    margin: 30
  },
  btn: {
    marginBottom: 30
  }
};

render(<Demo />);
```