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

（友情提示：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 (
      
       this.onValueChange(1,value)}>
            
            
             
            
          
          this.onValueChange(2,value)}>
            
            
            
            
          
      
    );
  }

  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);

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

由于代码太多，可能阅读代码不是很方便，想要方便的看代码可以点击阅读原文，去博客直接阅读。

特别说明：React Native系列文章，已经发布的我都给大家整理到了一篇索引文章中，方便大家以后集中学习。点击非著名程序员公众号里菜单中的干货资料—>RN 教程即可获得。