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

<घंटा/>

FlatList एक कंटेनर है जिसका उपयोग सूची आइटम लोड करने के लिए किया जा सकता है। यह हेडर और फुटर सपोर्ट, मल्टीपल कॉलम सपोर्ट, वर्टिकल/हॉरिजॉन्टल स्क्रॉलिंग, आलसी लोडिंग आदि के साथ आता है।

यहाँ FlatList की कुछ महत्वपूर्ण विशेषताएं हैं -

स्क्रॉल लोडिंग के साथ आता है
स्क्रॉलटोइंडेक्स समर्थन का उपयोग करके स्क्रॉल को समायोजित करने में सक्षम
शीर्षलेख और पादलेख समर्थन के साथ आता है
एकाधिक कॉलम समर्थन
क्रॉस प्लेटफॉर्म
कॉन्फ़िगर करने योग्य दर्शनीयता कॉलबैक

FlatList की मूल संरचना इस प्रकार है -

 item.id} />

FlatList को VirtualizedList घटक से कार्यान्वित किया जाता है जो सीमित संख्या में आइटम प्रदर्शित करने का ध्यान रखता है जो आपके मोबाइल स्क्रीन के वर्तमान दृश्य पोर्ट में फिट होंगे। शेष डेटा उपयोगकर्ता स्क्रॉल के रूप में प्रस्तुत किया जाता है। डेटा और रेंडरइटम जैसे बुनियादी प्रॉप्स का उपयोग फ़्लैटलिस्ट बनाने के लिए किया जा सकता है।

फ़्लैटलिस्ट के साथ काम करने के लिए आपको इसे रिएक्ट-नेटिव से इस प्रकार आयात करना होगा -

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

आयात { FlatList};

FlatList के कुछ महत्वपूर्ण गुण नीचे सूचीबद्ध हैं -

Props	विवरण
डेटा	एक सरणी जिसमें प्रदर्शित होने वाला डेटा है।
आइटम प्रस्तुत करें	renderItem({आइटम, इंडेक्स, सेपरेटर्स}); आइटम - यह डेटा फ़ील्ड से आइटम है जो सूची प्रारूप में प्रदर्शित होता है। सूचकांक - प्रत्येक आइटम को एक अनुक्रमणिका दी जाती है। सेपरेटर्स - एक ऐसा फंक्शन है जो प्रॉप्स को रेंडर करने में मदद करता है। उपलब्ध फंक्शन हैं - separators.highlight(),separators.unhighlight(),separators.updateProps().
ListEmptyComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या एक रेंडर तत्व जो सूची खाली होने पर लागू हो जाएगा। यदि आप सूची खाली होने पर कुछ करना चाहते हैं तो यह घटक सहायक होगा।
ListFooterComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या एक रेंडर तत्व जो सभी वस्तुओं के नीचे प्रस्तुत किया जाएगा।
ListFooterComponentStyle	पाद लेख घटक के लिए आवश्यक स्टाइलिंग यहां की जा सकती है।
ListHeaderComponent	एक घटक वर्ग, एक रेंडर फ़ंक्शन या एक रेंडर तत्व जो सभी वस्तुओं के शीर्ष पर प्रदान किया जाएगा।
ListHeaderComponentStyle	हेडर घटक के लिए आवश्यक स्टाइलिंग यहां की जा सकती है।
क्षैतिज	यदि यह गुण सत्य पर सेट किया जाता है तो आइटम क्षैतिज रूप से रेंडर करेगा।
कुंजी एक्सट्रैक्टर	दी गई अनुक्रमणिका के लिए अद्वितीय कुंजी निकालता है। कुंजी का उपयोग कैशिंग के लिए किया जाता है और आइटम को पुन:क्रमित करने के लिए भी किया जाता है। (आइटम:ऑब्जेक्ट, इंडेक्स:संख्या) => स्ट्रिंग;

उदाहरण 1:FlatList में आइटम को लंबवत रूप से प्रदर्शित करना

उदाहरण FlatList के कार्य को दर्शाता है। FlatList के साथ काम करने के लिए पहले घटक आयात करें -

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

आयात करें { FlatList , Text, View, StyleSheet };

मुझे फ़्लैटलिस्ट के साथ-साथ टेक्स्ट, व्यू, स्टाइलशीट आदि जैसे अन्य घटकों की आवश्यकता है। जैसा कि ऊपर दिखाया गया है, उन्हें आयात किया जाता है।

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

this.state ={ डेटा:[ {नाम:"जावास्क्रिप्ट फ्रेमवर्क", isTitle:true}, { नाम:"कोणीय", isTitle:false }, { नाम:"ReactJS", isTitle:false }, { नाम :"VueJS", isTitle:false }, {name:"ReactNative", isTitle:false}, {name:"PHP Frameworks", isTitle:true}, {name:"Laravel", isTitle:false}, { name:"CodeIgniter", isTitle:false }, { name:"KakePHP", isTitle:false }, {name:"Symfony", isTitle:false }], स्टिकीहैडरइंडिसेस:[]};

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

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

रेंडरइटम =({आइटम}) => {रिटर्न ( .isTitle) ? "लाल" :"ग्रे"}}>{item.name}  );};

टेक्स्ट कंपोनेंट को व्यू कंपोनेंट के अंदर लपेटा जाता है। item.isTitle परिवर्तनशील है, इसकी जाँच की जाती है कि क्या यह सही/गलत है, और तदनुसार इसे बोल्ड किया जाता है, साथ ही इसे रंग भी दिया जाता है।

फ्लैटलिस्ट लागू करने के लिए

यहाँ फ़्लैटलिस्ट कार्यान्वयन है जिसमें डेटा और रेंडरआइटम प्रॉप्स हैं।

<देखें शैली={styles.container}>  item.name} />

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

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

इसलिए हमने नाम को अद्वितीय कुंजी माना है और इसे keyExtractor को सौंपा गया है।

keyExtractor={item => item.name}

यहाँ पूरा कोड है जो FlatList को लागू करता है।
<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {फ्लैटलिस्ट, टेक्स्ट, व्यू, स्टाइलशीट, स्टेटसबार}; निर्यात डिफ़ॉल्ट वर्ग ऐप रिएक्ट का विस्तार करता है। घटक {कन्स्ट्रक्टर () {सुपर (); this.state ={डेटा:[{नाम:"जावास्क्रिप्ट फ्रेमवर्क", शीर्षक:सत्य}, {नाम:"कोणीय", शीर्षक:झूठा}, {नाम:"ReactJS", शीर्षक:झूठा}, { नाम:"VueJS" ", isTitle:false }, { name:"ReactNative", isTitle:false}, {name:"PHP Frameworks", isTitle:true}, {name:"Laravel", isTitle:false}, { name:"CodeIgniter" , isTitle:false }, { name:"KakePHP", isTitle:false }, {name:"Symfony", isTitle:false } ], स्टिकीहैडरइंडिसेस:[] }; } रेंडरइटम =({आइटम}) => {रिटर्न (<व्यू स्टाइल ={स्टाइल्स.आइटम}> <टेक्स्ट स्टाइल ={{ फॉन्टवेट:(आइटम.इसटाइटल)? "बोल्ड":"", रंग:(आइटम.इसटाइटल) ) ? "लाल" :"ग्रे"}}>{item.name});};render() { वापसी (<शैली देखें={styles.container}> item.name} चिपचिपाHeaderIndices={this.state.stickyHeaderIndices} />); }}कॉन्स्ट स्टाइल =StyleSheet.create({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:StatusBar.currentHeight || 0,}, आइटम:{मार्जिन:10, पैडिंग:20, मार्जिन वर्टिकल:8, मार्जिन हॉरिजॉन्टल:16,}});
आउटपुट

उदाहरण 2:FlatList में क्षैतिज रूप से आइटम प्रदर्शित करना

फ़्लैटलिस्ट आइटम को क्षैतिज रूप से प्रदर्शित करने के लिए आपको बस अपने फ़्लैटलिस्ट घटक में प्रोप क्षैतिज ={सत्य} जोड़ना होगा।
<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {फ्लैटलिस्ट, टेक्स्ट, व्यू, स्टाइलशीट, स्टेटसबार}; निर्यात डिफ़ॉल्ट वर्ग ऐप रिएक्ट का विस्तार करता है। घटक {कन्स्ट्रक्टर () {सुपर (); this.state ={डेटा:[{नाम:"जावास्क्रिप्ट फ्रेमवर्क", शीर्षक:सत्य}, {नाम:"कोणीय", शीर्षक:झूठा}, {नाम:"ReactJS", शीर्षक:झूठा}, { नाम:"VueJS" ", isTitle:false }, { name:"ReactNative", isTitle:false}, {name:"PHP Frameworks", isTitle:true}, {name:"Laravel", isTitle:false}, { name:"CodeIgniter" , isTitle:false }, { name:"KakePHP", isTitle:false }, {name:"Symfony", isTitle:false } ], स्टिकीहैडरइंडिसेस:[] }; } रेंडरइटम =({आइटम}) => {रिटर्न (<व्यू स्टाइल ={स्टाइल्स.आइटम}> <टेक्स्ट स्टाइल ={{ फॉन्टवेट:(आइटम.इसटाइटल)? "बोल्ड":"", रंग:(आइटम.इसटाइटल) ) ? "लाल" :"ग्रे"}}>{item.name});}; रेंडर () {वापसी (<स्टाइल देखें ={styles.container}> <फ्लैटलिस्ट क्षैतिज ={सच} डेटा ={यह। राज्य। डेटा} रेंडरइटम ={यह। रेंडरइटम} keyExtractor ={आइटम => आइटम। नाम} स्टिकीहेडरइंडिस ={this.state.stickyHeaderIndices} />); }}कॉन्स्ट स्टाइल्स =स्टाइलशीट.क्रिएट ({कंटेनर:{फ्लेक्स:1, मार्जिनटॉप:100,}, आइटम:{फ्लेक्सडायरेक्शन:'पंक्ति', जस्टिफाई कंटेंट:'स्पेस-बीच', एलाइन इटम्स:'सेंटर', पैडिंग:30, मार्जिन:2, बॉर्डर कलर:'#2a4944', बॉर्डरविड्थ:1, ऊंचाई:100, बैकग्राउंड कलर:'#d2f7f1' }});
आउटपुट