VirtualizedList घटक सबसे अच्छा होता है जब आपकी सूची आकार में बहुत बड़ी होती है। VirtualizedList बेहतर प्रदर्शन और स्मृति उपयोग में मदद करता है। जैसे ही उपयोगकर्ता स्क्रॉल करता है, डेटा उपयोगकर्ता को दिखाया जाता है।
VirtualizedList का मूल घटक इस प्रकार है &minuns;
महत्वपूर्ण वर्चुअलाइज्ड सूची गुण
| Props | विवरण |
|---|---|
| आइटम प्रस्तुत करना | डेटा से आइटम वर्चुअलाइज्ड लिस्ट में रेंडर किए जाएंगे। |
| डेटा | दिखाया जाने वाला डेटा। |
| आइटम प्राप्त करें | फ़ंक्शन जो डेटा से अलग-अलग आइटम लाएगा। |
| getItemCount | डेटा आइटम की संख्या प्राप्त करता है। |
| प्रारंभिकNumToRender | आरंभ में कितनी बार गाया जाना है। |
| कुंजी एक्सट्रैक्टर | विनिर्दिष्ट अनुक्रमणिका के लिए प्रत्येक आइटम के लिए विचार की जाने वाली अद्वितीय कुंजी। |
यहाँ VirtualizedList का एक कार्यशील उदाहरण दिया गया है।
उदाहरण:VirtualizedList का उपयोग करके डेटा का प्रदर्शन
VirtualizedList के साथ काम करने के लिए इसे पहले इस प्रकार आयात करें -
आयात करें { SafeAreaView, View, VirtualizedList, StyleSheet, Text } 'react-native' से; VirtualizedList के लिए कोड इस प्रकार है -
<आइटम शीर्षक={item.title} />} keyExtractor={item => item.id} getItemCount={getItemCount} getItem={getItem} />
रेंडर करने के लिए हम जो प्रारंभिक आइटम प्रदर्शित करना चाहते हैं, वह 4 है। रेंडरइटम प्रॉपर्टी का उपयोग आइटम को स्क्रीन पर प्रदर्शित करने के लिए किया जाता है। यह नीचे दिखाए गए अनुसार परिभाषित कस्टम आइटम घटक का उपयोग करता है -
कॉन्स्ट आइटम =({शीर्षक})=> {वापसी (<शैली देखें={styles.item}> <पाठ शैली={styles.title}>{शीर्षक} );} कुंजी निकालने वाला प्रत्येक आइटम के लिए अद्वितीय कुंजी को परिभाषित करता है।
keyExtractor={item => item.id} प्रॉप्स getItemCount उपयोगकर्ता को प्रदर्शित होने वाली वस्तुओं की कुल संख्या प्राप्त करता है। अभी यह फ़ंक्शन getItemCount को कॉल करता है जिसे निम्नानुसार परिभाषित किया गया है।
const getItemCount =(डेटा) => {रिटर्न 100;}getItemCount={getItemCount} getITem प्रॉप्स डेटा को प्रदर्शित करने के लिए है। यह विधि getItem को कॉल करता है और इसे निम्नानुसार परिभाषित किया गया है -
const getItem =(डेटा, इंडेक्स) => {रिटर्न {आईडी:इंडेक्स, शीर्षक:'टेस्ट'}}getItem={getItem} VirtualizedList प्रदर्शित करने के लिए पूरा कोड इस प्रकार है -
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {SafeAreaView, देखें, वर्चुअलाइज्ड लिस्ट, स्टाइलशीट, टेक्स्ट} 'रिएक्शन-नेटिव' से; कॉन्स्ट डेटा =[]; कॉन्स्ट गेटआइटम =(डेटा, इंडेक्स) => {रिटर्न {आईडी:अनुक्रमणिका, शीर्षक:'परीक्षण'}}const getItemCount =(डेटा) => {वापसी 100;}const Item =({शीर्षक})=> {वापसी (<शैली देखें={styles.item}> <पाठ शैली={ Styles.title}>{title} ); } const VirtualizedListExample =() => {वापसी (आउटपुट
