จะแสดงดรอปดาวน์ใน ReactNative ได้อย่างไร?

คอมโพเนนต์ React native picker นั้นคล้ายกับดรอปดาวน์ที่ให้คุณเลือกค่าจากหลายตัวเลือกที่ให้มา

ส่วนประกอบ Picker พื้นฐานมีดังนี้ -

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

ในการทำงานกับองค์ประกอบตัวเลือก คุณต้องนำเข้าจาก react-native ก่อนดังนี้ −

import { Picker } from 'react-native'

คุณสมบัติของตัวเลือก

ตัวอย่าง:การแสดงดรอปดาวน์โดยใช้ตัวเลือกใน ReactNative

ตัวอย่างนี้แสดงดรอปดาวน์โดยใช้องค์ประกอบตัวเลือก

รหัสมีดังต่อไปนี้ −

<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 มี 3 ค่า นี่คือรหัสที่สมบูรณ์เพื่อแสดง

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 จะทำงานเมื่อมีการเลือกผู้ใช้

ผลลัพธ์

เมื่อคุณเปิดชื่อจากตัวเลือก คุณจะเห็นดังนี้ −