数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在React Native中显示下拉菜单？
React Native 的 Picker 组件类似于下拉菜单，允许您从给定的多个选项中选择一个值。
基本的 Picker 组件如下所示：
<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
<Picker.Item label = "ItemLabel" value = "ItemValue" />
...
...
...
<Picker.Item label = "ItemLabel" value = "ItemValue" />
</Picker>要使用 Picker 组件，您需要先从 react-native 中导入它，如下所示：
import { Picker } from 'react-native'Picker 属性
| 序号 | 属性及描述 |
|---|---|
| 1 | enabled 接受布尔值。如果设置为 false，则选择器将被禁用，用户将无法选择项目。 |
| 2 | itemStyle 应用于项目的样式。 |
| 3 | mode 此属性决定如何显示选择器的项目。可用的选项是：dialog 和 dropdown。如果为 dialog 模式，则选择器项目将显示在模态对话框中。如果为 dropdown，则它将像普通下拉菜单模式一样显示。 |
| 4 | onValueChange 当从选择器中选择项目时将调用的回调函数。可用的参数是 itemValue（即实际选择的值）和 itemPosition（即项目的索引位置）。 |
| 5 | selectedValue 从选择器中选择的值。 |
示例：在 React Native 中使用 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 中有三个值：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`** 用于 Picker 控制。当选择用户时，将触发 updateUser 函数。
输出
当您从 Picker 中打开名称时，您应该看到如下内容：
更新于：2021-07-01
浏览量：1K+
广告