प्रतिक्रियाशील स्विच चयनकर्ता घटक की व्याख्या करें

<घंटा/>

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

स्विच चयनकर्ता के साथ काम करने के लिए आपको नीचे दिखाए अनुसार पैकेज को स्थापित करना होगा -

npm i प्रतिक्रिया-मूल-स्विच-चयनकर्ता --save-dev

मूल स्विच चयनकर्ता इस प्रकार दिखता है -

 कंसोल.लॉग(`मान चयनित है:${value}`)}/>

यहां स्विच चयनकर्ता के कुछ महत्वपूर्ण गुण दिए गए हैं -

Props	विवरण
विकल्प	आवश्यक लेबल, मान और छवि चिह्न के साथ एक सरणी।
प्रारंभिक	सरणी से आरंभिक आइटम जिसे चुना जाएगा।
मान	स्विच मान जो प्रेस ईवेंट पर उपलब्ध होगा
प्रेस पर	कॉलबैक फ़ंक्शन वाला ईवेंट जिसे स्विच बदलने पर कॉल किया जाएगा।
फ़ॉन्ट आकार	लेबल के लिए विचार किया जाने वाला फ़ॉन्ट आकार।
चयनित रंग	चयनित आइटम का रंग।
बटन रंग	चयनित आइटम के लिए पृष्ठभूमि का रंग।
पाठ रंग	नहीं चयनित आइटम के लिए लेबल रंग।
पृष्ठभूमि रंग	स्विच चयनकर्ता घटक के लिए पृष्ठभूमि रंग।
बॉर्डर कलर	घटक के लिए सीमा रंग दिया जाना है।

उदाहरण:स्विच चयनकर्ता का कार्य करना

स्विच चयनकर्ता के साथ काम करने के लिए हमें घटक को निम्नानुसार आयात करना होगा -

"प्रतिक्रिया-मूल-स्विच-चयनकर्ता" से स्विच चयनकर्ता आयात करें;

स्विच चयनकर्ता के अंदर हम दो विकल्प प्रदर्शित नहीं करेंगे:महिला/पुरुष।

उदाहरण में, हम महिला और पुरुष छवियों का उपयोग कर रहे हैं और इसका उपयोग विकल्प सरणी में किया जाता है।

चलो पुरुष =आवश्यकता ('सी:/myfirstapp/myfirstapp/assets/male.png'); महिला होने दें =आवश्यकता ('सी:/myfirstapp/myfirstapp/assets/female.png');const images ={ " महिला":महिला, "पुरुष":पुरुष,}; कॉन्स्ट विकल्प =[ {लेबल:"महिला", मान:"एफ", छवि आइकन:छवियां। महिला}, {लेबल:"पुरुष", मान:"एम", imageIcon:images.male }];

स्विच चयनकर्ता इस प्रकार दिखता है -

 this.setState({ लिंग:value })} textColor='#ccceeaa'selectColor='#7a44cf' buttonColor='#ccc' BorderColor='#ccc ' पैडिंग विकल्प हैं ={विकल्प}/> 
 यहां स्विच चयनकर्ता का पूरा कोड दिया गया है -
 उदाहरण
 <पूर्व>आयात प्रतिक्रिया, {घटक 'प्रतिक्रिया' से; आयात {स्टाइलशीट, सेफएरिया व्यू} 'प्रतिक्रिया-मूल' से /myfirstapp/assets/male.png'); चलो महिला =की आवश्यकता है ('C:/myfirstapp/myfirstapp/assets/female.png');const images ={"महिला":महिला, "पुरुष":पुरुष,}; कॉन्स्ट विकल्प =[ {लेबल:"महिला", मान:"एफ", छवि आइकन:छवियां। महिला}, {लेबल:"पुरुष", मान:"एम", छवि आइकन:छवियां। पुरुष}]; निर्यात डिफ़ॉल्ट वर्ग MySwitchSelectorComponent का विस्तार घटक {रेंडर() {वापसी (   this.setState({ लिंग:मान})} textColor='#ccceeaa' SelectedColor='#7a44cf' buttonColor='#ccc' borderColor='#ccc' hasPadding options={options} />  )}}कॉन्स्ट स्टाइल =StyleSheet.create({कंटेनर:{फ्लेक्स:1, alignItems:"center", JustifyContent:"center"},});

आउटपुट

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

प्रतिक्रियाशील स्विच चयनकर्ता घटक की व्याख्या करें

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

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

कॉन्स्ट विकल्प =[ {लेबल:"फर्स्ट", वैल्यू:"ए"}, {लेबल:"सेकंड", वैल्यू:"बी"}, {लेबल:"थर्ड", वैल्यू:"सी"}];

तीन विकल्पों को प्रदर्शित करने के लिए पूरा कोड इस प्रकार है -

उदाहरण

<पूर्व>आयात प्रतिक्रिया, {घटक 'प्रतिक्रिया' से; आयात {स्टाइलशीट, सेफएरिया व्यू} 'प्रतिक्रिया-मूल' से , मान:"ए"}, {लेबल:"दूसरा", मान:"बी"}, {लेबल:"तीसरा", मान:"सी"}]; निर्यात डिफ़ॉल्ट वर्ग MySwitchSelectorComponent घटक बढ़ाता है {रेंडर() {वापसी ( this.setState({लिंग:value})} textColor='#ccceeaa'selectColor='#7a44cf' buttonColor='# ccc' borderColor='#ccc' fontSize='30' hasPadding options={options} /> ) }}const Styles =StyleSheet.create({container:{ flex:1 }});

आउटपुट

प्रतिक्रियाशील स्विच चयनकर्ता घटक की व्याख्या करें