如何在 ReactNative 中显示下拉列表?

react nativejavascriptmobile development更新于 2025/7/25 22:36:17

React Native 选择器组件类似于下拉列表，可让您从给定的多个选项中选择一个值。

基本的 Picker 组件如下 −

<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
   <Picker.Item label = "ItemLabel" value = "ItemValue" />
      ...
      ...
      ...
   <Picker.Item label = "ItemLabel" value = "ItemValue" />
</Picker>

要使用 picker 组件，您需要先从 react-native 导入它，如下所示 −

从 'react-native' 导入 { Picker }

Picker 属性

Sr.No	属性和说明
1	enabled 它采用布尔值。如果设置为 false，选择器将被禁用，用户将无法选择该项目。
2	itemStyle 要应用于项目的样式。
3	mode 此属性决定如何显示选择器的项目。可用的选项包括:对话框和下拉列表。如果是对话框模式，选择器项目将显示在模态对话框中。如果是下拉列表，它将像普通下拉列表模式一样显示。
4	onValueChange 选择选择器中的项目时将调用的回调函数。可用的参数有 itemValue 即实际选择的值和 itemPosition 即项目的索引位置。
5	selectedValue 从选择器中选择的值。

示例:在 ReactNative 中使用 Picker 显示下拉菜单

此示例使用 Picker 组件显示下拉菜单。

代码如下 −

<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
      <Picker.Item label = "Steve" value = "steve" />
      <Picker.Item label = "Ellen" value = "ellen" />
      <Picker.Item label = "Maria" value = "maria" />
   </Picker>

Picker 有 3 个值，分别为 Steve、Ellen 和 Maria。以下是显示它的完整代码。

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native'
class PickerExample extends Component {
   state = {user: ''}
   updateUser = (user) => {
      this.setState({ user: user })
   }
   render() {
      return (
         <View>
            <Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
            <Picker.Item label = "Steve" value = "steve" />
            <Picker.Item label = "Ellen" value = "ellen" />
            <Picker.Item label = "Maria" value = "maria" />
         </Picker>
         <Text style = {styles.text}>{this.state.user}</Text>
            </View>
         )
      }
   }
   export default PickerExample
   const styles = StyleSheet.create({
   text: {
      fontSize: 30,
      alignSelf: 'center',
      color: 'red'
   }
})

this.state.user 用于选择器控制。选择用户时将触发 updateUser 函数。