基础篇章:关于 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实例

来看看实例演示的效果图,如下:

实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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);

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

loonggg wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号「 非著名程序员」!
坚持原创技术分享,您的支持将鼓励我继续创作!