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

今天我们就讲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);

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

文章原创并首发于我的微信公众号：非著名程序员(smart_android)，也欢迎大家访问我的个人博客：http://godcoder.me