关注我们

React Native - Picker

React Native Picker是用于从多项选择中选择一个项目的组件。这与下拉菜单选项相同。当我们需要提供多种选择以供选择时，可以使用Picker。

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

链接：https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-picker.html

Picker属性

Prop	Description
onValueChange( itemValue, itemPosition)	这是一个回调属性，在选择一个项目时会调用它。它带有两个参数(itemValue:选定的项目，itemPosition：选定项目的位置)。
selectedValue	返回所选值。
style	picket样式。
testID	用于在端到端测试中定位。
enabled	这是一个布尔属性，当设置为false时，会使disable。如果将其设置为false，则用户将无法进行选择。
mode	在Android上，它指定当用户单击选择器时如何显示选择项。它具有“dialog”和“dropdown”属性。
prompt	它在Android中以对话框模式用作对话框的标题。
itemStyle	它为选择器标签的每个项目设置样式。

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',
    }
})