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