React Native में ड्रॉपडाउन कैसे प्रदर्शित करें

React Native Picker कंपोनेंट एक ड्रॉपडाउन के समान है जो आपको दिए गए कई विकल्पों में से एक मान चुनने की अनुमति देता है।

बेसिक Picker कंपोनेंट इस प्रकार है:

<Picker selectedValue = {selectedelement} onValueChange = {updatefunc}>
    
    ...
    ...
    ...
    
</Picker>

Picker कंपोनेंट के साथ काम करने के लिए, आपको इसे पहले react-native से इम्पोर्ट करना होगा:

import { Picker } from 'react-native'

Picker प्रॉपर्टीज

उदाहरण: React Native में Picker का उपयोग करके ड्रॉपडाउन प्रदर्शित करना

यह उदाहरण Picker कंपोनेंट का उपयोग करके ड्रॉपडाउन दिखाता है।

कोड इस प्रकार है:

<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
    
    
    
</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 (
            
                
                    
                    
                    
                
                {this.state.user}
            
        )
    }
}
export default PickerExample
const styles = StyleSheet.create({
    text: {
        fontSize: 30,
        alignSelf: 'center',
        color: 'red'
    }
})

this.state.user का उपयोग पिकर कंट्रोल के लिए किया जाता है। जब उपयोगकर्ता चुना जाता है तो updateUser फ़ंक्शन ट्रिगर होगा।

आउटपुट

जब आप पिकर से नाम खोलते हैं तो आपको नीचे दिखाए अनुसार देखना चाहिए: