ReactNative SwitchSelector Component ব্যাখ্যা কর

SwitchSelector উপাদান একটি রেডিও টগল বোতামের অনুরূপ। এটি আপনাকে 2টির বেশি মান সহ নির্বাচন করতে দেয়৷

SwitchSelector-এর সাথে কাজ করার জন্য আপনাকে নীচে দেখানো প্যাকেজটি ইনস্টল করতে হবে -

npm i react-native-switch-selector --save-dev

বেসিক সুইচ সিলেক্টর নিচের মত দেখায় -

<SwitchSelector
   106
   React Native – Q&A
   options={youroptions}
   initial={0}
   onPress={value => console.log(`value selected is : ${value}`)}
/>

এখানে SwitchSelector-

উদাহরণ:সুইচসিলেক্টরের কাজ

SwitchSelector এর সাথে কাজ করার জন্য আমাদেরকে নিম্নোক্তভাবে কম্পোনেন্ট ইম্পোর্ট করতে হবে -

import SwitchSelector from "react-native-switch-selector";

সুইচসিলেক্টরের ভিতরে আমরা দুটি বিকল্প প্রদর্শন করব না:মহিলা/পুরুষ৷

উদাহরণে, আমরা নারী ও পুরুষের ছবি ব্যবহার করছি এবং বিকল্প অ্যারেতেও একই ব্যবহার করা হয়েছে।

let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
   "female": female,
   "male": male,
};
const options =[
   { label: "Female", value: "f", imageIcon: images.female },
   { label: "Male", value: "m", imageIcon: images.male }
];

সুইচ সিলেক্টর দেখতে এইরকম -

<SwitchSelector
   initial={0}
   onPress={value => this.setState({ gender: value })}
   textColor='#ccceeaa'
   selectedColor='#7a44cf'
   buttonColor='#ccc'
   borderColor='#ccc'
   hasPadding
   options={options}
/>

এখানে SwitchSelector-

উদাহরণ

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
   "female": female,
   "male": male,
};
const options =[
   { label: "Female", value: "f", imageIcon: images.female },
   { label: "Male", value: "m", imageIcon: images.male }
];
export default class MySwitchSelectorComponent extends Component {
   render() {
      return (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
                  onPress={value => this.setState({ gender: value })}
                  textColor='#ccceeaa'
                  selectedColor='#7a44cf'
                  buttonColor='#ccc'
                  borderColor='#ccc'
                  hasPadding
                  options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
});

আউটপুট

আউটপুট নিম্নরূপ -

উদাহরণ 2:তিনটি বিকল্প সহ সুইচসিলেক্টর

নীচের উদাহরণে, আমরা তিনটি বিকল্প ব্যবহার করেছি −

const options =[
   { label: "First", value: "a"},
   { label: "Second", value: "b" } ,
   { label: "Third", value: "c" }
];

তিনটি অপশন দেখানোর জন্য সম্পূর্ণ কোড নিম্নরূপ -

উদাহরণ

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
const options =[
   { label: "First", value: "a"},
   { label: "Second", value: "b" } ,
   { label: "Third", value: "c" }
];
export default class MySwitchSelectorComponent extends Component {
   render() {
      return (
         <SafeAreaView style={styles.container}>
            <SwitchSelector
               initial={0}
               onPress={value => this.setState({ gender: value })}
               textColor='#ccceeaa'
               selectedColor='#7a44cf'
               buttonColor='#ccc'
               borderColor='#ccc'
               fontSize='30'
               hasPadding
               options={options}
            />
         </SafeAreaView>
      )
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1
   }
});

আউটপুট