資料結構
網路
關係資料庫管理系統 (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+
廣告