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 على مجموعة غنية من الخصائص للتحكم في المظهر والتخطيط والتفاعل. تنقسم جميع الخصائص إلى عدة فئات: خصائص النمط، وأحداث اللمس، والإتاحة، وميزات خاصة بالمنصة. دعنا نستعرض المجموعات الرئيسية.

خصائص نمط 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(ظل يشبه البطاقة). يتم تشغيل callback onLayout عندما تتغير أبعاد View، وهو مفيد للتخطيطات المتكيفة.

التخطيط باستخدام View و Flexbox

Flexbox هي آلية التخطيط الوحيدة في React Native (على عكس الويب، حيث يتوفر Grid و Float). يتم تحديد موضع جميع العناصر من خلال خصائص Flexbox لمكون View. افتراضيًا، يكون flexDirection في View مضبوطًا على column، وليس row كما في الويب، مما يتوافق مع الاتجاه الرأسي للشاشات المحمولة.

خصائص 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 يشبه conceptually div في HTML، إلا أن هناك اختلافات رئيسية من المهم فهمها عند نقل الكود من الويب إلى React Native. تتعلق هذه الاختلافات بالعرض والأنماط والسلوك الافتراضي.

الاختلاف الأكثر أهمية هو flexDirection: column افتراضيًا. هذا يعني أنه بدون إعداد صريح، يتم ترتيب العناصر الفرعية رأسيًا، وليس أفقيًا. الاختلاف الثاني: عرض وارتفاع View افتراضيًا يتمددان لملء كل المساحة المتاحة للأب (مشابه لـ width: 100% في CSS).

أمثلة عملية مع View

دعنا نلقي نظرة على مثالين واقعيين لاستخدام View في تطبيقات React Native: توسيط المحتوى عبر الشاشة بالكامل وإنشاء شبكة بطاقات متجاوبة. يظهر كلا النمطين في كل مشروع.

مثال 1: شاشة نائبة مع توسيط

لإنشاء حالة فارغة، يُستخدم 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 و Views فرعية بعرض ثابت. هذا النمط يحل محل 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% من العرض، تاركة فجوات بين الأعمدة. هذا نمط نموذجي للكتالوجات وتدفقات المحتوى.