ScrollView — vad är det, rullningsbehållare och React Native

Vad är ScrollView i React Native

ScrollView — är en React Native-komponent som omsluter sitt innehåll i en rullningsbar behållare. Om innehållet går utanför skärmens gränser kan användaren rulla det vertikalt eller horisontellt. ScrollView renderar alla underordnade element vid montering, oavsett om de är synliga på skärmen eller inte.

Till skillnad från FlatList, som endast renderar synliga element (lazy rendering), skapar ScrollView alla inbyggda representationer på en gång. Detta gör ScrollView bekvämt för formulär, inställningssidor, produktkort på en skärm — överallt där antalet underordnade element är litet (upp till 20-30) eller det exakta antalet inte är känt i förväg.

Enligt React Native Using ScrollView, 2024 stöder ScrollView nästlad rullning (t.ex. ScrollView inuti ScrollView), studseffekt vid kant, rullningsindikatorer, positionssnäppning (snap) och gesthantering. På iOS lägger ScrollView automatiskt till mellanrum under SafeArea via contentInsetAdjustmentBehavior.

Egenskaper och API för ScrollView-komponenten

ScrollView erbjuder en rik uppsättning egenskaper för att kontrollera rullningsbeteende, utseende och interaktivitet. Låt oss titta på nyckelgrupperna: rullningskontroll, visuella inställningar, händelser och plattformsfunktioner.

Riktnings- och rullningskontroll

horizontal — växlar rullningsriktning från vertikal (standard) till horisontell. scrollEnabled — inaktiverar rullning vid behov. showsVerticalScrollIndicator och showsHorizontalScrollIndicator styr visningen av rullningsindikatorer. bounces (iOS) aktiverar/inaktiverar studseffekten vid innehållets kant.

ScrollView-händelser

Huvudhändelsen — onScroll, som anropas vid varje rullning och skickar ett objekt med nativeEvent som innehåller contentOffset (aktuell position), contentSize (innehållsstorlek), layoutMeasurement (storlek på synligt område). onMomentumScrollEnd anropas efter att tröghetsrullning slutförts. onScrollEndDrag — när användaren släppte skärmen. Dessa händelser används för att implementera oändlig rullning, parallax och lazy loading.

Programmatisk kontroll via ref

ScrollView tillhandahåller metoder för programmatisk kontroll via referens: scrollTo({x, y, animated}) rullar till angivna koordinater, scrollToEnd({animated}) — till slutet av innehållet, flashScrollIndicators() — visar tillfälligt rullningsindikatorerna.

const scrollRef = useRef(null);

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

// Rulla till slutet
scrollRef.current.scrollToEnd({ animated: true });

Programmatisk rullningskontroll används ofta i chattar (automatisk rullning till senaste meddelandet), formulär (rullning till fältet med fel) och karuseller (programmatisk rullning).

Skillnader mellan ScrollView och FlatList

Valet mellan ScrollView och FlatList — ett av de viktigaste arkitekturbesluten i React Native. Båda komponenterna ger rullning, men använder fundamentalt olika renderingsstrategier. ScrollView renderar allt på en gång, FlatList — endast synliga element.

Urvalsregel: ScrollView — för skärmar där antalet underordnade element är känt och inte överstiger 20-30 (användarprofil, inställningsformulär, produktsida). FlatList — för listor med potentiellt stort antal element (nyhetsflöde, produktkatalog, chattmeddelanden). Om innehållet är heterogent (rubrik, formulär, kort, sidfot) — är ScrollView att föredra eftersom FlatList förväntar sig homogena element.

Horisontell rullning och paginering

ScrollView stöder horisontell rullning via egenskapen horizontal, vilket gör den idealisk för karuseller, bildgallerier, flikar och horisontella listor. I kombination med egenskapen pagingEnabled (iOS) eller snapToInterval blir ScrollView en komponent för sidnavigering.

Horisontell karusell

Egenskapen horizontal växlar rullningsriktning. pagingEnabled (iOS) aktiverar sidrullning, där rullningen stannar endast vid elementens gränser. snapToInterval ställer in snäppsteget i pixlar för båda plattformarna.

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

I denna karusell snäpper pagingEnabled automatiskt rullningen till varje bilds gränser. onMomentumScrollEnd gör det möjligt att uppdatera indikatorn för aktuell sida. En sådan karusell fungerar inbyggt och stöder tröghetsrullning.

Snäppning till position (Snap)

För anpassade snäppsteg används snapToInterval (stegstorlek i pixlar) och snapToAlignment (start, center, end). Med snapToOffsets kan en array av specifika positioner för snäppning ställas in. Detta är användbart för horisontella listor med kort av olika storlek.

Praktiska exempel med ScrollView

Låt oss titta på två typiska scenarier: skärm med formulär (vertikal rullning) och horisontell kategorilista. Båda använder ScrollView med olika egenskaper för optimalt beteende.

Exempel 1: profilsida med formulär

Profilsidan innehåller heterogena element: avatar, flera inmatningsfält, växlar och en sparaknapp. ScrollView gör det möjligt att rulla hela sidan i sin helhet, inte varje block separat.

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

Egenskapen keyboardShouldPersistTaps: 'handled' möjliggör rullning och interaktion med formuläret när tangentbordet är öppet. contentContainerStyle tillämpar marginaler på allt innehåll. Detta mönster används på alla skärmar med formulär i React Native.

Exempel 2: horisontell kategorilista

För navigering mellan kategorier (chattar, filter, flikar) används en horisontell ScrollView med chips. En sådan komponent förekommer ofta i marketplace- och sociala nätverksappar.

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

Horisontell ScrollView med inaktiverad indikator — standard för kategoriraden. Varje chip är en separat komponent med ett markeringsläge. Egenskapen showsHorizontalScrollIndicator: false döljer rullningslisten, vilket motsvarar förväntningarna hos mobilappanvändare.