ScrollView — mi ez, görgető konténer és React Native

Mi az a ScrollView a React Native-ben

ScrollView — egy React Native komponens, amely a tartalmát egy görgethető konténerbe csomagolja. Ha a tartalom túllépi a képernyő határait, a felhasználó függőlegesen vagy vízszintesen görgetheti. A ScrollView az összes gyermekelemet a csatlakoztatáskor rendereli, függetlenül attól, hogy láthatóak-e a képernyőn vagy sem.

A FlatList-tel ellentétben, amely csak a látható elemeket rendereli (lusta renderelés), a ScrollView az összes natív megjelenítést egyszerre hozza létre. Ez teszi a ScrollView-t kényelmessé űrlapok, beállításoldalak, termékkártyák egy képernyőn — mindenhol, ahol a gyermekelemek száma kicsi (20-30-ig) vagy pontos számuk előre nem ismert.

A React Native Using ScrollView, 2024 szerint a ScrollView támogatja az egymásba ágyazott görgetést (pl. ScrollView a ScrollView-n belül), a pattogó effektust a szél elérésekor, görgetésjelzőket, pozíciórögzítést (snap) és gesztuskezelést. iOS-en a ScrollView automatikusan helyet ad a SafeArea alá a contentInsetAdjustmentBehavior segítségével.

A ScrollView komponens tulajdonságai és API-ja

ScrollView gazdag tulajdonságkészletet kínál a görgetési viselkedés, megjelenés és interaktivitás vezérléséhez. Tekintsük át a kulcsfontosságú csoportokat: görgetésvezérlés, vizuális beállítások, események és platformjellemzők.

Irány és görgetés vezérlése

horizontal — a görgetés irányát függőlegesről (alapértelmezett) vízszintesre váltja. scrollEnabled — szükség esetén kikapcsolja a görgetést. showsVerticalScrollIndicator és showsHorizontalScrollIndicator vezérli a görgetésjelzők megjelenítését. bounces (iOS) be-/kikapcsolja a pattogó effektust a tartalom szélének elérésekor.

ScrollView események

A fő esemény — onScroll, amely minden görgetéskor meghívódik és egy objektumot ad át a nativeEvent-tel, amely tartalmazza a contentOffset (aktuális pozíció), contentSize (tartalom mérete), layoutMeasurement (látható terület mérete) értékeket. onMomentumScrollEnd a tehetetlenségi görgetés befejezése után hívódik meg. onScrollEndDrag — amikor a felhasználó elengedi a képernyőt. Ezeket az eseményeket végtelen görgetés, parallaxis és lusta betöltés megvalósításához használják.

Programozott vezérlés ref-en keresztül

A ScrollView metódusokat biztosít a programozott vezérléshez referencián keresztül: scrollTo({x, y, animated}) a megadott koordinátákra görget, scrollToEnd({animated}) — a tartalom végére, flashScrollIndicators() — ideiglenesen megjeleníti a görgetésjelzőket.

const scrollRef = useRef(null);

// Görgess fel
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Görgess a végére
scrollRef.current.scrollToEnd({ animated: true });

A görgetés programozott vezérlését gyakran használják csevegésekben (automatikus görgetés az utolsó üzenethez), űrlapokban (görgetés a hibás mezőhöz) és karuszelekben (programozott lapozás).

Különbségek a ScrollView és a FlatList között

A választás a ScrollView és a FlatList között — az egyik kulcsfontosságú architekturális döntés a React Native-ben. Mindkét komponens görgetést biztosít, de alapvetően eltérő renderelési stratégiákat használ. A ScrollView mindent egyszerre renderel, a FlatList — csak a látható elemeket.

Választási szabály: ScrollView — olyan képernyőkhöz, ahol a gyermekelemek száma ismert és nem haladja meg a 20-30-at (felhasználói profil, beállítási űrlap, termékoldal). FlatList — olyan listákhoz, amelyek potenciálisan nagy számú elemet tartalmaznak (hírcsatorna, termékkatalógus, csevegésüzenetek). Ha a tartalom heterogén (cím, űrlap, kártya, lábléc) — a ScrollView előnyösebb, mivel a FlatList homogén elemeket vár.

Vízszintes görgetés és lapozás

ScrollView támogatja a vízszintes görgetést a horizontal tulajdonságon keresztül, ami ideálissá teszi karuszelekhez, képgalériákhoz, lapokhoz és vízszintes listákhoz. A pagingEnabled (iOS) vagy snapToInterval tulajdonsággal kombinálva a ScrollView lapozható navigációs komponenssé válik.

Vízszintes karuszell

A horizontal tulajdonság megváltoztatja a görgetés irányát. A pagingEnabled (iOS) bekapcsolja a lapozható görgetést, ahol a görgetés csak az elemek határainál áll meg. snapToInterval beállítja a rögzítési lépést pixelben mindkét platformon.

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

Ebben a karuszellben a pagingEnabled automatikusan a képek határaihoz rögzíti a görgetést. onMomentumScrollEnd lehetővé teszi az aktuális oldal jelzőjének frissítését. Az ilyen karuszell natívan működik és támogatja a tehetetlenségi görgetést.

Pozícióhoz rögzítés (Snap)

Egyedi rögzítési lépésekhez a snapToInterval (lépésméret pixelben) és a snapToAlignment (start, center, end) használható. A snapToOffsets segítségével konkrét pozíciók tömbje állítható be a rögzítéshez. Ez hasznos különböző méretű kártyákat tartalmazó vízszintes listákhoz.

Gyakorlati példák a ScrollView-val

Tekintsünk két tipikus forgatókönyvet: képernyő űrlappal (függőleges görgetés) és vízszintes kategórialista. Mindkettő ScrollView-t használ különböző tulajdonságokkal az optimális viselkedés érdekében.

1. példa: profilképernyő űrlappal

A profil szerkesztőoldala heterogén elemeket tartalmaz: avatart, több beviteli mezőt, kapcsolókat és mentés gombot. A ScrollView lehetővé teszi a teljes oldal egészének görgetését, nem pedig minden blokk külön-külön.

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

A keyboardShouldPersistTaps: 'handled' tulajdonság lehetővé teszi a görgetést és az űrlappal való interakciót, amikor a billentyűzet nyitva van. A contentContainerStyle margókat alkalmaz a teljes tartalomra. Ezt a mintát minden űrlapos képernyőn használják a React Native-ben.

2. példa: vízszintes kategórialista

A kategóriák közötti navigációhoz (csevegések, szűrők, lapok) vízszintes ScrollView-t használnak chipekkel. Ez a komponens gyakran megtalálható piactér- és közösségimédia-alkalmazásokban.

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

Vízszintes ScrollView jelzővel kikapcsolva — szabvány a kategóriasávhoz. Minden chip egy külön komponens kiválasztási állapottal. A showsHorizontalScrollIndicator: false tulajdonság elrejti a görgetősávot, ami megfelel a mobilalkalmazás-felhasználók elvárásainak.