ScrollView — nima, aylantirish konteyneri va React Native

React Native-da ScrollView nima

ScrollView — tarkibini aylantiriladigan konteynerga o‘raydigan React Native komponentidir. Agar tarkib ekran chegaralaridan chiqib ketsa, foydalanuvchi uni vertikal yoki gorizontal aylantirishi mumkin. ScrollView o‘rnatish vaqtida barcha bola elementlarni render qiladi, ular ekranda ko‘rinadigan bo‘lishidan qat‘iy nazar.

Faqat ko‘rinadigan elementlarni render qiladigan FlatList-dan (lazy rendering) farqli o‘laroq, ScrollView barcha native ko‘rinishlarni birdaniga yaratadi. Bu ScrollView-ni formalar, sozlamalar sahifalari, bir ekrandagi mahsulot kartalari uchun qulay qiladi — bola elementlar soni kichik bo‘lgan (20-30 gacha) yoki ularning aniq soni oldindan noma‘lum bo‘lgan hollarda.

React Native Using ScrollView, 2024-ga ko‘ra, ScrollView ichma-ich aylantirishni (masalan, ScrollView ichida ScrollView), chekkaga yetganda bounce effektini, aylantirish ko‘rsatkichlarini, pozitsiya snap-ini va imo-ishoralarni qo‘llab-quvvatlaydi. iOS-da ScrollView contentInsetAdjustmentBehavior orqali SafeArea ostiga avtomatik bo‘shliq qo‘shadi.

ScrollView komponentining xususiyatlari va API

ScrollView aylantirish xatti-harakatini, ko‘rinishini va interaktivligini boshqarish uchun boy xususiyatlar to‘plamini taqdim etadi. Asosiy guruhlarni ko‘rib chiqamiz: aylantirish boshqaruvi, vizual sozlamalar, hodisalar va platforma xususiyatlari.

Yo‘nalish va aylantirish boshqaruvi

horizontal — aylantirish yo‘nalishini vertikal (standart) dan gorizontalga o‘zgartiradi. scrollEnabled — kerak bo‘lganda aylantirishni o‘chiradi. showsVerticalScrollIndicator va showsHorizontalScrollIndicator aylantirish ko‘rsatkichlarini boshqaradi. bounces (iOS) tarkib chekkasiga yetganda bounce effektini yoqadi/o‘chiradi.

ScrollView hodisalari

Asosiy hodisa — onScroll, har bir aylantirishda chaqiriladi va nativeEvent bilan obyektni uzatadi, tarkibida contentOffset (joriy pozitsiya), contentSize (tarkib hajmi), layoutMeasurement (ko‘rinadigan maydon hajmi). onMomentumScrollEnd inertial aylantirish tugagandan so‘ng chaqiriladi. onScrollEndDrag — foydalanuvchi ekranni qo‘yib yuborganda. Bu hodisalar cheksiz aylantirish, parallaks va kechiktirilgan yuklashni amalga oshirish uchun ishlatiladi.

Ref orqali dasturiy boshqaruv

ScrollView referans orqali dasturiy boshqaruv uchun metodlarni taqdim etadi: scrollTo({x, y, animated}) ko‘rsatilgan koordinatalarga aylantiradi, scrollToEnd({animated}) — tarkib oxiriga, flashScrollIndicators() — vaqtincha aylantirish ko‘rsatkichlarini ko‘rsatadi.

const scrollRef = useRef(null);

// Yuqoriga aylantir
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Oxiriga aylantir
scrollRef.current.scrollToEnd({ animated: true });

Aylantirishning dasturiy boshqaruvi chatlarda (oxirgi xabarga avtomatik aylantirish), formalarda (xatoli maydonga aylantirish) va karusellarda (dasturiy aylantirish) tez-tez ishlatiladi.

ScrollView va FlatList o‘rtasidagi farqlar

ScrollView va FlatList o‘rtasidagi tanlov — React Native-dagi asosiy arxitektura qarorlaridan biridir. Ikkala komponent aylantirishni ta‘minlaydi, ammo tubdan farqli render strategiyalaridan foydalanadi. ScrollView hamma narsani birdaniga render qiladi, FlatList — faqat ko‘rinadigan elementlarni.

Tanlov qoidasi: ScrollView — bola elementlari soni ma‘lum va 20-30 dan oshmaydigan ekranlar uchun (foydalanuvchi profili, sozlamalar formasi, mahsulot sahifasi). FlatList — potensial ko‘p elementli ro‘yxatlar uchun (yangiliklar lentasi, mahsulot katalogi, chat xabarlari). Tarkib xilma-xil bo‘lsa (sarlavha, forma, karta, footer) — ScrollView afzalroq, chunki FlatList bir xil elementlarni kutadi.

Gorizontal aylantirish va paginatsiya

ScrollView horizontal xususiyati orqali gorizontal aylantirishni qo‘llab-quvvatlaydi, bu uni karusellar, rasm galereyalari, tablar va gorizontal ro‘yxatlar uchun ideal qiladi. pagingEnabled (iOS) yoki snapToInterval bilan birgalikda ScrollView sahifa navigatsiyasi komponentiga aylanadi.

Gorizontal karusel

horizontal xususiyati aylantirish yo‘nalishini o‘zgartiradi. pagingEnabled (iOS) sahifali aylantirishni yoqadi, bunda scroll faqat elementlar chegaralarida to‘xtaydi. snapToInterval ikkala platforma uchun pikseldagi snap qadamini belgilaydi.

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 karuselda pagingEnabled avtomatik ravishda scroll-ni har bir rasmning chegaralariga yopishtiradi. onMomentumScrollEnd joriy sahifa ko‘rsatkichini yangilashga imkon beradi. Bunday karusel native ishlaydi va inertial aylantirishni qo‘llab-quvvatlaydi.

Pozitsiyaga snap (Snap)

Nostandart snap qadamlari uchun snapToInterval (pikseldagi qadam hajmi) va snapToAlignment (start, center, end) ishlatiladi. snapToOffsets orqali snap uchun aniq pozitsiyalar massivini belgilash mumkin. Bu har xil o‘lchamdagi kartalari bo‘lgan gorizontal ro‘yxatlar uchun foydalidir.

ScrollView bilan amaliy misollar

Ikkita tipik stsenariyni ko‘rib chiqamiz: formali ekran (vertikal aylantirish) va gorizontal kategoriyalar ro‘yxati. Ikkalasi optimal xatti-harakat uchun turli xususiyatlar bilan ScrollView dan foydalanadi.

1-misol: formali profil ekrani

Profilni tahrirlash sahifasi turli elementlarni o‘z ichiga oladi: avatar, bir nechta kiritish maydonlari, kalitlar va saqlash tugmasi. ScrollView butun sahifani to‘liq aylantirishga imkon beradi, har bir blokni alohida emas.

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' xususiyati klaviatura ochiq bo‘lganda aylantirish va forma bilan o‘zaro aloqaga imkon beradi. contentContainerStyle barcha tarkibga bo‘shliqlarni qo‘llaydi. Bu naqsh React Native-dagi barcha formal ekranlarida ishlatiladi.

2-misol: gorizontal kategoriyalar ro‘yxati

Kategoriyalar bo‘yicha navigatsiya uchun (chatlar, filtrlar, tablar) chiplar bilan gorizontal ScrollView ishlatiladi. Bunday komponent ko‘pincha marketplace va ijtimoiy tarmoq ilovalarida uchraydi.

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

Ko‘rsatkichi o‘chirilgan gorizontal ScrollView — kategoriyalar paneli uchun standartdir. Har bir chip tanlov holati bilan alohida komponentdir. showsHorizontalScrollIndicator: false xususiyati aylantirish panelini yashiradi, bu mobil ilova foydalanuvchilarining kutishlariga mos keladi.