React Native में ScrollView कंपोनेंट क्या है और इसका उपयोग कैसे करें?

ScrollView एक स्क्रॉलिंग कंटेनर है जो कई कंपोनेंट्स और व्यूज़ को समायोजित कर सकता है। यह रिएक्ट नेटिव में कोर कंपोनेंट्स में से एक है और इसका उपयोग करके आप वर्टिकली और हॉरिजॉन्टली दोनों तरह से स्क्रॉल कर सकते हैं।

ScrollView उस प्लेटफॉर्म के आधार पर अपने नेटिव समकक्ष को मैप करेगा जिस पर यह चल रहा है। इसलिए एंड्रॉइड पर व्यू <ScrollView> पर मैप होगा, iOS पर यह <UIScrollView> होगा और वेब एनवायरनमेंट पर <div>।

उदाहरण 1: ScrollView का उपयोग करके वर्टिकल स्क्रॉलिंग

इस उदाहरण में ScrollView में एक View के साथ एक Text कंपोनेंट है और यह एक View के अंदर लपेटा गया है।

ScrollView के साथ काम करने के लिए पहले कंपोनेंट इम्पोर्ट करें:

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

ScrollView के अंदर प्रदर्शित किए जाने वाला डेटा स्टेट ऑब्जेक्ट के अंदर 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'
    }
})

आउटपुट

उदाहरण 2: 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'
    }
})

आउटपुट