ScrollView — шта је то, скрол контејнер и React Native

Шта је ScrollView у React Native

ScrollView — компонента React Native која обавија свој садржај у скролујући контејнер. Ако садржај излази изван граница екрана, корисник може да га помера вертикално или хоризонтално. ScrollView рендерује све поткомпоненте при монтирању, без обзира на то да ли су видљиве на екрану или не.

За разлику од FlatList, који рендерује само видљиве елементе (lazy rendering), ScrollView креира све нативне приказе одједном. То чини ScrollView погодним за форме, странице подешавања, картице производа на једном екрану — свуда где је број поткомпоненти мали (до 20-30) или њихов тачан број унапред није познат.

Према React Native Using ScrollView, 2024, ScrollView подржава угњeждено скроловање (нпр. ScrollView унутар ScrollView), bounce ефекат при досезању ивице, индикаторе скроловања, закључавање позиције (snap) и обраду гестова. На iOS-у ScrollView аутоматски додаје размак испод SafeArea путем contentInsetAdjustmentBehavior.

Својства и API компоненте ScrollView

ScrollView пружа богат скуп својстава за управљање понашањем скроловања, изгледом и интерактивношћу. Размотримо кључне групе: управљање скроловањем, визуелна подешавања, догађаји и платформске карактеристике.

Управљање правцем и скроловањем

horizontal — пребацује правац скроловања са вертикалног (подразумевано) на хоризонтално. scrollEnabled — искључује скроловање по потреби. showsVerticalScrollIndicator и showsHorizontalScrollIndicator управљају приказом индикатора скроловања. bounces (iOS) укључује/искључује bounce ефекат при досезању ивице садржаја.

Догађаји ScrollView

Главни догађај — onScroll, који се позива при сваком скроловању и прослеђује објекат са nativeEvent, који садржи contentOffset (тренутна позиција), contentSize (величина садржаја), layoutMeasurement (величина видљивог подручја). onMomentumScrollEnd се позива након завршетка инерционог скроловања. onScrollEndDrag — када корисник пусти екран. Ови догађаји се користе за имплементацију бесконачног скроловања, паралаксе и лењог учитавања.

Програмско управљање путем ref

ScrollView пружа методе за програмско управљање путем референце: 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 — за листе са потенцијaлно великим бројем елемената (феед вести, каталог производа, поруке ћаскања). Ако је садржај разноврстан (наслов, форма, картица, подножје) — 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 омогућава ажурирање индикатора тренутне странице. Такав карусел ради нативно и подржава инерционо скроловање.

Причвршћивање на позицију (Snap)

За нестандардне кораке причвршћивања користи се 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 уклања траку скроловања, што одговара очекивањима корисника мобилних апликација.