React Native Picker

17 Mar 2025 | 阅读 2 分钟

React Native Picker 是一个组件，用于从多个选项中选择一个项目。这与下拉选项相同。当我们需要提供从多个选项中进行选择的替代方案时，使用Picker。

它通过从 react-native 库导入 Picker 组件来使用。

Picker 的 Props

属性	描述
onValueChange( itemValue, itemPosition)	这是一个回调 prop，当选择一个项目时调用。它接受两个参数（itemValue：所选的项目（值），itemPosition：所选项的位置（索引））。
selectedValue	返回所选的值。
style	它是一个选择器样式类型。
testID	用于在端到端测试中定位此视图。
enabled	这是一个布尔 prop，当设置为 false 时，使选择器禁用。如果设置为 false，则用户无法进行选择。
mode	在 Android 上，它指定用户点击选择器时如何显示选择项。它具有“dialog”和“dropdown”属性。“dialog”是默认模式，显示为模态对话框。“dropdown”将选择器显示为下拉锚点视图。
prompt	它在 Android 中与对话框模式一起使用，作为对话框的标题。
itemStyle	它为选择器标签的每个项目设置样式。

React Native Picker 示例

在这个例子中，我们在 Picker 组件中创建了三个标签项目。当从 Picker 中选择项目时，它会调用 onValueChange 回调并在选择器中设置所选项目。项目的索引从 itemPosition 中读取。项目的位置显示在 Text 组件中。

App.js

import React, { Component } from 'react'
import {StyleSheet,View, Text,Picker} from 'react-native'

export default class SwitchExample extends Component {
    state = {
        choosenIndex: 0
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}>Picker Example</Text>
                <Picker style={styles.pickerStyle}
                        selectedValue={this.state.language}
                        onValueChange={(itemValue, itemPosition) =>
                            this.setState({language: itemValue, choosenIndex: itemPosition})}
                    >
                    <Picker.Item label="Java" value="java" />
                    <Picker.Item label="JavaScript" value="js" />
                    <Picker.Item label="React Native" value="rn" />
                </Picker>
                <Text style={styles.textStyle}> {"Index ="+this.state.choosenIndex}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create ({
     container: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
    textStyle:{
        margin: 24,
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    pickerStyle:{
        height: 150,
        width: "80%",
        color: '#344953',
        justifyContent: 'center',
    }
})

输出