← React Native 中的 pickerStyleType 类型 color 属性 React Native 中的 Picker.Item 组件的 label 属性 →

React Native 中的 Picker.Item 组件

返回上一级

React Native 中的 Picker.Item 组件是 Picker 组件的子组件，是 Picker 组件的每一个子选项的容器。

Picker.Item 其实就相当于 HTML 中 <select> 标签中的 <option> 标签

这个容器的意思有两层：

如果传递给 Picker.Item 的 label 属性的值是一个字符串或者整型，那么它会自动添加 <Text> 作为容器来包装

需要 <Text> 包装的原因是 React Native 中，不允许纯文本（ Text ）直接显示在任何非 文本容器 中

目前为止，文本容器只有两个
1. <Text>
2. <TextInput>
如果传递给 Picker.Item 的 label 属性的值是其它的组件，那么它只是简单的在该组件外围再添加一个 <View> 组件

因此，从某些方面说，虽然 Picker 组件并没有提供任何 分割线 或者 分割线子组件，但我们可以通过传递一个 <View> 给 label 属性来达到这个目的

Picker.Item 组件的样式

因为 Picker.Item 的 label 属性有两种类型的值，因此，Picker.Item 的样式属性也分为两大类

如果 label 属性是纯文本，那么可设置的属性有
1. Picker.Item 的 color 属性
2. Picker.Item 的父容器 Picker 的 itemStyle 设置的样式
如果 label 是一个其它组件，那么可设置的样式有
1. label 值的组件上定义的 style 样式属性
2. Picker.Item 的父容器 Picker 的 itemStyle 设置的样式

也就是说，Picker.Item 其实就相当于 HTML 中 <select> 标签中的 <option> 标签

导入模块

import {Picker} from 'react-native'

使用语法

Picker.Item 是作为 Picker 组件的子元素而存在的，不能单独使用，必须放在 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.Item 默认只有四个属性，而经常用到的，其实就只有一个 label

虽然 value 属性也经常用到，但这个属性只有 Android 下有效，所以也相当于一个废品

属性	必填	平台	说明
`label`	是	iOS Android	Picker 每一个选项的显示的值
`color`	否	iOS Android	如果 label 传递的是文本，则用于设定文本的颜色
`testID`	否	iOS Android	端对端测试时用于唯一标识当前组件
`value`	否	Android	选中项的值，会传递给 Picker 的 onValueChange 事件回调

范例

下面的范例，我们使用 Picker.Item 组件为 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>
    );
  }
}