स्क्रॉलव्यू घटक क्या है और रिएक्ट नेटिव में इसका उपयोग कैसे करें?

होगा।

उदाहरण 1:स्क्रॉलव्यू का उपयोग करके लंबवत स्क्रॉल करना

इस उदाहरण में स्क्रॉलव्यू में एक टेक्स्ट घटक के साथ एक दृश्य है और इसे एक दृश्य के अंदर लपेटा गया है।

स्क्रॉलव्यू के साथ काम करने के लिए पहले घटक आयात करें -

'react-native' से आयात करें { टेक्स्ट, व्यू, स्टाइलशीट, स्क्रॉलव्यू};

स्क्रॉलव्यू के अंदर प्रदर्शित होने वाला डेटा स्टेट ऑब्जेक्ट में नामों के अंदर संग्रहीत किया जाता है जैसा कि नीचे दिखाया गया है -

स्टेट ={नाम:[{'नाम':'बेन', 'आईडी':1}, {'नाम':'सुसान', 'आईडी':2}, {'नाम':'रॉबर्ट', 'आईडी':3}, {'नाम':'मैरी', 'आईडी':4}, {'नाम':'डैनियल', 'आईडी':5}, {'नाम':'लौरा', 'आईडी' ':6}, {'नाम':'जॉन', 'आईडी':7}, {'नाम':'डेबरा', 'आईडी':8}, {'नाम':'एरोन', 'आईडी':9}, {'नाम':'एन', 'आईडी':10}, {'नाम':'स्टीव', 'आईडी':11}, {'नाम':'ओलिविया', 'आईडी':12} ]} 

 डेटा यानी this.state.names  एक सरणी है। मानचित्र () विधि का उपयोग सरणी पर किया जाता है और नाम व्यू-> टेक्स्ट घटक के अंदर प्रदर्शित होता है जैसा कि नीचे दिखाया गया है -
 
 {this.state.names.map((item, index) => ({item.name}))}
 

 स्क्रॉलव्यू स्थिर डेटा के लिए सबसे अच्छा काम करता है जो छोटे आकार का होता है। लेकिन यदि आप गतिशील के साथ काम करना चाहते हैं तो फ्लैटलिस्ट घटक का उपयोग करने के लिए सबसे बड़ी सूची हो सकती है।
 

 स्क्रॉलव्यू का पूरा कोड यहां दिया गया है।
 <पूर्व>आयात प्रतिक्रिया, {घटक} "प्रतिक्रिया" से; आयात {पाठ, दृश्य, स्टाइलशीट, स्क्रॉलव्यू} 'प्रतिक्रिया-मूल' से; वर्ग स्क्रॉलव्यू उदाहरण घटक का विस्तार करता है { राज्य ={नाम:[ {'नाम':'बेन' , 'आईडी':1}, {'नाम':'सुसान', 'आईडी':2}, {'नाम':'रॉबर्ट', 'आईडी':3}, {'नाम':'मैरी', ' आईडी':4}, {'नाम':'डैनियल', 'आईडी':5}, {'नाम':'लौरा', 'आईडी':6}, {'नाम':'जॉन', 'आईडी' :7}, {'नाम':'डेबरा', 'आईडी':8}, {'नाम':'एरोन', 'आईडी':9}, {'नाम':'एन', 'आईडी':10 }, {'नाम':'स्टीव', 'आईडी':11}, {'नाम':'ओलिविया', 'आईडी':12}]} रेंडर (प्रॉप्स) {वापसी ( <देखें शैली ={{फ्लेक्स:1, औचित्य सामग्री:'केंद्र', मार्जिन:15}}> <स्क्रॉलव्यू> {this.state.names.map ((आइटम, अनुक्रमणिका) => (<कुंजी देखें ={item.id} शैली ={styles.item}>{item.name})) }  ); }}निर्यात डिफ़ॉल्ट स्क्रॉलव्यूएक्सैम्पल; कॉन्स्ट स्टाइल =StyleSheet.create ({आइटम:{फ्लेक्सडायरेक्शन:'पंक्ति', जस्टिफाई कंटेंट:'स्पेस-बीच', एलाइन इटम्स:'सेंटर', पैडिंग:30, मार्जिन:2, बॉर्डर कलर:'#2a4944 ', बॉर्डरविड्थ:1, बैकग्राउंड कलर:'#d2f7f1' }})

आउटपुट

उदाहरण 2:स्क्रॉलव्यू का उपयोग करके क्षैतिज रूप से स्क्रॉल करना

डिफ़ॉल्ट रूप से स्क्रॉलव्यू डेटा को लंबवत रूप से प्रदर्शित करता है। डेटा को क्षैतिज रूप से प्रदर्शित करने के लिए प्रॉप्स का उपयोग करें

क्षैतिज ={सत्य} जैसा कि नीचे दिखाया गया है -

 {this.state.names.map((item, index) => (<देखें key ={item.id} style ={styles.item}>{item .name}))}

<पूर्व>आयात प्रतिक्रिया, {घटक} "प्रतिक्रिया" से; आयात {पाठ, दृश्य, स्टाइलशीट, स्क्रॉलव्यू} 'प्रतिक्रिया-मूल' से; वर्ग स्क्रॉलव्यू उदाहरण घटक का विस्तार करता है { राज्य ={नाम:[ {'नाम':'बेन' , 'आईडी':1}, {'नाम':'सुसान', 'आईडी':2}, {'नाम':'रॉबर्ट', 'आईडी':3}, {'नाम':'मैरी', ' आईडी':4}, {'नाम':'डैनियल', 'आईडी':5}, {'नाम':'लौरा', 'आईडी':6}, {'नाम':'जॉन', 'आईडी' :7}, {'नाम':'डेबरा', 'आईडी':8}, {'नाम':'एरोन', 'आईडी':9}, {'नाम':'एन', 'आईडी':10 }, {'नाम':'स्टीव', 'आईडी':11}, {'नाम':'ओलिविया', 'आईडी':12}]} रेंडर (प्रॉप्स) {वापसी ( <देखें शैली ={{फ्लेक्स:1, जस्टिफाई कंटेंट:'सेंटर', मार्जिनटॉप:100}}> <स्क्रॉल व्यू हॉरिजॉन्टल ={सच}> {this.state.names.map ((आइटम, इंडेक्स) => (<व्यू की ={आइटम। आईडी} स्टाइल ={styles.item}>{item.name})) } ); }}निर्यात डिफ़ॉल्ट स्क्रॉलव्यूएक्सैम्पल; कॉन्स्ट स्टाइल =StyleSheet.create ({आइटम:{फ्लेक्सडायरेक्शन:'पंक्ति', जस्टिफाई कंटेंट:'स्पेस-बीच', एलाइन इटम्स:'सेंटर', पैडिंग:30, मार्जिन:2, बॉर्डर कलर:'#2a4944 ', बॉर्डरविड्थ:1, ऊँचाई:100, पृष्ठभूमि रंग:'#d2f7f1' }})

आउटपुट