React Native में SectionList कंपोनेंट क्या है और इसका उपयोग कैसे करें

एक इंटरफेस जो सेक्शन में सूचियों को रेंडर करने में मदद करता है। SectionList की कुछ महत्वपूर्ण विशेषताएं हैं:

• सूची के लिए हेडर/फुटर सपोर्ट
• सेक्शन के लिए हेडर/फुटर सपोर्ट
• स्क्रॉल लोडिंग
• पुल टू रिफ्रेश
• पूरी तरह से क्रॉस-प्लेटफॉर्म

बेसिक SectionList कंपोनेंट इस प्रकार दिखता है:

<SectionList sections={DataContainer} keyExtractor={yourkeyextractor} renderItem={yourenderItem} renderSectionHeader={yoursectionheader} />

SectionList के साथ काम करने के लिए नीचे दिखाए अनुसार कंपोनेंट इम्पोर्ट करें:

import { SectionList } from "react-native";

SectionList पर उपलब्ध महत्वपूर्ण प्रॉपर्टीज की सूची यहां दी गई है:

उदाहरण 1: डेटा प्रदर्शित करने के लिए SectionList का उपयोग

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

import { SectionList , Text, View, StyleSheet} from "react-native";

एक बार इम्पोर्ट हो जाने के बाद, मुझे SectionList में दिखाने के लिए डेटा चाहिए। डेटा इस स्टेट में स्टोर किया गया है जैसा कि नीचे दिखाया गया है:

this.state = {
    data: [
        {
            title: "Javascript Frameworks",
            data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
        },
        {
            title: "PHP Frameworks",
            data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
        }
    ]
};

renderItem के लिए फ़ंक्शन लागू करना

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

renderItem = ({ item }) => {
    return (
        
            
                {item}
            
        
    );
};

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

SectionList लागू करना

यहां SectionList का कार्यान्वयन है जिसमें data, renderItem, keyExtractor और renderSectionHeader प्रॉप्स हैं।

<View style={styles.container}>
     index}
        renderSectionHeader={({ section: { title } }) => (
            {title}
        )}
    />
</View>

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

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

तो यहां यूनिक कुंजी item+index है और वही keyExtractor को असाइन की गई है।

keyExtractor={(item, index) => item + index}

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

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                {
                    title: "Javascript Frameworks",
                    data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
                },
                {
                    title: "PHP Frameworks",
                    data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
                }
            ]
        };
    }
    renderItem = ({ item }) => {
        return (
            
                
                    {item}
                
            
        );
    };
    render() {
        return (
            
                 index}
                    renderSectionHeader={({ section: { title } }) => (
                        {title}
                    )}
                />
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:20,
        marginHorizontal: 16
    },
    item: {
        backgroundColor: "#ccc2ff",
        padding: 20,
        marginVertical: 8
    },
    header: {
        fontSize: 32,
        backgroundColor: "#fff"
    }
});

आउटपुट

उदाहरण 2

SectionList में stickySectionHeadersEnabled प्रॉप्स को सक्षम करना

प्रॉप्स stickySectionHeadersEnabled आपके SectionList के हेडर को ऊपर चिपकाने में मदद करता है। एक बार जब उपयोगकर्ता स्क्रॉल करता है यदि अगला हेडर व्यू में आता है और ऊपर पहुंचता है तो यह ऊपर चिपक जाएगा और यह सभी हेडर के लिए समान जारी रहेगा।

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                {
                    title: "Javascript Frameworks",
                    data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
                },
                {
                    title: "PHP Frameworks",
                    data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
                },
                {
                    title: "Apache Frameworks",
                    data: ["Apache Flex", "Apache Crunch", "Apache CouchDB", "Apache Crail"]
                }
            ]
        };
    }
    renderItem = ({ item }) => {
        return (
            
                
                    {item}
                
            
        );
    };
    render() {
        return (
            
                 index}
                    renderSectionHeader={({ section: { title } }) => (
                        {title}
                    )}
                />
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:20,
        marginHorizontal: 16
    },
    item: {
        backgroundColor: "#ccc2ff",
        padding: 20,
        marginVertical: 8
    },
    header: {
        fontSize: 32,
        backgroundColor: "#fff"
    }
});

आउटपुट