基础篇章：关于 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