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

FlatList হল একটি ধারক যা তালিকা আইটেমগুলি লোড করতে ব্যবহার করা যেতে পারে। এটি হেডার এবং ফুটার সমর্থন, একাধিক কলাম সমর্থন, উল্লম্ব/অনুভূমিক স্ক্রোলিং, অলস লোডিং ইত্যাদির সাথে আসে৷

এখানে FlatList-

• স্ক্রোল লোড করার সাথে আসে
• ScrolltoIndex সমর্থন ব্যবহার করে স্ক্রোল সামঞ্জস্য করতে সক্ষম
• শিরোনাম এবং ফুটার সমর্থন সহ আসে
• একাধিক কলাম সমর্থন
• ক্রস প্ল্যাটফর্ম
• কনফিগারযোগ্য দর্শনযোগ্যতা কলব্যাক

ফ্ল্যাটলিস্টের মৌলিক গঠন নিম্নরূপ -

<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

ফ্ল্যাটলিস্ট ভার্চুয়ালাইজডলিস্ট উপাদান থেকে প্রয়োগ করা হয় যা আপনার মোবাইল স্ক্রিনের বর্তমান ভিউ পোর্টে ফিট করা সীমিত সংখ্যক আইটেম প্রদর্শনের যত্ন নেয়। বাকি ডেটা ব্যবহারকারীর স্ক্রোল হিসাবে রেন্ডার করা হয়। ফ্ল্যাটলিস্ট তৈরি করতে ডেটা এবং রেন্ডারআইটেমের মতো মৌলিক প্রপস ব্যবহার করা যেতে পারে।

FlatList এর সাথে কাজ করার জন্য আপনাকে এটিকে নিম্নরূপ প্রতিক্রিয়া-নেটিভ থেকে আমদানি করতে হবে -

import { FlatList} from "react-native";

ফ্ল্যাটলিস্টের কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য নীচে তালিকাভুক্ত করা হয়েছে -

separators.highlight(),
separators.unhighlight(),
separators.updateProps().

উদাহরণ 1:ফ্ল্যাটলিস্টে উল্লম্বভাবে আইটেমগুলি প্রদর্শন করা হচ্ছে

উদাহরণ ফ্ল্যাটলিস্টের কাজ দেখায়। ফ্ল্যাটলিস্টের সাথে কাজ করতে প্রথমে উপাদানটি আমদানি করুন -

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

আমার ফ্ল্যাটলিস্টের পাশাপাশি অন্যান্য উপাদান যেমন টেক্সট, ভিউ, স্টাইলশিট ইত্যাদি দরকার। উপরে দেখানো হিসাবে একই আমদানি করা হয়েছে।

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

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

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

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

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

টেক্সট কম্পোনেন্ট ভিউ কম্পোনেন্টের ভিতরে মোড়ানো হয়। item.isTitle ভেরিয়েবলটি সত্য/মিথ্যা কিনা তা পরীক্ষা করা হয় এবং সেই অনুযায়ী এটিকে বোল্ড করা হয়, পাশাপাশি এটিতে রঙ দেওয়া হয়৷

ফ্ল্যাটলিস্ট বাস্তবায়ন করতে

এখানে ফ্ল্যাটলিস্ট বাস্তবায়ন রয়েছে যাতে ডেটা এবং রেন্ডারআইটেম প্রপস রয়েছে।

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

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

আপনার ডেটার উপর ভিত্তি করে আপনি কী প্রপার্টি বলতে পারেন যেটি ডেটা অ্যারে থেকে একটি অনন্য হবে এবং একইটি প্রপস কী এক্সট্র্যাক্টরকে দেওয়া উচিত৷ যদি না দেওয়া হয় তবে এটি অ্যারে সূচকটিকে কী<হিসাবে বিবেচনা করবে৷ মান।

তাই আমরা নামটিকে অনন্য কী হিসাবে বিবেচনা করেছি এবং একই কী-এক্সট্র্যাক্টরকে বরাদ্দ করা হয়েছে৷

keyExtractor={item => item.name}

এখানে সম্পূর্ণ কোড রয়েছে যা ফ্ল্যাটলিস্ট প্রয়োগ করে।

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
   return (<View style={styles.container}><FlatList data={this.state.data} renderItem=   {this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

আউটপুট

উদাহরণ 2:ফ্ল্যাটলিস্টে অনুভূমিকভাবে আইটেমগুলি প্রদর্শন করা হচ্ছে

ফ্ল্যাটলিস্ট আইটেমগুলিকে অনুভূমিকভাবে প্রদর্শন করার জন্য আপনাকে আপনার ফ্ল্যাটলিস্ট উপাদানে অনুভূমিক={true} প্রপস যোগ করতে হবে।

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
   render() {
      return (<View style={styles.container}><FlatList horizontal={true}    data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name}    stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: 100,
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
});

আউটপুট