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 प्रॉप स्क्रॉल बार को हटाता है, जो मोबाइल ऐप उपयोगकर्ताओं की अपेक्षाओं से मेल खाता है।