React Native 中文 - Picker 组件

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 组件

事件

  1. 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>
    );
  }
}

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.