ScrollView — nədir, sürüşdürmə konteyneri və React Native

React Native-də ScrollView nədir

ScrollView — məzmunu sürüşdürülə bilən konteynerə bükən React Native komponentidir. Məzmun ekranın hüdudlarından kənara çıxarsa, istifadəçi onu şaquli və ya üfüqi sürüşdürə bilər. ScrollView montaj zamanı bütün uşaq elementləri render edir, onların ekranda görünüb-görünməməsindən asılı olmayaraq.

Yalnız görünən elementləri render edən FlatList-dən (lazy rendering) fərqli olaraq, ScrollView bütün nativ təsvirləri dərhal yaradır. Bu, ScrollView-i formalar, parametrlər səhifələri, bir ekranda məhsul kartları üçün əlverişli edir — uşaq elementlərin sayının az olduğu (20-30-dək) və ya onların dəqiq sayının əvvəlcədən bilinmədiyi hallar üçün.

React Native Using ScrollView, 2024-ə görə, ScrollView iç-içə sürüşdürməni (məsələn, ScrollView içərisində ScrollView), kənara çatdıqda bounce effekti, sürüşdürmə göstəricilərini, mövqe snap-i və jestləri dəstəkləyir. iOS-da ScrollView contentInsetAdjustmentBehavior vasitəsilə SafeArea altına avtomatik boşluq əlavə edir.

ScrollView komponentinin xüsusiyyətləri və API

ScrollView sürüşdürmə davranışını, görünüşünü və interaktivliyini idarə etmək üçün zəngin xüsusiyyətlər dəsti təqdim edir. Əsas qrupları nəzərdən keçirək: sürüşdürmə idarəsi, vizual parametrlər, hadisələr və platforma xüsusiyyətləri.

İstiqamət və sürüşdürmə idarəsi

horizontal — sürüşdürmə istiqamətini şaquli (standart) haldan üfüqiyə dəyişir. scrollEnabled — lazım olduqda sürüşdürməni söndürür. showsVerticalScrollIndicator və showsHorizontalScrollIndicator sürüşdürmə göstəricilərini idarə edir. bounces (iOS) məzmunun kənarına çatdıqda bounce effektini aktivləşdirir/söndürür.

ScrollView hadisələri

Əsas hadisə — onScroll, hər sürüşdürmədə çağırılır və nativeEvent ilə obyekt ötürür, tərkibində contentOffset (cari mövqe), contentSize (məzmun ölçüsü), layoutMeasurement (görünən sahənin ölçüsü). onMomentumScrollEnd inertial sürüşdürmə bitdikdən sonra çağırılır. onScrollEndDrag — istifadəçi ekranı buraxdıqda. Bu hadisələr sonsuz sürüşdürmə, parallaks və gecikmiş yükləməni həyata keçirmək üçün istifadə olunur.

Ref vasitəsilə proqram idarəsi

ScrollView referans vasitəsilə proqram idarəsi üçün metodlar təqdim edir: scrollTo({x, y, animated}) göstərilən koordinatlara sürüşdürür, scrollToEnd({animated}) — məzmunun sonuna, flashScrollIndicators() — müvəqqəti olaraq sürüşdürmə göstəricilərini göstərir.

const scrollRef = useRef(null);

// Yuxarı sürüşdür
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Axıra sürüşdür
scrollRef.current.scrollToEnd({ animated: true });

Sürüşdürmənin proqram idarəsi çatlarda (son mesaja avtomatik sürüşdürmə), formalarda (səhv olan sahəyə sürüşdürmə) və karusellərdə (proqram sürüşdürmə) tez-tez istifadə olunur.

ScrollView və FlatList arasındakı fərqlər

ScrollView və FlatList arasında seçim — React Native-də əsas memarlıq qərarlarından biridir. Hər iki komponent sürüşdürmə təmin edir, lakin prinsipial olaraq fərqli render strategiyalarından istifadə edir. ScrollView hər şeyi dərhal render edir, FlatList — yalnız görünən elementləri.

Seçim qaydası: ScrollView — uşaq elementlərinin sayının məlum olduğu və 20-30-u keçmədiyi ekranlar üçün (istifadəçi profili, parametrlər forması, məhsul səhifəsi). FlatList — potensial çox sayda elementi olan listlər üçün (xəbər lenti, məhsul kataloqu, çat mesajları). Məzmun müxtəlifdirsə (başlıq, forma, kart, footer) — ScrollView daha üstündür, çünki FlatList eynitipli elementlər gözləyir.

Üfüqi sürüşdürmə və paginasiya

ScrollView horizontal xüsusiyyəti vasitəsilə üfüqi sürüşdürməni dəstəkləyir, bu da onu karusellər, şəkil qalereyaları, tablar və üfüqi listlər üçün ideal edir. pagingEnabled (iOS) və ya snapToInterval ilə birlikdə ScrollView səhifə naviqasiyası komponentinə çevrilir.

Üfüqi karusel

horizontal xüsusiyyəti sürüşdürmə istiqamətini dəyişir. pagingEnabled (iOS) səhifə sürüşdürməsini aktivləşdirir, burada scroll yalnız elementlərin sərhədlərində dayanır. snapToInterval hər iki platforma üçün pikseldə snap addımını təyin edir.

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

Bu karuseldə pagingEnabled avtomatik olaraq scroll-u hər şəklin sərhədlərinə yapışdırır. onMomentumScrollEnd cari səhifənin göstəricisini yeniləməyə imkan verir. Belə karusel nativ işləyir və inertial sürüşdürməni dəstəkləyir.

Mövqeyə snap (Snap)

Qeyri-standart snap addımları üçün snapToInterval (pikseldə addım ölçüsü) və snapToAlignment (start, center, end) istifadə olunur. snapToOffsets vasitəsilə snap üçün konkret mövqelər massivi təyin etmək olar. Bu, müxtəlif ölçülü kartları olan üfüqi listlər üçün faydalıdır.

ScrollView ilə praktik nümunələr

İki tipik ssenarini nəzərdən keçirək: formalı ekran (şaquli sürüşdürmə) və üfüqi kateqoriya listi. Hər ikisi optimal davranış üçün müxtəlif xüsusiyyətlərlə ScrollView istifadə edir.

Nümunə 1: formalı profil ekranı

Profil redaktə səhifəsi müxtəlif elementlər ehtiva edir: avatar, bir neçə daxiletmə sahəsi, keçidlər və yaddaş düyməsi. ScrollView bütün səhifəni bütövlükdə sürüşdürməyə imkan verir, hər bloku ayrıca yox.

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' xüsusiyyəti klaviatura açıq olduqda sürüşdürməyə və forma ilə qarşılıqlı əlaqəyə imkan verir. contentContainerStyle bütün məzmun üçün boşluqlar tətbiq edir. Bu nümunə React Native-də bütün formalı ekranlarda istifadə olunur.

Nümunə 2: üfüqi kateqoriya listi

Kateqoriyalar üzrə naviqasiya üçün (çatlar, filtrlər, tablar) chiplərlə üfüqi ScrollView istifadə olunur. Belə komponent tez-tez marketplace və sosial şəbəkə tətbiqlərində rast gəlinir.

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

Göstəricisi söndürülmüş üfüqi ScrollView — kateqoriya zolağı üçün standartdır. Hər chip seçim vəziyyəti olan ayrıca komponentdir. showsHorizontalScrollIndicator: false xüsusiyyəti sürüşdürmə zolağını gizlədir, bu da mobil tətbiq istifadəçilərinin gözləntilərinə uyğundur.