React Native-এ ScrollView কম্পোনেন্ট কী এবং এর ব্যবহার

ScrollView একটি স্ক্রোলিং কন্টেইনার যা একাধিক কম্পোনেন্ট এবং ভিউ ধারণ করতে পারে। এটি React Native-এ একটি কোর কম্পোনেন্ট এবং এর মাধ্যমে আপনি উভয় দিকেই (ভার্টিক্যালি এবং হরিজন্টালি) স্ক্রোল করতে পারেন।

ScrollView প্ল্যাটফর্ম অনুযায়ী তার নেটিভ সমতুল্যে ম্যাপ হয়। অ্যান্ড্রয়েডে ভিউ <ScrollView>-এ ম্যাপ হবে, iOS-এ <UIScrollView>-এ এবং ওয়েব এনভায়রনমেন্টে <div>-এ।

উদাহরণ ১: ScrollView দিয়ে ভার্টিক্যাল স্ক্রোলিং

এই উদাহরণে ScrollView-এ একটি View সহ Text কম্পোনেন্ট থাকে এবং তা একটি View-র ভেতরে র‍্যাপ করা থাকে।

ScrollView-এ কাজ করতে হলে প্রথমে কম্পোনেন্টটি ইম্পোর্ট করুন:

import { Text, View, StyleSheet, ScrollView } from 'react-native';

ScrollView-এ দেখানোর ডেটা state অবজেক্টের names-এ সংরক্ষিত থাকে নিচের মতো:

state = {
    names: [
        {'name': 'Ben', 'id': 1},
        {'name': 'Susan', 'id': 2},
        {'name': 'Robert', 'id': 3},
        {'name': 'Mary', 'id': 4},
        {'name': 'Daniel', 'id': 5},
        {'name': 'Laura', 'id': 6},
        {'name': 'John', 'id': 7},
        {'name': 'Debra', 'id': 8},
        {'name': 'Aron', 'id': 9},
        {'name': 'Ann', 'id': 10},
        {'name': 'Steve', 'id': 11},
        {'name': 'Olivia', 'id': 12}
    ]
}

ডেটা অর্থাৎ this.state.names একটি অ্যারে। অ্যারেতে map() মেথড ব্যবহার করা হয় এবং নাম View->Text কম্পোনেন্টে ডিসপ্লে করা হয় নিচের মতো:

    {this.state.names.map((item, index) => ({item.name}))}

ScrollView স্ট্যাটিক ডেটা যা ছোট আকারের, সেটি জন্য সেরা কাজ করে। কিন্তু ডাইনামিক এবং বড় লিস্টের জন্য FlatList কম্পোনেন্ট ব্যবহার করা ভালো।

ScrollView-এর পুরো কোড:

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            
                
                    {this.state.names.map((item, index) => ({item.name}))}
                
            
        );
    }
}
export default ScrollViewExample;

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        backgroundColor: '#d2f7f1'
    }
})

আউটপুট

উদাহরণ ২: ScrollView দিয়ে হরিজন্টাল স্ক্রোলিং

ডিফল্টলি ScrollView ডেটা ভার্টিক্যালি দেখায়। হরিজন্টালি দেখাতে horizontal={true} প্রপস ব্যবহার করুন নিচের মতো:

    {this.state.names.map((item, index) => ({item.name}))}

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
    state = {
        names: [
            {'name': 'Ben', 'id': 1},
            {'name': 'Susan', 'id': 2},
            {'name': 'Robert', 'id': 3},
            {'name': 'Mary', 'id': 4},
            {'name': 'Daniel', 'id': 5},
            {'name': 'Laura', 'id': 6},
            {'name': 'John', 'id': 7},
            {'name': 'Debra', 'id': 8},
            {'name': 'Aron', 'id': 9},
            {'name': 'Ann', 'id': 10},
            {'name': 'Steve', 'id': 11},
            {'name': 'Olivia', 'id': 12}
        ]
    }
    render(props) {
        return (
            
                
                    {this.state.names.map((item, index) => ({item.name}))}
                
            
        );
    }
}
export default ScrollViewExample;

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        height: 100,
        backgroundColor: '#d2f7f1'
    }
})

আউটপুট