React Native 中文 - Picker 组件 - React Native 中文文档

Picker 组件会渲染一个选择框，类似于 HTML 中的 <select> 标签

导入模块

import {Picker} from 'react-native'

使用语法

Picker 组件最简单的使用方式如下

<Picker
  selectedValue={this.state.language}
  style={{height: 50, width: 100}}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
  <Picker.Item label="简单教程" value="twle" />
</Picker>

属性

Picker 默认是一个可视属性，也就是说，它默认会占用一定的空间。我们只能设置它可用或禁用，而不能设置是否显示

Picker 可设置的属性如下

属性	必填	平台	说明
View props...	否	iOS Android	View 的所有属性
`onValueChange`	否	iOS Android	选项改变时的回调函数
`selectedValue`	否	iOS Android	当前的选中项
`style`	否	iOS Android	Picker 的样式
`testID`	否	iOS Android	测试时的 id
`enabled`	否	iOS Android	是否可用，默认值为 `true`，如果为 `false` 则不可点击
`mode`	否	Android	类型，有两个选项 `dialog`, `dropdown` （默认）
`prompt`	否	Android	描述文字，Android 下可用
`itemStyle`	否	iOS	每个选项的样式

子组件

Picker 唯一可以包含的组件就是 Picker.Item 这个子组件。数量随意。

更多有关 Picker.Item 组件的知识，可以访问我们的 React Native Picker.Item 组件

事件

onValueChange

当我们选择了某一个可选项时，会触发 onValueChange 事件，该事件接收两个参数，分别是 选项序号 和 所选择的值

onValueChange 事件的标准设置方法如下
```
onValueChange={(itemValue, itemIndex) => this.setState({itemValue, itemIndex})}>
```

范例

下面的范例演示了 Picker 的基本使用

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

export default class App extends Component{

   constructor(props) {
        super(props)
        this.state = {language:"请选择语言..."}
   }

  render() {
    return (
      <View style={{margin:50}}>
          <Picker
              selectedValue={this.state.language}
              style={{height: 50, width: 100}}
              onValueChange={(itemValue, itemIndex) => 
                    this.setState({language: itemValue})}>
              <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" />
              <Picker.Item label="简单教程" value="twle" />
          </Picker>
    </View>
    );
  }
}