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 موبائل آلات کے لیے بہتر بنایا گیا ہے: یہ فلیٹن آپٹیمائزیشن کے دوران اضافی مقامی ویوز نہیں بناتا اور والدین کے اسٹائل تبدیل ہونے پر جھرن والی اپ ڈیٹس کو صحیح طریقے سے ہینڈل کرتا ہے۔

View جزو کی خصوصیات اور API

View جزو میں ظاہری شکل، لے آؤٹ اور انٹرایکٹیویٹی کو کنٹرول کرنے کے لیے props کا ایک بھرپور سیٹ ہے۔ تمام props کئی زمروں میں تقسیم ہوتے ہیں: اسٹائل props، ٹچ ایونٹس، رسائی اور پلیٹ فارم کے لیے مخصوص خصوصیات۔ آئیے اہم گروپس کا جائزہ لیتے ہیں۔

View اسٹائل Props

View موبائل پلیٹ فارمز کے لیے تمام معیاری CSS خصوصیات کو سپورٹ کرتا ہے۔ اہم میں شامل ہیں: پوزیشننگ کے لیے flexDirection، justifyContent، alignItems؛ فاصلے کے لیے margin، padding؛ ظاہری شکل کے لیے backgroundColor، borderRadius؛ سائز کے لیے width، height، maxHeight۔

ٹچ ایونٹس اور جیسچرز

View onStartShouldSetResponder، onMoveShouldSetResponder اور onResponderGrant props کے ذریعے ٹچ ایونٹس کو ہینڈل کر سکتا ہے۔ یہ ایونٹس لائبریری کے بغیر کسٹم جیسچرز لاگو کرنے کی اجازت دیتے ہیں۔ معیاری ٹیپ کے لیے، onTouchStart، onTouchEnd اور onPress (Pressable یا TouchableOpacity کے ذریعے) استعمال ہوتے ہیں۔

پلیٹ فارم کے لیے مخصوص Props

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% لیتا ہے، کالموں کے درمیان خلا چھوڑتا ہے۔ یہ کیٹلاگ اور مواد کی فیڈز کے لیے ایک عام پیٹرن ہے۔