React Native 的 Picker 组件的 onValueChange 事件 - React Native 中文文档

当 React Native 的 Picker 组件的选中项发生变化时，系统会自动调用 Picker 组件上的 onValueChange 事件属性

并把当前选中项的值和选中项的序号作为参数传递给 onValueChange 属性设置的回调函数。

请注意，这个选中项变更事件回调中并没有传递选中项的标签( Picker.Item 的 label 值 )，而是选中项的值（ Picker.Item 的 value 属性）和选中项在 Picker.Item 定义列表中的序号（下标从 0 开始）

因此，典型的 onValueChange 事件回调函数的声明一般如下

function languageChanged(itemValue, itemIndex) {
    // 其它处理逻辑
}

注意

因为第一个值 itemValue 可能只有 Android 平台下有效，所以，请千万不要过度依赖于它，所有的逻辑，你应该以 itemIndex 为主

导入模块

import {Picker} from 'react-native'

使用语法

<Picker
  selectedValue={'twle'}
  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 的 onValueChange 事件属性，并在选中项发生变化时输出当前选中项的序号和选中的值

<Picker
  selectedValue={'twle'}
  onValueChange={(itemValue, itemIndex) => 
    console.log('itemIndex:',itemIndex,',  itemValue:',itemValue)}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
  <Picker.Item label="简单教程" value="twle" />
</Picker>