ScrollView — ano ito, scroll container at React Native

Ano ang ScrollView sa React Native

ScrollView — ay isang React Native komponent na bumabalot ng content nito sa isang scrollable container. Kung ang content ay lumampas sa hangganan ng screen, ang user ay maaaring mag-scroll nito nang vertical o horizontal. Nire-render ng ScrollView ang lahat ng child elements kapag nag-mount, hindi alintana kung ang mga ito ay nakikita sa screen o hindi.

Hindi tulad ng FlatList na nire-render lamang ang nakikitang elements (lazy rendering), gumagawa ang ScrollView ng lahat ng native representation nang sabay-sabay. Ginagawa nitong maginhawa ang ScrollView para sa forms, settings pages, product cards sa isang screen — kahit saan ang bilang ng child elements ay maliit (hanggang 20-30) o ang eksaktong bilang ay hindi alam nang maaga.

Ayon sa React Native Using ScrollView, 2024, sinusuportahan ng ScrollView ang nested na pag-scroll (hal. ScrollView sa loob ng ScrollView), bounce effect kapag naabot ang gilid, scroll indicators, position snap, at gesture handling. Sa iOS, awtomatikong nagdaragdag ang ScrollView ng espasyo sa ilalim ng SafeArea sa pamamagitan ng contentInsetAdjustmentBehavior.

Mga property at API ng ScrollView komponent

ScrollView ay nagbibigay ng mayamang set ng mga property para sa pagkontrol ng scroll behavior, hitsura, at interactivity. Tingnan natin ang mga pangunahing grupo: scroll control, visual settings, events, at platform features.

Kontrol sa direksyon at pag-scroll

horizontal — nagpapalit ng direksyon ng pag-scroll mula vertical (default) patungong horizontal. scrollEnabled — hindi pinapagana ang pag-scroll kung kinakailangan. showsVerticalScrollIndicator at showsHorizontalScrollIndicator ay kumokontrol sa pagpapakita ng scroll indicators. bounces (iOS) pinapagana/hindi pinapagana ang bounce effect kapag naabot ang gilid ng content.

Mga event ng ScrollView

Ang pangunahing event — onScroll, na tinatawag sa bawat pag-scroll at nagpapasa ng object na may nativeEvent na naglalaman ng contentOffset (kasalukuyang posisyon), contentSize (laki ng content), layoutMeasurement (laki ng visible area). onMomentumScrollEnd ay tinatawag pagkatapos ng inertial scrolling. onScrollEndDrag — kapag ang user ay naglabas ng screen. Ang mga event na ito ay ginagamit para sa pag-implement ng infinite scrolling, parallax, at lazy loading.

Programmatic na kontrol sa pamamagitan ng ref

Ang ScrollView ay nagbibigay ng mga method para sa programmatic na kontrol sa pamamagitan ng reference: scrollTo({x, y, animated}) nag-scroll sa tinukoy na coordinates, scrollToEnd({animated}) — sa dulo ng content, flashScrollIndicators() — pansamantalang nagpapakita ng scroll indicators.

const scrollRef = useRef(null);

// Mag-scroll pataas
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Mag-scroll sa dulo
scrollRef.current.scrollToEnd({ animated: true });

Ang programmatic na kontrol ng pag-scroll ay madalas na ginagamit sa chats (auto-scroll sa huling mensahe), forms (scroll sa field na may error), at carousels (programmatic scrolling).

Mga pagkakaiba ng ScrollView at FlatList

Ang pagpili sa pagitan ng ScrollView at FlatList — isa sa mga pangunahing architectural na desisyon sa React Native. Parehong nagbibigay ng pag-scroll ang dalawang komponent, ngunit gumagamit ng ibang-ibang rendering strategies. Nire-render ng ScrollView ang lahat nang sabay-sabay, FlatList — tanging ang visible elements.

Patakaran sa pagpili: ScrollView — para sa mga screen kung saan ang bilang ng child elements ay alam at hindi lalampas sa 20-30 (user profile, settings form, product page). FlatList — para sa mga listahan na may potensyal na malaking bilang ng elements (news feed, product catalog, chat messages). Kung ang content ay heterogenous (title, form, card, footer) — mas mainam ang ScrollView, dahil ang FlatList ay umaasa ng homogenous elements.

Horizontal na pag-scroll at pagination

ScrollView ay sumusuporta sa horizontal na pag-scroll sa pamamagitan ng horizontal property, na ginagawa itong ideal para sa carousels, image galleries, tabs, at horizontal lists. Sa kombinasyon ng pagingEnabled (iOS) o snapToInterval, ang ScrollView ay nagiging komponent para sa page navigation.

Horizontal carousel

Ang horizontal property ay nagpapalit ng direksyon ng pag-scroll. Ang pagingEnabled (iOS) ay nagpapagana ng page scrolling, kung saan ang scroll ay humihinto lamang sa mga hangganan ng elements. snapToInterval ay nagtatakda ng snap step sa pixels para sa parehong platforms.

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

Sa carousel na ito, pagingEnabled ay awtomatikong nag-snap ng scroll sa mga hangganan ng bawat imahe. onMomentumScrollEnd ay nagbibigay-daan sa pag-update ng indicator ng kasalukuyang page. Ang ganitong carousel ay gumagana nang native at sumusuporta sa inertial scrolling.

Snap sa posisyon (Snap)

Para sa custom snap steps, ginagamit ang snapToInterval (laki ng step sa pixels) at snapToAlignment (start, center, end). Sa pamamagitan ng snapToOffsets, maaaring magtakda ng array ng specific positions para sa snapping. Ito ay kapaki-pakinabang para sa horizontal lists na may cards na iba-iba ang laki.

Mga praktikal na halimbawa gamit ang ScrollView

Tingnan natin ang dalawang tipikal na scenario: screen na may form (vertical scroll) at horizontal category list. Parehong gumagamit ng ScrollView na may iba't ibang property para sa optimal na behavior.

Halimbawa 1: profile screen na may form

Ang page ng pag-edit ng profile ay naglalaman ng heterogenous elements: avatar, ilang input fields, switch, at save button. Pinapayagan ng ScrollView ang pag-scroll ng buong page nang kabuuan, hindi bawat block nang hiwalay.

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

Ang keyboardShouldPersistTaps: 'handled' property ay nagpapahintulot sa pag-scroll at interaksyon sa form kapag ang keyboard ay bukas. Ang contentContainerStyle ay nag-aapply ng margins sa lahat ng content. Ang pattern na ito ay ginagamit sa lahat ng screen na may forms sa React Native.

Halimbawa 2: horizontal category list

Para sa navigation sa categories (chats, filters, tabs) ginagamit ang horizontal ScrollView na may chips. Ang ganitong komponent ay madalas na makikita sa marketplace at social network apps.

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

Horizontal ScrollView na may indicator na naka-disable — standard para sa category bar. Ang bawat chip ay hiwalay na komponent na may selection state. Ang property na showsHorizontalScrollIndicator: false ay nagtatago ng scroll bar, na tumutugma sa inaasahan ng mga mobile app users.