View: چیست، ویژگی‌های کانتینر و React Native

View در React Native چیست

View کامپوننت بنیادی React Native است که به عنوان کانتینری برای سایر کامپوننت‌ها عمل می‌کند. این کامپوننت از استایل‌دهی از طریق StyleSheet، چیدمان از طریق Flexbox، پردازش لمس، انیمیشن‌ها و تغییر شکل‌ها پشتیبانی می‌کند. View یک لایه انتزاعی بر روی عناصر کانتینر بومی است: UIView در iOS و android.view.View در Android.

در React Native نمی‌توان از عناصر HTML استفاده کرد — در عوض همه چیدمان‌ها از View ساخته می‌شوند. حتی Text و Image معمولاً برای موقعیت‌دهی در View قرار می‌گیرند. کامپوننت می‌تواند خالی (فقط کانتینر) باشد یا هر تعداد عنصر فرزند با هر عمقی داشته باشد.

View از رندر روی هر دو پلتفرم از یک کد JavaScript پشتیبانی می‌کند. ویژگی‌های Flexbox، حاشیه‌ها، پس‌زمینه، سایه‌ها و مرزها در iOS و Android یکسان کار می‌کنند. تفاوت‌های پلتفرمی حداقل هستند — مثلاً سایه‌ها در iOS از shadowColor/shadowOffset استفاده می‌کنند و در Android از elevation.

بر اساس React Native Layout Docs, 2024، View برای دستگاه‌های موبایل بهینه شده است: در بهینه‌سازی flatten نمایش‌های بومی اضافی ایجاد نمی‌کند و به‌روزرسانی آبشاری را هنگام تغییر استایل‌های والد به درستی پردازش می‌کند.

ویژگی‌ها و API کامپوننت View

کامپوننت View مجموعه غنی از props برای مدیریت ظاهر، مکان و تعامل دارد. همه props به چند دسته تقسیم می‌شوند: استایلی، رویدادهای لمسی، دسترسی و ویژگی‌های پلتفرمی. بیایید گروه‌های کلیدی را بررسی کنیم.

props استایلی View

View از تمام ویژگی‌های CSS استاندارد برای پلتفرم‌های موبایل پشتیبانی می‌کند. اصلی‌ترین آنها: flexDirection، justifyContent، alignItems برای موقعیت‌دهی؛ margin، padding برای حاشیه‌ها؛ backgroundColor، borderRadius برای ظاهر؛ width، height، maxHeight برای اندازه‌ها.

رویدادهای لمسی و حرکات

View می‌تواند رویدادهای لمسی را از طریق propsهای onStartShouldSetResponder، onMoveShouldSetResponder و onResponderGrant پردازش کند. این رویدادها امکان پیاده‌سازی حرکات سفارشی بدون کتابخانه را فراهم می‌کنند. برای کلیک‌های استاندارد از onTouchStart، onTouchEnd و onPress (از طریق Pressable یا TouchableOpacity) استفاده می‌شود.

props پلتفرمی

در iOS برای سایه‌ها shadowColor، shadowOffset، shadowOpacity، shadowRadius در دسترس هستند. در Android این ویژگی‌ها نادیده گرفته می‌شوند — به جای آنها از elevation استفاده می‌شود. callbackهای onLayout هنگام تغییر اندازه View فراخوانی می‌شوند که برای چیدمان‌های تطبیقی مفید است.

چیدمان با View و Flexbox

Flexbox تنها مکانیزم چیدمان در React Native است (برخلاف Web که Grid و Float در دسترس هستند). تمام موقعیت‌دهی عناصر از طریق ویژگی‌های Flexbox کامپوننت View انجام می‌شود. به طور پیش‌فرض flexDirection در View روی column تنظیم شده است، نه row مانند Web، که با جهت عمودی صفحه‌های موبایل مطابقت دارد.

ویژگی‌های اصلی Flexbox در View

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 با div HTML

اگرچه View از نظر مفهومی شبیه div HTML است، تفاوت‌های کلیدی بین آنها وجود دارد که هنگام انتقال کد از Web به React Native مهم است. این تفاوت‌ها به رندر، استایل‌ها و رفتار پیش‌فرض مربوط می‌شوند.

مهمترین تفاوت — پیش‌فرض flexDirection: column. این بدان معناست که بدون تنظیم صریح، عناصر فرزند به صورت عمودی قرار می‌گیرند، نه افقی. تفاوت دوم: width و height View به طور پیش‌فرض به تمام فضای موجود والد گسترش می‌یابند (معادل width: 100% در CSS).

مثال‌های عملی با View

دو مثال واقعی از استفاده از View در برنامه‌های React Native را بررسی می‌کنیم: وسط‌چین کردن محتوا در تمام صفحه و ایجاد شبکه تطبیقی از کارت‌ها. هر دو الگو در هر پروژه‌ای یافت می‌شوند.

مثال 1: صفحه placeholder با وسط‌چین کردن

برای ایجاد حالت خالی (empty state) از View با flex: 1 و وسط‌چین کردن در هر دو محور استفاده می‌شود. این الگوی استاندارد برای صفحه‌های بارگذاری، خطا و لیست‌های خالی است.

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 },
});

ترکیب justifyContent: center و alignItems: center در View با flex: 1 محتوا را در هر دو محور در کل صفحه وسط‌چین می‌کند. این رایج‌ترین الگوی استفاده از View در React Native است.

مثال 2: شبکه کارت‌ها با Flexbox

برای نمایش دو ستونه محصولات یا مقالات از View با flexDirection: row، flexWrap: wrap و Viewهای فرزند با عرض ثابت استفاده می‌شود. این الگو جایگزین CSS Grid در React Native است.

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 },
});

در این مثال View بیرونی با flexWrap: wrap مانند معادل CSS Grid عمل می‌کند. هر کارت 48% عرض را اشغال می‌کند و فاصله‌هایی بین ستون‌ها باقی می‌گذارد. این الگوی معمول برای کاتالوگ‌ها و خوراک محتوا است.