React Native SwitchSelector कंपोनेंट की व्याख्या

SwitchSelector कंपोनेंट एक रेडियो टॉगल बटन के समान है। यह आपको 2 से अधिक मानों के साथ चयन करने की अनुमति देता है।

SwitchSelector के साथ काम करने के लिए आपको नीचे दिखाए अनुसार पैकेज इंस्टॉल करना होगा:

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

बेसिक SwitchSelector इस प्रकार दिखता है:

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

SwitchSelector की कुछ महत्वपूर्ण प्रॉपर्टीज यहां दी गई हैं:

उदाहरण: SwitchSelector का कार्य

SwitchSelector के साथ काम करने के लिए हमें नीचे दिखाए अनुसार कंपोनेंट इम्पोर्ट करना होगा:

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

SwitchSelector के अंदर हम दो विकल्प प्रदर्शित करना चाहते हैं: Female/Male।

उदाहरण में, हम Female और Male इमेज का उपयोग कर रहे हैं और वही options सरणी में उपयोग किया जाता है।

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 इस प्रकार दिखता है:

<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 (
            
                 this.setState({ gender: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    hasPadding
                    options={options}
                />
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

आउटपुट

आउटपुट इस प्रकार है:

उदाहरण 2: तीन विकल्पों के साथ SwitchSelector

नीचे दिए गए उदाहरण में, हमने तीन विकल्पों का उपयोग किया है:

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 (
            
                 this.setState({ gender: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    fontSize='30'
                    hasPadding
                    options={options}
                />
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

आउटपुट