如何在 ReactNative 中显示下拉列表?
react nativejavascriptmobile development
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 函数。
输出
当您从选择器打开名称时,您应该看到如下所示−