সেকশনলিস্ট কম্পোনেন্ট কি এবং রিঅ্যাক্ট নেটিভ এ কিভাবে ব্যবহার করবেন?

একটি ইন্টারফেস যা বিভাগে তালিকা রেন্ডার করতে সাহায্য করে। সেকশনলিস্টের কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য হল −

• লিস্টে হেডার/ফুটার সমর্থন
• বিভাগে হেডার/ফুটার সমর্থন
• স্ক্রোল লোড হচ্ছে
• রিফ্রেশ করতে টানুন
• সম্পূর্ণ ক্রস-প্ল্যাটফর্ম

মৌলিক সেকশনলিস্ট কম্পোনেন্ট নিচের মত দেখায় -

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

SectionList-এর সাথে কাজ করার জন্য নিচে দেখানো কম্পোনেন্ট ইম্পোর্ট করুন −

import { SectionList } from "react-native";

এখানে একটি বিভাগ তালিকা -

উদাহরণ 1:ডেটা প্রদর্শনের জন্য বিভাগ তালিকা ব্যবহার করা

SectionList-এর সাথে কাজ করার জন্য আমাদের প্রথমে নীচে দেখানো হিসাবে এটি আমদানি করতে হবে -

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

একবার আমদানি করা হয়ে গেলে, বিভাগ তালিকায় দেখানোর জন্য আমার ডেটা দরকার। নিচে দেখানো হিসাবে এই.state.data-র ভিতরে ডেটা সংরক্ষণ করা হয় -

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

রেন্ডার আইটেমের জন্য ফাংশন বাস্তবায়ন করতে

নীচের ফাংশনটি আইটেমটি নেওয়ার যত্ন নেয় এবং নীচে দেখানো টেক্সট কম্পোনেন্টে একই প্রদর্শন করে -

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};

টেক্সট কম্পোনেন্ট আইটেমগুলি প্রদর্শন করে এবং ভিউ কম্পোনেন্টের ভিতরে মোড়ানো হয়।

বিভাগ তালিকা বাস্তবায়ন করতে

এখানে সেকশনলিস্ট ইমপ্লিমেন্টেশন রয়েছে যাতে ডেটা, রেন্ডারআইটেম, কী-এক্সট্র্যাক্টর এবং রেন্ডারসেকশনহেডার প্রপস রয়েছে।

<View style={styles.container}>
   <SectionList
      sections={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index}
      renderSectionHeader={({ section: { title } }) => (
         <Text style={styles.header}>{title}</Text>
      )}
   />
</View>

this.state.data ডেটা দেওয়া হয় প্রপস এবং this.renderItem ফাংশন renderItem-এ বরাদ্দ করা হয়েছে প্রপস।

আপনার ডেটার উপর ভিত্তি করে আপনি কী প্রপার্টি বলতে পারবেন যেটি ডেটা অ্যারে থেকে একটি অনন্য হবে এবং সেটিই প্রপস 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 (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};
render() {
   return (
      <View style={styles.container}>
         <SectionList
            sections={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index}
            renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
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-এ স্টিকি সেকশন-হেডারসক্ষম প্রপস সক্ষম করা হচ্ছে

প্রপস স্টিকি সেকশনহেডারস সক্ষম আপনাকে আপনার বিভাগ তালিকার শিরোনামটিকে শীর্ষে আটকে রাখতে সহায়তা করে৷ একবার ব্যবহারকারী স্ক্রোল করলে যদি পরবর্তী শিরোনামটি দৃশ্যে আসে এবং শীর্ষে পৌঁছায় তবে এটি শীর্ষে আটকে থাকবে এবং এটি সমস্ত শিরোনামের জন্য একইভাবে চলবে৷

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 (
         <View style={styles.item}>
            <Text >
               {item}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <SectionList
               stickySectionHeadersEnabled={true}
               sections={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={(item, index) => index}
               renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

আউটপুট