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

<घंटा/>

एक इंटरफ़ेस जो सूचियों को अनुभागों में प्रस्तुत करने में मदद करता है। सेक्शनलिस्ट की कुछ महत्वपूर्ण विशेषताएं हैं -

सूची में शीर्षलेख/पाद लेख समर्थन
अनुभाग के लिए शीर्षलेख/पाद लेख समर्थन
स्क्रॉल लोड हो रहा है
ताज़ा करने के लिए खींचें
पूरी तरह से क्रॉस-प्लेटफ़ॉर्म

मूल अनुभागसूची घटक इस प्रकार दिखता है -

सेक्शनलिस्ट के साथ काम करने के लिए नीचे दिखाए गए अनुसार कंपोनेंट आयात करें -

"प्रतिक्रिया-मूल" से

आयात करें { sectionList };

अनुभाग सूची पर उपलब्ध महत्वपूर्ण संपत्तियों की सूची यहां दी गई है -

<वें शैली="चौड़ाई:101.429%;">विवरण

Props
renderItem	डिफ़ॉल्ट फ़ंक्शन है जो आइटम को अनुभाग में प्रस्तुत करता है। यह एक प्रतिक्रिया तत्व देता है। रेंडर फ़ंक्शन को निम्न कुंजियों वाले ऑब्जेक्ट की तरह अनुभाग सूची में पास किया जाएगा - 'आइटम' (ऑब्जेक्ट) - आइटम ऑब्जेक्ट 'सूचकांक' (संख्या) - अनुभाग के भीतर आइटम को दिया गया सूचकांक। 'सेक्शन' (ऑब्जेक्ट) - सेक्शन ऑब्जेक्ट। 'सेपरेटर्स' (ऑब्जेक्ट) - निम्नलिखित कुंजियों वाली एक वस्तु है - हाइलाइट' (फ़ंक्शन) - () => शून्य 'अनहाइलाइट' (फ़ंक्शन) - () => शून्य 'updateProps' (फ़ंक्शन) - (चुनें, newProps) => शून्य 'select' (enum) - मान 'अग्रणी', 'पिछला' हैं 'newProps' (वस्तु)
अनुभाग	रेंडर किया जाने वाला डेटा।
renderSectionHeader	सामग्री शीर्ष पर प्रस्तुत की जाती है। आईओएस में आप देखेंगे कि सामग्री शीर्ष पर डॉक करती है।
renderSectionFooter	सामग्री नीचे प्रस्तुत की गई है।
रीफ्रेशिंग	रिफ्रेश पर यदि नया डेटा रेंडर किया जाना है तो इस प्रॉपर्टी को सही पर सेट करें।
ListEmptyComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या रेंडर तत्व जो सूची खाली होने पर लागू हो जाएगा। यदि आप सूची खाली होने पर कुछ करना चाहते हैं तो यह घटक सहायक होगा।
ListFooterComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या रेंडर तत्व जो सभी वस्तुओं के नीचे प्रस्तुत किया जाएगा।
ListFooterComponentStyle	फ़ुटर कंपोनेंट के लिए आवश्यक स्टाइलिंग यहां की जा सकती है।
ListHeaderComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या रेंडर तत्व जो सभी वस्तुओं के शीर्ष पर प्रस्तुत किया जाएगा।
ListHeaderComponentStyle	हेडर कंपोनेंट के लिए आवश्यक स्टाइलिंग यहां की जा सकती है।
keyExtractor	दी गई अनुक्रमणिका के लिए अद्वितीय कुंजी निकालता है। कुंजी का उपयोग कैशिंग के लिए किया जाता है और आइटम के पुन:क्रम को ट्रैक करने के लिए भी किया जाता है।

उदाहरण 1:डेटा प्रदर्शित करने के लिए अनुभाग सूची का उपयोग करना

सेक्शनलिस्ट के साथ काम करने के लिए हमें इसे पहले आयात करना होगा जैसा कि नीचे दिखाया गया है -

"प्रतिक्रिया-मूल" से

आयात करें { सेक्शनलिस्ट , टेक्स्ट, व्यू, स्टाइलशीट};

एक बार आयात हो जाने के बाद, मुझे सेक्शनलिस्ट में दिखाए जाने वाले डेटा की आवश्यकता होती है। डेटा इस.state.data के अंदर संग्रहीत किया जाता है जैसा कि नीचे दिखाया गया है -

this.state ={ डेटा:[{शीर्षक:"जावास्क्रिप्ट फ्रेमवर्क", डेटा:["कोणीय", "ReactJS", "VueJS", "ReactNative"]}, {शीर्षक:"PHP फ्रेमवर्क", डेटा:["लारवेल", "कोडइग्निटर", "केकपीएचपी", "सिम्फनी"] } ]};

रेंडरआइटम के लिए फ़ंक्शन लागू करने के लिए

नीचे दिया गया फ़ंक्शन आइटम को लेने और टेक्स्ट घटक में उसे प्रदर्शित करने का ध्यान रखता है जैसा कि नीचे दिखाया गया है -

renderItem =({आइटम}) => {रिटर्न (  {item}  );};

टेक्स्ट घटक आइटम प्रदर्शित करता है और व्यू कंपोनेंट के अंदर लपेटा जाता है।

अनुभाग सूची को लागू करने के लिए

यहां सेक्शनलिस्ट कार्यान्वयन है जिसमें डेटा, रेंडरइटम, कीएक्सट्रैक्टर और रेंडरसेक्शन हैडर प्रॉप्स हैं।

<पूर्व>शैली देखें={styles.container}> index} renderSectionHeader={({ section:{ शीर्षक } }) => (

this.state.data डेटा . को दिया जाता है प्रॉप्स और this.renderItem फ़ंक्शन को रेंडरआइटम . को असाइन किया गया है सहारा.

अपने डेटा के आधार पर आप प्रमुख संपत्ति बता सकते हैं जो डेटा सरणी से एक अद्वितीय होगी और वही प्रॉप्स को दी जानी चाहिए keyExtractor .यदि नहीं दिया गया तो यह सरणी अनुक्रमणिका को कुंजी . के रूप में मानेगा मूल्य।

तो यहां अद्वितीय कुंजी आइटम+इंडेक्स है और इसे keyExtractor को सौंपा गया है।

keyExtractor={(आइटम, इंडेक्स) => आइटम + इंडेक्स}

रेंडरसेक्शन हैडर प्रॉप्स हेडर को प्रदर्शित करने का ध्यान रखते हैं।

<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {धारासूची, पाठ, दृश्य, स्टाइलशीट} आयात करें; निर्यात डिफ़ॉल्ट वर्ग ऐप प्रतिक्रिया बढ़ाता है। घटक {कन्स्ट्रक्टर () {सुपर (); this.state ={डेटा:[{शीर्षक:"जावास्क्रिप्ट फ्रेमवर्क", डेटा:["कोणीय", "ReactJS", "VueJS", "ReactNative"]}, {शीर्षक:"PHP फ्रेमवर्क", डेटा:["लारवेल ", "कोडइग्निटर", "केकपीएचपी", "सिम्फनी"] } ] };}renderItem =({आइटम}) => {रिटर्न (<स्टाइल देखें={styles.item}> <टेक्स्ट> {आइटम} ) ) => अनुक्रमणिका} रेंडरसेक्शनहेडर ={({अनुभाग:{शीर्षक}}) => ( }}कॉन्स्ट स्टाइल =स्टाइलशीट.क्रिएट ({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:20, मार्जिन हॉरिजॉन्टल:16}, आइटम:{बैकग्राउंड कलर:"#ccc2ff", पैडिंग:20, मार्जिनवर्टिकल:8}, हेडर:{ फॉन्ट साइज:32, पृष्ठभूमिरंग:"#fff" }});

आउटपुट

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

उदाहरण 2

अनुभाग सूची में स्टिकीसेक्शन हैडर सक्षम प्रोप सक्षम करना

प्रॉप्स स्टिकीसेक्शनहेडर्स इनेबल्ड आपको अपने सेक्शन लिस्ट के हेडर को सबसे ऊपर रखने में मदद करता है। एक बार जब उपयोगकर्ता स्क्रॉल करता है तो अगला हेडर दिखाई देता है और शीर्ष पर पहुंच जाता है, यह शीर्ष पर चिपक जाएगा और यह सभी हेडर के लिए समान रहेगा।

<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {धारासूची, पाठ, दृश्य, स्टाइलशीट} आयात करें; निर्यात डिफ़ॉल्ट वर्ग ऐप प्रतिक्रिया बढ़ाता है। घटक {कन्स्ट्रक्टर () {सुपर (); this.state ={डेटा:[{शीर्षक:"जावास्क्रिप्ट फ्रेमवर्क", डेटा:["कोणीय", "ReactJS", "VueJS", "ReactNative"]}, {शीर्षक:"PHP फ्रेमवर्क", डेटा:["लारवेल ", "कोडइग्निटर", "केकपीएचपी", "सिम्फनी"]}, {शीर्षक:"अपाचे फ्रेमवर्क", डेटा:["अपाचे फ्लेक्स", "अपाचे क्रंच", "अपाचे कॉच डीबी", "अपाचे क्रेल"]}]}; } रेंडरआइटम =({आइटम}) => {रिटर्न ( }; रेंडर () {रिटर्न ( } रेंडरसेक्शनहेडर ={({अनुभाग:{शीर्षक}}) => ( }}कॉन्स्ट स्टाइल =स्टाइलशीट.क्रिएट ({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:20, मार्जिन हॉरिजॉन्टल:16}, आइटम:{बैकग्राउंड कलर:"#ccc2ff", पैडिंग:20, मार्जिनवर्टिकल:8}, हेडर:{ फॉन्ट साइज:32, पृष्ठभूमिरंग:"#fff" }});

आउटपुट

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