วิธีแสดง Dropdown ใน React Native

คอมโพเนนต์ Picker ของ React Native คล้าย dropdown ให้เลือกค่าจากหลายตัวเลือก

คอมโพเนนต์พื้นฐาน

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

การนำเข้า

import { Picker } from 'react-native'

คุณสมบัติ Picker

ตัวอย่าง: แสดง Dropdown ด้วย 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>

โค้ดเต็มรูปแบบ

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 (
      
        
          
          
          
        
        {this.state.user}
      
    );
  }
}

export default PickerExample;

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
    alignSelf: 'center',
    color: 'red'
  }
});

this.state.user ควบคุม picker ฟังก์ชัน updateUser เรียกเมื่อเลือก user

ผลลัพธ์

เปิด picker จากชื่อ:

หมายเหตุ

• Picker เป็นคอมโพเนนต์ core ของ React Native (deprecated ในบางเวอร์ชัน)
• แนะนำใช้ @react-native-picker/picker แทน (community maintained)
• สำหรับ UI ที่สวยงามกว่า ควรใช้ไลบรารีเช่น react-native-element-dropdown หรือ react-native-material-dropdown