ReactNative-Picker组件

最新推荐文章于 2025-06-07 13:59:35 发布

_RTFSC_

最新推荐文章于 2025-06-07 13:59:35 发布

阅读量9.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014360817/article/details/52457984

React Native 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了React Native中Picker组件的基本使用方法及其属性与事件。详细解释了如何通过Picker创建下拉菜单，并展示了如何设置样式、监听选择变化等。适用于希望了解React Native选择器组件的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写过Android的都应知道Spinner下来选择器，Picker就是ReactNative界的Spinner

这里写图片描述

只要属性和方法：

onValueChange 这个方法在方法在选择Picker某一项时调用可传两个参数选择的value和position
selectedValue 这个属性是选择的值
enabled 设置是否可点击 Android属性
mode 设置样式 Android属性 dropdown下拉样式和dialog弹窗样式默认是dialog
prompt 设置Picker标题 Android属性并且只有是mode为dialog才会显示
itemStyle 设置每一项的样式 IOS属性

/**
 * Created by Administrator on 2016/9/7.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    Picker,

} from 'react-native';

class PickerG extends Component {

    constructor(porp) {
        super(porp);
        this.state= {
            selectedValue: ''
        }
    }


    render() {
        return (
            <Picker
                //Picker样式 dialog弹窗样式默认  dropdown显示在下边
                // mode = {'dropdown'}
                //显示选择内容
                selectedValue={this.state.selectedValue}
                //选择内容时调用此方法
                onValueChange={(value)=>this.setState({selectedValue: value})}
                //设置Title 当设置为dialog时有用
                prompt={'请选择'}
            >
                <Picker.Item label='Android' value='android'/>
                <Picker.Item label='IOS' value='ios'/>
                <Picker.Item label='ReactNative' value='reactnative'/>
            </Picker>
        )
    }
}

module.exports = PickerG;