रिएक्ट नेटिव पिकर घटक एक ड्रॉपडाउन के समान है जो आपको दिए गए कई विकल्पों में से एक मान का चयन करने की अनुमति देता है।
मूल पिकर घटक इस प्रकार है -
... ... ... पिकर घटक के साथ काम करने के लिए, आपको इसे पहले प्रतिक्रिया-मूल से आयात करना होगा -
'react-native' से आयात करें { पिकर }पिकर प्रॉपर्टी
Sr.No प्रॉप्स और विवरण 1 सक्षम
यह एक बूलियन मान लेता है। यदि गलत पर सेट किया जाता है तो पिकर अक्षम हो जाएगा और उपयोगकर्ता आइटम का चयन करने में सक्षम नहीं होगा।
2 आइटम शैली
वस्तुओं के लिए लागू की जाने वाली शैली।
3 मोड
यह प्रॉपर्टी तय करती है कि पिकर के आइटम कैसे प्रदर्शित किए जाएं। उपलब्ध विकल्प हैं:संवाद और ड्रॉपडाउन। यदि डायलॉग मोड है तो पिकर आइटम एक मोडल डायलॉग में प्रदर्शित होंगे। यदि ड्रॉपडाउन यह सामान्य ड्रॉपडाउन मोड की तरह प्रदर्शित होगा।
4 वैल्यू चेंज पर
कॉलबैक फ़ंक्शन जिसे पिकर से आइटम चुने जाने पर कॉल किया जाएगा। उपलब्ध पैरामीटर हैं आइटम वैल्यू यानी चयनित वास्तविक मूल्य और आइटम स्थिति यानी आइटम की अनुक्रमणिका स्थिति।
5 चयनित मान
पिकर से चयनित मान।
उदाहरण:ReactNative में पिकर का उपयोग करके ड्रॉपडाउन का प्रदर्शन
यह उदाहरण पिकर घटक का उपयोग करके ड्रॉपडाउन दिखाता है।
कोड इस प्रकार है -
पिकर स्टीव, एलेन और मारिया को 3 मान दिए गए हैं। इसे प्रदर्शित करने के लिए यहां एक पूरा कोड दिया गया है।
<पूर्व>आयात प्रतिक्रिया, {घटक} 'प्रतिक्रिया' से; आयात {देखें, पाठ, पिकर, स्टाइलशीट} 'प्रतिक्रिया-मूल' वर्ग से पिकर उदाहरण घटक बढ़ाता है { राज्य ={उपयोगकर्ता:''} अद्यतन उपयोगकर्ता =(उपयोगकर्ता) => { this.setState ({उपयोगकर्ता:उपयोगकर्ता})} रेंडर () {वापसी ( <देखें> <पिकर चयनित वैल्यू ={this.state.user} onValueChange ={this.updateUser}><पिकर। आइटम लेबल ="एलेन" मान ="एलेन" /> <पिकर। आइटम लेबल ="मारिया" मान ="मारिया" /> <पाठ शैली ={styles.text }>{this.state.user} ) } } डिफ़ॉल्ट निर्यात करें PickerExample const Styles =StyleSheet.create({ text:{fontSize:30, alignSelf:'center', color:'red' } })
this.state.user पिकर नियंत्रण के लिए प्रयोग किया जाता है। उपयोगकर्ता के चुने जाने पर अपडेट यूज़र फ़ंक्शन चालू हो जाएगा।
आउटपुट
जब आप पिकर से नाम खोलते हैं तो आपको नीचे जैसा दिखना चाहिए -
