ScrollView — এটি কী, স্ক্রোল কন্টেইনার এবং React Native

React Native-এ ScrollView কী

ScrollView একটি React Native কম্পোনেন্ট যা তার কন্টেন্টকে একটি স্ক্রোলযোগ্য কন্টেইনারে মোড়ায়। যদি কন্টেন্ট স্ক্রিনের সীমানা অতিক্রম করে, ব্যবহারকারী এটি উল্লম্ব বা অনুভূমিকভাবে স্ক্রোল করতে পারে। ScrollView মাউন্ট হওয়ার সময় সমস্ত চাইল্ড এলিমেন্ট রেন্ডার করে, সেগুলি স্ক্রিনে দৃশ্যমান হোক বা না হোক।

FlatList-এর বিপরীতে, যা শুধুমাত্র দৃশ্যমান এলিমেন্ট (লেজি রেন্ডারিং) রেন্ডার করে, ScrollView তাৎক্ষণিকভাবে সমস্ত নেটিভ ভিউ তৈরি করে। এটি ScrollView-কে ফর্ম, সেটিংস পেজ, একটি স্ক্রিনে পণ্য কার্ডের জন্য সুবিধাজনক করে তোলে — যেখানেই চাইল্ড এলিমেন্টের সংখ্যা ছোট (20-30 পর্যন্ত) হয় বা তাদের সঠিক সংখ্যা আগে থেকে জানা না থাকে।

React Native Using ScrollView, 2024 অনুসারে, ScrollView নেস্টেড স্ক্রোলিং (যেমন ScrollView-এর ভিতরে ScrollView), প্রান্তে পৌঁছালে বাউন্স ইফেক্ট, স্ক্রোল ইন্ডিকেটর, স্ন্যাপ পজিশনিং এবং জেসচার হ্যান্ডলিং সমর্থন করে। iOS-এ, ScrollView স্বয়ংক্রিয়ভাবে contentInsetAdjustmentBehavior-এর মাধ্যমে SafeArea প্যাডিং যোগ করে।

ScrollView কম্পোনেন্টের প্রপার্টি এবং API

ScrollView স্ক্রোল আচরণ, চেহারা এবং ইন্টারঅ্যাক্টিভিটি নিয়ন্ত্রণের জন্য প্রপার্টির একটি সমৃদ্ধ সেট প্রদান করে। আসুন মূল গ্রুপগুলি দেখি: স্ক্রোল নিয়ন্ত্রণ, ভিজুয়াল সেটিংস, ইভেন্ট এবং প্ল্যাটফর্ম-নির্দিষ্ট বৈশিষ্ট্য।

দিক এবং স্ক্রোল নিয়ন্ত্রণ

horizontal — স্ক্রোল দিক উল্লম্ব (ডিফল্ট) থেকে অনুভূমিকে পরিবর্তন করে। scrollEnabled — প্রয়োজন হলে স্ক্রোলিং অক্ষম করে। showsVerticalScrollIndicator এবং showsHorizontalScrollIndicator স্ক্রোল ইন্ডিকেটরের প্রদর্শন নিয়ন্ত্রণ করে। bounces (iOS) কন্টেন্টের প্রান্তে পৌঁছালে বাউন্স ইফেক্ট সক্রিয়/নিষ্ক্রিয় করে।

ScrollView ইভেন্ট

প্রধান ইভেন্ট হল onScroll, যা প্রতিটি স্ক্রোলে ফায়ার হয় এবং nativeEvent সহ একটি অবজেক্ট পাস করে যাতে contentOffset (বর্তমান অবস্থান), contentSize (কন্টেন্টের আকার), layoutMeasurement (দৃশ্যমান এলাকার আকার) থাকে। onMomentumScrollEnd ইনর্শিয়াল স্ক্রোলিং সম্পূর্ণ হওয়ার পর ফায়ার হয়। onScrollEndDrag — যখন ব্যবহারকারী স্ক্রিন থেকে আঙুল তুলে নেয়। এই ইভেন্টগুলি অসীম স্ক্রোলিং, প্যারালাক্স ইফেক্ট এবং লেজি লোডিং বাস্তবায়নে ব্যবহৃত হয়।

ref-এর মাধ্যমে প্রোগ্রামেটিক নিয়ন্ত্রণ

ScrollView ref-এর মাধ্যমে প্রোগ্রামেটিক নিয়ন্ত্রণের জন্য পদ্ধতি প্রদান করে: scrollTo({x, y, animated}) নির্দিষ্ট কোঅর্ডিনেটে স্ক্রোল করে, scrollToEnd({animated}) — কন্টেন্টের শেষ পর্যন্ত স্ক্রোল করে, flashScrollIndicators() — অস্থায়ীভাবে স্ক্রোল ইন্ডিকেটর দেখায়।

const scrollRef = useRef(null);

// উপরে স্ক্রোল করুন
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// শেষ পর্যন্ত স্ক্রোল করুন
scrollRef.current.scrollToEnd({ animated: true });

স্ক্রোলের প্রোগ্রামেটিক নিয়ন্ত্রণ প্রায়শই চ্যাট (সর্বশেষ বার্তায় অটো-স্ক্রোল), ফর্ম (ত্রুটিযুক্ত ফিল্ডে স্ক্রোল) এবং ক্যারোসেলে (প্রোগ্রামেটিক সোয়াইপিং) ব্যবহৃত হয়।

ScrollView এবং FlatList-এর মধ্যে পার্থক্য

ScrollView এবং FlatList-এর মধ্যে নির্বাচন React Native-এর মূল আর্কিটেকচারাল সিদ্ধান্তগুলির মধ্যে একটি। উভয় কম্পোনেন্টই স্ক্রোলিং প্রদান করে, কিন্তু মৌলিকভাবে ভিন্ন রেন্ডারিং কৌশল ব্যবহার করে। ScrollView সবকিছু একবারে রেন্ডার করে, FlatList — শুধুমাত্র দৃশ্যমান এলিমেন্ট।

নির্বাচনের নিয়ম: ScrollView — সেই স্ক্রিনগুলির জন্য যেখানে চাইল্ড এলিমেন্টের সংখ্যা জানা এবং 20-30-এর বেশি নয় (ব্যবহারকারী প্রোফাইল, সেটিংস ফর্ম, পণ্য পৃষ্ঠা)। FlatList — সম্ভাব্যভাবে অনেক এলিমেন্ট বিশিষ্ট তালিকার জন্য (সংবাদ ফিড, পণ্য ক্যাটালগ, চ্যাট বার্তা)। যদি কন্টেন্ট ভিন্নধর্মী হয় (হেডার, ফর্ম, কার্ড, ফুটার) — ScrollView পছন্দনীয় কারণ FlatList সমজাতীয় এলিমেন্ট আশা করে।

অনুভূমিক স্ক্রোলিং এবং পেজিনেশন

ScrollView horizontal প্রপের মাধ্যমে অনুভূমিক স্ক্রোলিং সমর্থন করে, যা এটি ক্যারোসেল, ইমেজ গ্যালারি, ট্যাব এবং অনুভূমিক তালিকার জন্য আদর্শ করে তোলে। pagingEnabled প্রপ (iOS) বা snapToInterval-এর সাথে মিলিত হলে, ScrollView পেজ-ভিত্তিক নেভিগেশনের জন্য একটি কম্পোনেন্টে পরিণত হয়।

অনুভূমিক ক্যারোসেল

horizontal প্রপার্টি স্ক্রোল দিক পরিবর্তন করে। pagingEnabled (iOS) পেজ-ভিত্তিক স্ক্রোলিং সক্রিয় করে, যেখানে স্ক্রোল শুধুমাত্র এলিমেন্ট সীমানায় থামে। snapToInterval উভয় প্ল্যাটফর্মের জন্য পিক্সেলে স্ন্যাপ ধাপ নির্ধারণ করে।

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

এই ক্যারোসেলে, pagingEnabled স্বয়ংক্রিয়ভাবে প্রতিটি ছবির সীমানায় স্ক্রোল স্ন্যাপ করে। onMomentumScrollEnd বর্তমান পেজ ইন্ডিকেটর আপডেট করার সুযোগ দেয়। এই ধরনের ক্যারোসেল নেটিভভাবে চলে এবং ইনর্শিয়াল স্ক্রোলিং সমর্থন করে।

স্ন্যাপ পজিশনিং

অ-মানক স্ন্যাপ ধাপের জন্য, snapToInterval (পিক্সেলে ধাপের আকার) এবং snapToAlignment (start, center, end) ব্যবহার করুন। snapToOffsets ব্যবহার করে আপনি স্ন্যাপের জন্য নির্দিষ্ট অবস্থানের একটি অ্যারে নির্দিষ্ট করতে পারেন। এটি বিভিন্ন আকারের কার্ড সহ অনুভূমিক তালিকার জন্য উপযোগী।

ScrollView-এর ব্যবহারিক উদাহরণ

আসুন দুটি সাধারণ পরিস্থিতি দেখি: একটি ফর্ম স্ক্রিন (উল্লম্ব স্ক্রোল) এবং একটি অনুভূমিক ক্যাটাগরি তালিকা। উভয়ই সর্বোত্তম আচরণের জন্য বিভিন্ন প্রপ সহ ScrollView ব্যবহার করে।

উদাহরণ 1: ফর্ম সহ প্রোফাইল স্ক্রিন

প্রোফাইল সম্পাদনা পৃষ্ঠায় ভিন্নধর্মী এলিমেন্ট থাকে: অ্যাভতার, বেশ কয়েকটি ইনপুট ফিল্ড, সুইচ এবং একটি সেভ বাটন। ScrollView সম্পূর্ণ পৃষ্ঠাটি একসাথে স্ক্রোল করার অনুমতি দেয়, প্রতিটি ব্লক আলাদাভাবে নয়।

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled' প্রপ কীবোর্ড খোলা থাকাকালীন ফর্মের সাথে স্ক্রোল এবং ইন্টারঅ্যাকশনের অনুমতি দেয়। contentContainerStyle সমস্ত কন্টেন্টে প্যাডিং প্রয়োগ করে। এই প্যাটার্নটি React Native-এর সমস্ত ফর্ম স্ক্রিনে ব্যবহৃত হয়।

উদাহরণ 2: অনুভূমিক ক্যাটাগরি তালিকা

ক্যাটাগরি (চ্যাট, ফিল্টার, ট্যাব) নেভিগেট করার জন্য, চিপ সহ একটি অনুভূমিক ScrollView ব্যবহার করা হয়। এই ধরনের কম্পোনেন্ট সাধারণত মার্কেটপ্লেস এবং সোশ্যাল মিডিয়া অ্যাপ্লিকেশনে পাওয়া যায়।

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

ইন্ডিকেটর বন্ধ সহ একটি অনুভূমিক ScrollView ক্যাটাগরি স্ট্রিপের জন্য মানক। প্রতিটি চিপ নির্বাচন অবস্থা সহ একটি পৃথক কম্পোনেন্ট। showsHorizontalScrollIndicator: false প্রপ স্ক্রোল বার সরিয়ে দেয়, যা মোবাইল অ্যাপ ব্যবহারকারীদের প্রত্যাশার সাথে মিলে যায়।