Picker
参考文档
本组件可以在iOS和Android上渲染原生的选择器(Picker)
Props
属性 | 类型 | 必填 | 描述 |
onValueChange | function | 否 |
某一项被选中时执行此回调。调用时带有如下参数:
itemValue: 被选中项的value属性 itemPosition: 被选中项在picker中的索引位置 |
selectedValue | any | 否 | 默认选中的值。可以是字符串或整数。 |
style | pickerStyleType | 否 | |
testID | string | 否 | 用于在端对端测试中定位此视图。 |
enabled | bool | 否 | 如果设为false,则会禁用此选择器。(Android 平台) |
mode | enum('dialog', 'dropdown') | 否 |
在Android上,可以指定在用户点击选择器时,以怎样的形式呈现选项:
'dialog': 显示一个模态对话框。默认选项。 'dropdown': 以选择器所在位置为锚点展开一个下拉框。 (Android 平台 ) |
prompt | string | 否 | 设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。 (Android 平台) |
itemStyle | text styles | 否 | 指定应用在每项标签上的样式 |
Example
示例
import React, { Component } from 'react';
import {Picker,StyleSheet } from 'react-native';
export class pageComponent extends Component {
constructor(props) {
super(props);
this.state={
language:'js'
}
}
render() {
return (
<Picker
selectedValue={this.state.language}
style={styles.pickerStyle}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="C++" value="c++" />
</Picker>
);
}
}
const styles = StyleSheet.create({
pickerStyle:{
height: 50,
width: 100
}
});