ScrollView — was ist das, Scroll-Container und React Native

Was ist ScrollView in React Native

ScrollView ist eine React Native-Komponente, die ihren Inhalt in einen scrollbaren Container packt. Wenn der Inhalt die Bildschirmgrenzen überschreitet, kann der Benutzer ihn vertikal oder horizontal scrollen. ScrollView rendert alle untergeordneten Elemente beim Mounten, unabhängig davon, ob sie auf dem Bildschirm sichtbar sind oder nicht.

Im Gegensatz zu FlatList, das nur sichtbare Elemente rendert (lazy rendering), erstellt ScrollView sofort alle nativen Ansichten. Dies macht ScrollView praktisch für Formulare, Einstellungsseiten, Produktkarten auf einem einzigen Bildschirm — überall dort, wo die Anzahl der untergeordneten Elemente gering ist (bis zu 20-30) oder ihre genaue Anzahl im Voraus unbekannt ist.

Laut React Native Using ScrollView, 2024 unterstützt ScrollView verschachteltes Scrollen (z.B. ScrollView in ScrollView), einen Bounce-Effekt am Rand, Scroll-Indikatoren, Snap-Positionierung und Gestensteuerung. Auf iOS fügt ScrollView automatisch SafeArea-Abstände über contentInsetAdjustmentBehavior hinzu.

Eigenschaften und API der ScrollView-Komponente

ScrollView bietet eine Vielzahl von Eigenschaften zur Steuerung des Scrollverhaltens, des Aussehens und der Interaktivität. Sehen wir uns die wichtigsten Gruppen an: Scrollsteuerung, visuelle Einstellungen, Ereignisse und plattformspezifische Funktionen.

Richtungs- und Scrollsteuerung

horizontal — wechselt die Scrollrichtung von vertikal (Standard) zu horizontal. scrollEnabled — deaktiviert das Scrollen bei Bedarf. showsVerticalScrollIndicator und showsHorizontalScrollIndicator steuern die Anzeige von Scroll-Indikatoren. bounces (iOS) aktiviert/deaktiviert den Bounce-Effekt am Rand des Inhalts.

ScrollView-Ereignisse

Das Haupteignis ist onScroll, das bei jedem Scrollen ausgelöst wird und ein Objekt mit nativeEvent übergibt, das contentOffset (aktuelle Position), contentSize (Inhaltsgröße), layoutMeasurement (Größe des sichtbaren Bereichs) enthält. onMomentumScrollEnd wird nach Abschluss des Trägheitsscrollens ausgelöst. onScrollEndDrag — wenn der Benutzer den Finger vom Bildschirm hebt. Diese Ereignisse werden verwendet, um unendliches Scrollen, Parallaxeffekte und Lazy Loading zu implementieren.

Programmatische Steuerung über ref

ScrollView bietet Methoden zur programmatischen Steuerung über ref: scrollTo({x, y, animated}) scrollt zu den angegebenen Koordinaten, scrollToEnd({animated}) — scrollt zum Ende des Inhalts, flashScrollIndicators() — zeigt vorübergehend die Scroll-Indikatoren an.

const scrollRef = useRef(null);

// Nach oben scrollen
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Zum Ende scrollen
scrollRef.current.scrollToEnd({ animated: true });

Die programmatische Steuerung des Scrollens wird häufig in Chats (automatisches Scrollen zur letzten Nachricht), Formularen (Scrollen zu einem Feld mit Fehler) und Karussells (programmatisches Wischen) verwendet.

Unterschiede zwischen ScrollView und FlatList

Die Wahl zwischen ScrollView und FlatList ist eine der wichtigsten architektonischen Entscheidungen in React Native. Beide Komponenten bieten Scrollen, verwenden jedoch grundlegend unterschiedliche Rendering-Strategien. ScrollView rendert alles auf einmal, FlatList — nur die sichtbaren Elemente.

Auswahlregel: ScrollView — für Bildschirme, bei denen die Anzahl der untergeordneten Elemente bekannt ist und 20-30 nicht überschreitet (Benutzerprofil, Einstellungsformular, Produktseite). FlatList — für Listen mit potenziell vielen Elementen (Nachrichtenfeed, Produktkatalog, Chatnachrichten). Wenn der Inhalt heterogen ist (Kopfzeile, Formular, Karte, Fußzeile) — ist ScrollView vorzuziehen, da FlatList einheitliche Elemente erwartet.

Horizontales Scrollen und Paginierung

ScrollView unterstützt horizontales Scrollen über die horizontal-Prop und ist daher ideal für Karussells, Bildergalerien, Tabs und horizontale Listen. In Kombination mit der pagingEnabled-Prop (iOS) oder snapToInterval wird ScrollView zu einer Komponente für seitenbasierte Navigation.

Horizontales Karussell

Die horizontal-Eigenschaft wechselt die Scrollrichtung. pagingEnabled (iOS) aktiviert seitenbasiertes Scrollen, bei dem der Scrollvorgang nur an Elementgrenzen stoppt. snapToInterval legt den Snap-Schritt in Pixeln für beide Plattformen fest.

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

In diesem Karussell snapt pagingEnabled das Scrollen automatisch an die Grenzen jedes Bildes. onMomentumScrollEnd ermöglicht die Aktualisierung des aktuellen Seitenindikators. Ein solches Karussell läuft nativ und unterstützt Trägheitsscrollen.

Snap-Positionierung

Für nicht standardmäßige Snap-Schritte verwenden Sie snapToInterval (Schrittgröße in Pixeln) und snapToAlignment (start, center, end). Mit snapToOffsets können Sie ein Array von bestimmten Positionen zum Snappen angeben. Dies ist nützlich für horizontale Listen mit Karten unterschiedlicher Größe.

Praktische Beispiele mit ScrollView

Betrachten wir zwei typische Szenarien: einen Formularbildschirm (vertikales Scrollen) und eine horizontale Kategorieliste. Beide verwenden ScrollView mit verschiedenen Props für optimales Verhalten.

Beispiel 1: Profilbildschirm mit Formular

Eine Profilbearbeitungsseite enthält heterogene Elemente: Avatar, mehrere Eingabefelder, Schalter und einen Speichern-Button. ScrollView ermöglicht das Scrollen der gesamten Seite als Ganzes, anstatt jedes Blocks einzeln.

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

Die Prop keyboardShouldPersistTaps: 'handled' ermöglicht Scrollen und Interaktion mit dem Formular, während die Tastatur geöffnet ist. contentContainerStyle wendet Abstände auf den gesamten Inhalt an. Dieses Muster wird in allen Formularbildschirmen in React Native verwendet.

Beispiel 2: Horizontale Kategorieliste

Zur Navigation durch Kategorien (Chats, Filter, Tabs) wird ein horizontaler ScrollView mit Chips verwendet. Diese Komponente ist häufig in Marktplatz- und Social-Media-Anwendungen zu finden.

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

Ein horizontaler ScrollView mit deaktiviertem Indikator ist der Standard für Kategorieleisten. Jeder Chip ist eine separate Komponente mit einem Auswahlzustand. Die Prop showsHorizontalScrollIndicator: false entfernt die Bildlaufleiste, was den Erwartungen mobiler App-Benutzer entspricht.