View: यह क्या है, कंटेनर प्रॉपर्टीज़ और React Native

React Native में View क्या है

View एक मूलभूत React Native कंपोनेंट है जो अन्य कंपोनेंट्स के लिए कंटेनर के रूप में कार्य करता है। यह StyleSheet के माध्यम से स्टाइलिंग, Flexbox के माध्यम से लेआउट, टच हैंडलिंग, एनिमेशन और ट्रांसफ़ॉर्मेशन सपोर्ट करता है। View नेटिव कंटेनर एलिमेंट्स पर एक एब्स्ट्रैक्शन है: iOS पर UIView और Android पर android.view.View।

React Native में HTML एलिमेंट्स का उपयोग संभव नहीं है — इसके बजाय, सभी लेआउट View से बनाए जाते हैं। यहां तक कि Text और Image भी आमतौर पर पोज़िशनिंग के लिए View में लपेटे जाते हैं। कंपोनेंट खाली (सिर्फ एक कंटेनर) हो सकता है या किसी भी गहराई तक कितने भी चाइल्ड एलिमेंट्स शामिल कर सकता है।

View एक ही JavaScript कोडबेस से दोनों प्लेटफ़ॉर्म पर रेंडरिंग सपोर्ट करता है। Flexbox प्रॉपर्टीज़, मार्जिन, बैकग्राउंड, शैडो और बॉर्डर iOS और Android पर समान रूप से काम करते हैं। प्लेटफ़ॉर्म अंतर न्यूनतम हैं — उदाहरण के लिए, iOS पर शैडो shadowColor/shadowOffset का उपयोग करते हैं, जबकि Android पर elevation का।

React Native Layout Docs, 2024 के अनुसार, View मोबाइल उपकरणों के लिए ऑप्टिमाइज़ किया गया है: यह flatten ऑप्टिमाइज़ेशन के दौरान अतिरिक्त नेटिव व्यू नहीं बनाता है और पैरेंट स्टाइल बदलने पर कैस्केडिंग अपडेट को सही ढंग से हैंडल करता है।

View कंपोनेंट के प्रॉपर्टीज़ और API

View कंपोनेंट में दिखावट, लेआउट और इंटरैक्टिविटी को नियंत्रित करने के लिए प्रॉप्स का एक समृद्ध सेट है। सभी प्रॉप्स कई श्रेणियों में विभाजित हैं: स्टाइल प्रॉप्स, टच इवेंट्स, एक्सेसिबिलिटी और प्लेटफ़ॉर्म-विशिष्ट विशेषताएं। आइए मुख्य समूहों का पता लगाएं।

View स्टाइल प्रॉप्स

View मोबाइल प्लेटफ़ॉर्म के लिए सभी मानक CSS प्रॉपर्टीज़ को सपोर्ट करता है। मुख्य में शामिल हैं: पोज़िशनिंग के लिए flexDirection, justifyContent, alignItems; स्पेसिंग के लिए margin, padding; दिखावट के लिए backgroundColor, borderRadius; आकार के लिए width, height, maxHeight।

टच इवेंट्स और जेस्चर

View onStartShouldSetResponder, onMoveShouldSetResponder और onResponderGrant प्रॉप्स के माध्यम से टच इवेंट्स को हैंडल कर सकता है। ये इवेंट्स बिना लाइब्रेरी के कस्टम जेस्चर लागू करने की अनुमति देते हैं। मानक टैप के लिए, onTouchStart, onTouchEnd और onPress (Pressable या TouchableOpacity के माध्यम से) का उपयोग किया जाता है।

प्लेटफ़ॉर्म-विशिष्ट प्रॉप्स

iOS पर शैडो के लिए shadowColor, shadowOffset, shadowOpacity, shadowRadius उपलब्ध हैं। Android पर ये प्रॉपर्टीज़ अनदेखा की जाती हैं — इसके बजाय elevation का उपयोग किया जाता है (एक कार्ड-जैसी शैडो)। onLayout कॉलबैक तब ट्रिगर होता है जब View के आयाम बदलते हैं, जो अनुकूली लेआउट के लिए उपयोगी है।

View और Flexbox के साथ लेआउट

Flexbox React Native में एकमात्र लेआउट तंत्र है (वेब के विपरीत, जहां Grid और Float उपलब्ध हैं)। सभी एलिमेंट पोज़िशनिंग View कंपोनेंट के Flexbox प्रॉपर्टीज़ के माध्यम से की जाती है। डिफ़ॉल्ट रूप से, View में flexDirection column पर सेट होता है, वेब की तरह row नहीं, जो मोबाइल स्क्रीन के वर्टिकल ओरिएंटेशन से मेल खाता है।

View में Flexbox की मुख्य प्रॉपर्टीज़

flexDirection मुख्य अक्ष दिशा निर्धारित करता है: column (डिफ़ॉल्ट) या row। justifyContent मुख्य अक्ष के साथ वितरण को नियंत्रित करता है (flex-start, center, space-between)। alignItems — क्रॉस अक्ष के साथ (stretch — डिफ़ॉल्ट मान)। flex चाइल्ड एलिमेंट के लिए उपलब्ध स्थान का अनुपात निर्दिष्ट करता है।

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

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

उदाहरण एक सामान्य संरचना दिखाता है: एक बाहरी View — कार्ड, एक आंतरिक row — अवतार और टेक्स्ट ब्लॉक के साथ पंक्ति, content — नाम और भूमिका वाला कॉलम। यह नेस्टेड View संरचना किसी भी React Native स्क्रीन के लिए मानक है।

View और HTML div के बीच अंतर

हालांकि View अवधारणात्मक रूप से HTML div के समान है, कोड को वेब से React Native में पोर्ट करते समय समझने के लिए महत्वपूर्ण अंतर हैं। ये अंतर रेंडरिंग, स्टाइल और डिफ़ॉल्ट व्यवहार से संबंधित हैं।

सबसे महत्वपूर्ण अंतर डिफ़ॉल्ट रूप से flexDirection: column है। इसका मतलब है कि स्पष्ट कॉन्फ़िगरेशन के बिना, चाइल्ड एलिमेंट्स क्षैतिज रूप से नहीं, बल्कि लंबवत रूप से व्यवस्थित होते हैं। दूसरा अंतर: View की चौड़ाई और ऊंचाई डिफ़ॉल्ट रूप से पैरेंट के सभी उपलब्ध स्थान को भरने के लिए फैलती हैं (CSS में width: 100% के समान)।

View के साथ व्यावहारिक उदाहरण

आइए React Native एप्लिकेशन में View के उपयोग के दो वास्तविक उदाहरण देखें: पूर्ण स्क्रीन पर सामग्री को सेंटर करना और एक रिस्पॉन्सिव कार्ड ग्रिड बनाना। दोनों पैटर्न हर प्रोजेक्ट में दिखाई देते हैं।

उदाहरण 1: सेंटरिंग के साथ प्लेसहोल्डर स्क्रीन

खाली स्थिति बनाने के लिए, flex: 1 और दोनों अक्षों पर सेंटरिंग वाले View का उपयोग किया जाता है। यह लोडिंग स्क्रीन, एरर स्थितियों और खाली सूचियों के लिए एक मानक पैटर्न है।

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

flex: 1 वाले View में justifyContent: center और alignItems: center का संयोजन सामग्री को पूर्ण स्क्रीन पर दोनों अक्षों पर केंद्रित करता है। React Native में View का उपयोग करने का यह सबसे सामान्य पैटर्न है।

उदाहरण 2: Flexbox के साथ कार्ड ग्रिड

उत्पादों या लेखों के दो कॉलम प्रदर्शित करने के लिए, flexDirection: row, flexWrap: wrap और निश्चित चौड़ाई वाले चाइल्ड View का उपयोग किया जाता है। यह पैटर्न React Native में CSS Grid की जगह लेता है।

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

इस उदाहरण में, flexWrap: wrap वाला बाहरी View CSS Grid के समान काम करता है। प्रत्येक कार्ड 48% चौड़ाई लेता है, कॉलम के बीच अंतराल छोड़ता है। यह कैटलॉग और सामग्री फ़ीड के लिए एक सामान्य पैटर्न है।