ScrollView — ce este, container de derulare și React Native

Ce este ScrollView în React Native

ScrollView — este o componentă React Native care își înfășoară conținutul într-un container derulabil. Dacă conținutul depășește limitele ecranului, utilizatorul poate derula vertical sau orizontal. ScrollView redă toate elementele copil la montare, indiferent dacă sunt vizibile pe ecran sau nu.

Spre deosebire de FlatList, care redă doar elementele vizibile (lazy rendering), ScrollView creează toate reprezentările native imediat. Acest lucru face ScrollView convenabil pentru formulare, pagini de setări, carduri de produs pe un singur ecran — oriunde numărul elementelor copil este mic (până la 20-30) sau numărul exact nu este cunoscut dinainte.

Conform React Native Using ScrollView, 2024, ScrollView suportă derularea îmbricată (de exemplu, ScrollView în interiorul ScrollView), efectul de bounce la atingerea marginii, indicatoare de derulare, fixarea poziției (snap) și gestionarea gesturilor. Pe iOS, ScrollView adaugă automat spațiu sub SafeArea prin contentInsetAdjustmentBehavior.

Proprietăți și API ale componentei ScrollView

ScrollView oferă un set bogat de proprietăți pentru controlul comportamentului de derulare, aspectului și interactivității. Să examinăm grupurile cheie: controlul derulării, setări vizuale, evenimente și caracteristici de platformă.

Controlul direcției și derulării

horizontal — comută direcția de derulare de la verticală (implicit) la orizontală. scrollEnabled — dezactivează derularea la nevoie. showsVerticalScrollIndicator și showsHorizontalScrollIndicator controlează afișarea indicatoarelor de derulare. bounces (iOS) activează/dezactivează efectul de bounce la atingerea marginii conținutului.

Evenimente ScrollView

Evenimentul principal — onScroll, apelat la fiecare derulare și care transmite un obiect cu nativeEvent, conținând contentOffset (poziția curentă), contentSize (dimensiunea conținutului), layoutMeasurement (dimensiunea zonei vizibile). onMomentumScrollEnd este apelat după terminarea derulării prin inerție. onScrollEndDrag — când utilizatorul a eliberat ecranul. Aceste evenimente sunt utilizate pentru implementarea derulării infinite, paralaxei și încărcării leneșe.

Control programatic prin ref

ScrollView oferă metode pentru control programatic prin referință: scrollTo({x, y, animated}) derulează la coordonatele specificate, scrollToEnd({animated}) — la sfârșitul conținutului, flashScrollIndicators() — arată temporar indicatoarele de derulare.

const scrollRef = useRef(null);

// Derulați sus
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Derulați la sfârșit
scrollRef.current.scrollToEnd({ animated: true });

Controlul programatic al derulării este adesea utilizat în chat-uri (derulare automată la ultimul mesaj), formulare (derulare la câmpul cu eroare) și carusele (derulare programatică).

Diferențele dintre ScrollView și FlatList

Alegerea între ScrollView și FlatList — una dintre deciziile arhitecturale cheie în React Native. Ambele componente asigură derularea, dar folosesc strategii fundamental diferite de redare. ScrollView redă totul imediat, FlatList — doar elementele vizibile.

Regula de alegere: ScrollView — pentru ecrane unde numărul elementelor copil este cunoscut și nu depășește 20-30 (profil de utilizator, formular de setări, pagină de produs). FlatList — pentru liste cu un număr potențial mare de elemente (flux de știri, catalog de produse, mesaje de chat). Dacă conținutul este eterogen (titlu, formular, card, footer) — ScrollView este preferabil, deoarece FlatList așteaptă elemente omogene.

Derularea orizontală și paginarea

ScrollView suportă derularea orizontală prin proprietatea horizontal, ceea ce îl face ideal pentru carusele, galerii de imagini, file și liste orizontale. În combinație cu proprietatea pagingEnabled (iOS) sau snapToInterval, ScrollView se transformă într-o componentă pentru navigare paginată.

Carusel orizontal

Proprietatea horizontal comută direcția de derulare. pagingEnabled (iOS) activează derularea paginată, unde derularea se oprește doar la marginile elementelor. snapToInterval setează pasul de fixare în pixeli pentru ambele platforme.

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

În acest carusel, pagingEnabled fixează automat derularea la marginile fiecărei imagini. onMomentumScrollEnd permite actualizarea indicatorului paginii curente. Un astfel de carusel funcționează nativ și suportă derularea prin inerție.

Fixarea la poziție (Snap)

Pentru pași de fixare personalizați se utilizează snapToInterval (dimensiunea pasului în pixeli) și snapToAlignment (start, center, end). Cu snapToOffsets se poate seta un array de poziții specifice pentru fixare. Acest lucru este util pentru liste orizontale cu carduri de dimensiuni diferite.

Exemple practice cu ScrollView

Să examinăm două scenarii tipice: ecranul cu formular (derulare verticală) și lista orizontală de categorii. Ambele utilizează ScrollView cu diferite proprietăți pentru un comportament optim.

Exemplul 1: ecran de profil cu formular

Pagina de editare a profilului conține elemente eterogene: avatar, câteva câmpuri de introducere, comutatoare și un buton de salvare. ScrollView permite derularea întregii pagini în întregime, nu a fiecărui bloc 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>
);

Proprietatea keyboardShouldPersistTaps: 'handled' permite derularea și interacțiunea cu formularul când tastatura este deschisă. contentContainerStyle aplică margini întregului conținut. Acest model este utilizat în toate ecranele cu formulare în React Native.

Exemplul 2: lista orizontală de categorii

Pentru navigarea pe categorii (chat-uri, filtre, file) se utilizează un ScrollView orizontal cu cipuri. O astfel de componentă apare frecvent în aplicațiile de marketplace și rețele sociale.

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 orizontal cu indicatorul dezactivat — standardul pentru bara de categorii. Fiecare cip este o componentă separată cu stare de selecție. Proprietatea showsHorizontalScrollIndicator: false ascunde bara de derulare, ceea ce corespunde așteptărilor utilizatorilor de aplicații mobile.