ScrollView — ما هو، حاوية التمرير و React Native

ما هو ScrollView في React Native

ScrollView هو مكون React Native يغلف محتواه في حاوية قابلة للتمرير. إذا تجاوز المحتوى حدود الشاشة، يمكن للمستخدم التمرير خلاله عمودياً أو أفقياً. يقوم ScrollView بعرض جميع العناصر الفرعية عند التثبيت، بغض النظر عما إذا كانت مرئية على الشاشة أم لا.

على عكس FlatList، الذي يعرض فقط العناصر المرئية (العرض البطيء)، يقوم ScrollView بإنشاء جميع العروض الأصلية فوراً. هذا يجعل ScrollView مناسباً للنماذج وصفحات الإعدادات وبطاقات المنتجات على شاشة واحدة — في أي مكان يكون فيه عدد العناصر الفرعية صغيراً (حتى 20-30) أو تكون كميتها الدقيقة غير معروفة مسبقاً.

وفقاً لـ React Native Using ScrollView، 2024، يدعم ScrollView التمرير المتداخل (مثل ScrollView داخل ScrollView)، وتأثير الارتداد عند الوصول إلى الحافة، ومؤشرات التمرير، وتحديد المواقع بالالتقاط، ومعالجة الإيماءات. على iOS، يضيف ScrollView تلقائياً مساحة SafeArea من خلال contentInsetAdjustmentBehavior.

خصائص وAPI لمكون ScrollView

ScrollView يوفر مجموعة غنية من الخصائص للتحكم في سلوك التمرير والمظهر والتفاعل. دعنا نلقي نظرة على المجموعات الرئيسية: التحكم في التمرير، الإعدادات البصرية، الأحداث، والميزات الخاصة بالمنصة.

التحكم في الاتجاه والتمرير

horizontal — يغير اتجاه التمرير من العمودي (الافتراضي) إلى الأفقي. scrollEnabled — يعطل التمرير عند الحاجة. showsVerticalScrollIndicator و showsHorizontalScrollIndicator يتحكمان في عرض مؤشرات التمرير. bounces (iOS) يقوم بتشغيل/إيقاف تأثير الارتداد عند الوصول إلى حافة المحتوى.

أحداث ScrollView

الحدث الرئيسي هو onScroll، الذي يتم استدعاؤه عند كل تمرير ويمرر كائنًا مع nativeEvent يحتوي على contentOffset (الموضع الحالي)، contentSize (حجم المحتوى)، layoutMeasurement (حجم المنطقة المرئية). onMomentumScrollEnd يتم استدعاؤه بعد اكتمال التمرير بالقصور الذاتي. onScrollEndDrag — عندما يرفع المستخدم إصبعه عن الشاشة. تُستخدم هذه الأحداث لتنفيذ التمرير اللانهائي وتأثيرات التزيين والتحميل البطيء.

التحكم البرمجي عبر ref

يوفر ScrollView طرقاً للتحكم البرمجي عبر ref: scrollTo({x, y, animated}) يقوم بالتمرير إلى الإحداثيات المحددة، scrollToEnd({animated}) — يقوم بالتمرير إلى نهاية المحتوى، flashScrollIndicators() — يعرض مؤشرات التمرير مؤقتاً.

const scrollRef = useRef(null);

// التمرير إلى الأعلى
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// التمرير إلى النهاية
scrollRef.current.scrollToEnd({ animated: true });

التحكم البرمجي في التمرير يُستخدم غالباً في الدردشات (التمرير التلقائي إلى آخر رسالة)، والنماذج (التمرير إلى حقل به خطأ)، والدوارات (التمرير البرمجي).

الفرق بين ScrollView و FlatList

الاختيار بين ScrollView و FlatList هو أحد القرارات المعمارية الرئيسية في React Native. كلا المكونين يوفران التمرير، لكنهما يستخدمان استراتيجيات عرض مختلفة جوهرياً. ScrollView يعرض كل شيء مرة واحدة، FlatList — فقط العناصر المرئية.

قاعدة الاختيار: ScrollView — للشاشات حيث يكون عدد العناصر الفرعية معروفاً ولا يتجاوز 20-30 (ملف المستخدم، نموذج الإعدادات، صفحة المنتج). FlatList — للقوائم ذات عدد كبير محتمل من العناصر (خلاصة الأخبار، كتالوج المنتجات، رسائل الدردشة). إذا كان المحتوى غير متجانس (رأس، نموذج، بطاقة، تذييل) — فإن ScrollView أفضل لأن FlatList يتوقع عناصر متجانسة.

التمرير الأفقي والترقيم

ScrollView يدعم التمرير الأفقي من خلال الخاصية horizontal، مما يجعله مثالياً للدوارات ومعارض الصور والعلامات التبويبية والقوائم الأفقية. عند دمجه مع الخاصية pagingEnabled (iOS) أو snapToInterval، يتحول ScrollView إلى مكون للتنقل بالصفحات.

الدوارة الأفقية

الخاصية horizontal تغير اتجاه التمرير. pagingEnabled (iOS) تفعل التمرير بالصفحات، حيث يتوقف التمرير فقط عند حدود العناصر. snapToInterval يحدد خطوة الالتقاط بالبكسل لكلتا المنصتين.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

في هذه الدوارة، pagingEnabled يقوم تلقائياً بتثبيت التمرير عند حدود كل صورة. onMomentumScrollEnd يسمح بتحديث مؤشر الصفحة الحالية. تعمل هذه الدوارة بشكل أصلي وتدعم التمرير بالقصور الذاتي.

تحديد المواقع بالالتقاط

لخطوات الالتقاط غير القياسية، استخدم snapToInterval (حجم الخطوة بالبكسل) و snapToAlignment (start، center، end). باستخدام snapToOffsets يمكنك تحديد مصفوفة من المواضع المحددة للالتقاط. هذا مفيد للقوائم الأفقية ذات البطاقات بأحجام مختلفة.

أمثلة عملية مع ScrollView

دعنا نلقي نظرة على سيناريوهين نموذجيين: شاشة بها نموذج (تمرير عمودي) وقائمة أفقية للفئات. كلاهما يستخدم ScrollView مع خصائص مختلفة للسلوك الأمثل.

مثال 1: شاشة الملف الشخصي مع نموذج

صفحة تحرير الملف الشخصي تحتوي على عناصر غير متجانسة: صورة رمزية، عدة حقول إدخال، مفاتيح تبديل وزر حفظ. يسمح ScrollView بتمرير الصفحة بأكملها ككل، بدلاً من كل كتلة على حدة.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

الخاصية keyboardShouldPersistTaps: 'handled' تسمح بالتمرير والتفاعل مع النموذج عندما تكون لوحة المفاتيح مفتوحة. contentContainerStyle يطبق مساحة على كل المحتوى. هذا النمط يستخدم في جميع شاشات النماذج في React Native.

مثال 2: قائمة أفقية للفئات

للتنقل عبر الفئات (الدردشات، الفلاتر، العلامات التبويبية)، يتم استخدام ScrollView أفقي مع رقاقات. هذا المكون شائع في تطبيقات المتاجر ووسائل التواصل الاجتماعي.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

ScrollView أفقي مع مؤشر معطل هو المعيار لشرائط الفئات. كل رقاقة هي مكون منفصل بحالة تحديد. الخاصية showsHorizontalScrollIndicator: false تزيل شريط التمرير، وهو ما يتوافق مع توقعات مستخدمي التطبيقات المحمولة.