ScrollView — co to je, posouvací kontejner a React Native

Co je ScrollView v React Native

ScrollView — je komponent React Native, který obaluje svůj obsah do posouvacího kontejneru. Pokud obsah překračuje hranice obrazovky, uživatel jej může posouvat vertikálně nebo horizontálně. ScrollView vykresluje všechny podřízené prvky při montáži, bez ohledu na to, zda jsou na obrazovce viditelné či nikoli.

Na rozdíl od FlatList, který vykresluje pouze viditelné prvky (líné vykreslování), ScrollView vytváří všechna nativní zobrazení najednou. To činí ScrollView pohodlným pro formuláře, stránky nastavení, karty produktů na jedné obrazovce — všude tam, kde je počet podřízených prvků malý (do 20-30) nebo jejich přesný počet není předem znám.

Podle React Native Using ScrollView, 2024, ScrollView podporuje vněnožené posouvání (např. ScrollView uvnitř ScrollView), efekt odskoku při dosažení okraje, indikátory posouvání, přichycení pozice (snap) a zpracování gest. Na iOS ScrollView automaticky přidává odsazení pod SafeArea přes contentInsetAdjustmentBehavior.

Vlastnosti a API komponentu ScrollView

ScrollView poskytuje bohatou sadu vlastností pro ovládání chování posouvání, vzhledu a interaktivity. Podívejme se na klíčové skupiny: ovládání posouvání, vizuální nastavení, události a platformní funkce.

Ovládání směru a posouvání

horizontal — přepíná směr posouvání z vertikálního (výchozí) na horizontální. scrollEnabled — v případě potřeby vypne posouvání. showsVerticalScrollIndicator a showsHorizontalScrollIndicator ovládají zobrazení indikátorů posouvání. bounces (iOS) zapíná/vypíná efekt odskoku při dosažení okraje obsahu.

Události ScrollView

Hlavní událost — onScroll, volaná při každém posouvání a předávající objekt s nativeEvent, obsahující contentOffset (aktuální pozice), contentSize (velikost obsahu), layoutMeasurement (velikost viditelné oblasti). onMomentumScrollEnd se volá po dokončení setrvačného posouvání. onScrollEndDrag — když uživatel pustil obrazovku. Tyto události se používají k implementaci nekonečného posouvání, paralaxy a líného načítání.

Programové ovládání přes ref

ScrollView poskytuje metody pro programové ovládání přes referenci: scrollTo({x, y, animated}) posouvá na zadané souřadnice, scrollToEnd({animated}) — na konec obsahu, flashScrollIndicators() — dočasně zobrazí indikátory posouvání.

const scrollRef = useRef(null);

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

// Posunout na konec
scrollRef.current.scrollToEnd({ animated: true });

Programové ovládání posouvání se často používá v chatech (automatické posouvání k poslední zprávě), formulářích (posouvání k poli s chybou) a karuselech (programové posouvání).

Rozdíly mezi ScrollView a FlatList

Výběr mezi ScrollView a FlatList — jedno z klíčových architektonických rozhodnutí v React Native. Oba komponenty poskytují posouvání, ale používají zásadně odlišné strategie vykreslování. ScrollView vykresluje vše najednou, FlatList — pouze viditelné prvky.

Pravidlo výběru: ScrollView — pro obrazovky, kde je počet podřízených prvků známý a nepřesahuje 20-30 (profil uživatele, formulář nastavení, stránka produktu). FlatList — pro seznamy s potenciálně velkým počtem prvků (zpravodajský kanál, katalog produktů, zprávy chatu). Pokud je obsah heterogenní (nadpis, formulář, karta, zápatí) — ScrollView je výhodnější, protože FlatList očekává homogenní prvky.

Horizontální posouvání a paginace

ScrollView podporuje horizontální posouvání přes vlastnost horizontal, což jej činí ideálním pro karusely, galerie obrázků, záložky a horizontální seznamy. V kombinaci s vlastností pagingEnabled (iOS) nebo snapToInterval se ScrollView stává komponentem pro stránkovou navigaci.

Horizontální karusel

Vlastnost horizontal přepíná směr posouvání. pagingEnabled (iOS) zapíná stránkové posouvání, při kterém se posouvání zastavuje pouze na hranicích prvků. snapToInterval nastavuje krok přichycení v pixelech pro obě platformy.

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

V tomto karuselu pagingEnabled automaticky přichycuje posouvání k hranicím každého obrázku. onMomentumScrollEnd umožňuje aktualizovat indikátor aktuální stránky. Takový karusel funguje nativně a podporuje setrvačné posouvání.

Přichycení k pozici (Snap)

Pro vlastní kroky přichycení se používá snapToInterval (velikost kroku v pixelech) a snapToAlignment (start, center, end). Pomocí snapToOffsets lze nastavit pole konkrétních pozic pro přichycení. To je užitečné pro horizontální seznamy s kartami různých velikostí.

Praktické příklady s ScrollView

Podívejme se na dva typické scénáře: obrazovku s formulářem (vertikální posouvání) a horizontální seznam kategorií. Oba používají ScrollView s různými vlastnostmi pro optimální chování.

Příklad 1: obrazovka profilu s formulářem

Stránka úpravy profilu obsahuje heterogenní prvky: avatar, několik vstupních polí, přepínače a tlačítko uložení. ScrollView umožňuje posouvání celé stránky v celku, nikoli každého bloku zvlášť.

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

Vlastnost keyboardShouldPersistTaps: 'handled' umožňuje posouvání a interakci s formulářem, když je klávesnice otevřená. contentContainerStyle aplikuje okraje na veškerý obsah. Tento vzor se používá na všech obrazovkách s formuláři v React Native.

Příklad 2: horizontální seznam kategorií

Pro navigaci po kategoriích(chaty, filtry, záložky) se používá horizontální ScrollView s chipy. Takový komponent se často vyskytuje v aplikacích marketplace a sociálních sítí.

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

Horizontální ScrollView s vypnutým indikátorem — standard pro lištu kategorií. Každý chip je samostatný komponent se stavem výběru. Vlastnost showsHorizontalScrollIndicator: false skrývá lištu posouvání, což odpovídá očekáváním uživatelů mobilních aplikací.