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
    }
});
该文件修订时间: 2021-01-14 15:02:10

results matching ""

    No results matching ""