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% প্রস্থ নেয়, কলামগুলির মধ্যে ফাঁক রেখে। এটি ক্যাটালগ এবং কন্টেন্ট ফিডের জন্য একটি সাধারণ প্যাটার্ন।