基础篇章：关于 React Native 之 Picker 组件的讲解

非著名程序员

发布于 2018-02-09 15:07:29

1.3K0

发布于 2018-02-09 15:07:29

文章被收录于专栏：非著名程序员

（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）

今天我们就讲Picker ，顾名思义就是选择器。用法也是相当的简单。这里我们直接就看属性吧。

Picker 的属性

onValueChange function 当选择器中的某一项被选中的时候进行回调此函数。回调时有如下两个参数：
- itemValue 被选中项的value属性
- itemPosition 被选中项所在的索引
selectedValue any 默认选中的值，可谓字符串或者整数
style pickerStyleType 样式
enabled bool android 如果设置为false，就是禁止了选择器，不可用了
mode enum('dialog', 'dropdown') android 模式为dialog弹框形式，还是下拉菜单式的
prompt string android 设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。
itemStyle itemStylePropType ios 指定应用在每项标签上的样式

Picker实例

来看看实例演示的效果图，如下：

实例代码

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

export default class PickerDemo extends Component {
  state = {
    selected:' ',
    dropdown:' ',
  }
  render() {
    return (
      <View style={styles.container}>
       <Picker
            prompt="弹框Dialog"
            style={styles.picker}
            selectedValue={this.state.selected}
            onValueChange={(value)=>this.onValueChange(1,value)}>
            <Picker.Item label="hello" value="key0" />
            <Picker.Item label="world" value="key1" />
             <Picker.Item label="弹框1" value="key2" />
            <Picker.Item label="弹框2" value="key3" />
          </Picker>
          <Picker
            mode={'dropdown'}
            style={{width:150}}
            selectedValue={this.state.dropdown}
            onValueChange={(value)=>this.onValueChange(2,value)}>
            <Picker.Item label="我是下拉菜单1" value="key0" />
            <Picker.Item label="我是下拉菜单2" value="key1" />
            <Picker.Item label="我是下拉菜单3" value="key2" />
            <Picker.Item label="我是下拉菜单4" value="key3" />
          </Picker>
      </View>
    );
  }

  onValueChange = (flag,value) => {
    if(flag ==1){
    this.setState({selected:value});
    }else{
      this.setState({dropdown:value});
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  picker: {
    width: 100,
  },
});

AppRegistry.registerComponent('PickerDemo', () => PickerDemo);

是不是非常简单，如果感觉非常简单，那就赶紧动手吧，看看能不能实现一个心中想要实现的漂亮效果呢？

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-12-07，如有侵权请联系 cloudcommunity@tencent.com 删除

reactnative