ReactNative এ ড্রপডাউন কিভাবে প্রদর্শন করবেন?

প্রতিক্রিয়া নেটিভ পিকার উপাদানটি একটি ড্রপডাউনের মতো যা আপনাকে প্রদত্ত একাধিক বিকল্প থেকে একটি মান নির্বাচন করতে দেয়৷

মৌলিক পিকার উপাদান নিম্নরূপ -

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

পিকার উপাদানের সাথে কাজ করার জন্য, আপনাকে প্রথমে এটিকে নিম্নরূপ প্রতিক্রিয়া-নেটিভ থেকে আমদানি করতে হবে -

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>

পিকার স্টিভ, এলেন এবং মারিয়াকে 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 ফাংশনটি ট্রিগার হবে৷

আউটপুট

আপনি পিকার থেকে নাম খুললে আপনাকে নিচের মত দেখতে হবে -