ScrollView — τι είναι, scroll container και React Native

Τι είναι το ScrollView στο React Native

ScrollView — είναι ένα στοιχείο React Native που περιβάλλει το περιεχόμενό του σε ένα scrollable container. Εάν το περιεχόμενο υπερβαίνει τα όρια της οθόνης, ο χρήστης μπορεί να το κυλήσει κάθετα ή οριζόντια. Το ScrollView κάνει render όλα τα θυγατρικά στοιχεία κατά την τοποθέτηση, ανεξάρτητα από το αν είναι ορατά στην οθόνη ή όχι.

Σε αντίθεση με το FlatList, το οποίο κάνει render μόνο τα ορατά στοιχεία (lazy rendering), το ScrollView δημιουργεί όλες τις εγγενείς αναπαραστάσεις ταυτόχρονα. Αυτό καθιστά το ScrollView βολικό για φόρμες, σελίδες ρυθμίσεων, κάρτες προϊόντων σε μία οθόνη — παντού όπου ο αριθμός των θυγατρικών στοιχείων είναι μικρός (έως 20-30) ή ο ακριβής αριθμός τους δεν είναι γνωστός εκ των προτέρων.

Σύμφωνα με το React Native Using ScrollView, 2024, το ScrollView υποστηρίζει ένθετη κύλιση (π.χ. ScrollView μέσα σε ScrollView), εφέ αναπήδησης κατά την επίτευξη του άκρου, δείκτες κύλισης, ασφάλιση θέσης (snap) και διαχείριση χειρονομιών. Στο iOS, το ScrollView προσθέτει αυτόματα κενό κάτω από το SafeArea μέσω του contentInsetAdjustmentBehavior.

Ιδιότητες και API του στοιχείου ScrollView

ScrollView παρέχει ένα πλούσιο σύνολο ιδιοτήτων για τον έλεγχο της συμπεριφοράς κύλισης, της εμφάνισης και της διαδραστικότητας. Ας εξετάσουμε τις βασικές ομάδες: έλεγχος κύλισης, οπτικές ρυθμίσεις, συμβάντα και χαρακτηριστικά πλατφόρμας.

Έλεγχος κατεύθυνσης και κύλισης

horizontal — αλλάζει την κατεύθυνση κύλισης από κάθετη (προεπιλογή) σε οριζόντια. scrollEnabled — απενεργοποιεί την κύλιση αν χρειαστεί. showsVerticalScrollIndicator και showsHorizontalScrollIndicator ελέγχουν την εμφάνιση των δεικτών κύλισης. bounces (iOS) ενεργοποιεί/απενεργοποιεί το εφέ αναπήδησης κατά την επίτευξη του άκρου του περιεχομένου.

Συμβάντα ScrollView

Το κύριο συμβάν — onScroll, το οποίο καλείται σε κάθε κύλιση και μεταδίδει ένα αντικείμενο με nativeEvent που περιέχει contentOffset (τρέχουσα θέση), contentSize (μέγεθος περιεχομένου), layoutMeasurement (μέγεθος ορατής περιοχής). onMomentumScrollEnd καλείται μετά την ολοκλήρωση της αδρανειακής κύλισης. onScrollEndDrag — όταν ο χρήστης απελευθέρωσε την οθόνη. Αυτά τα συμβάντα χρησιμοποιούνται για την υλοποίηση ατέρμονης κύλισης, παράλλαξης και lazy loading.

Προγραμματικός έλεγχος μέσω 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. Και τα δύο στοιχεία παρέχουν κύλιση, αλλά χρησιμοποιούν θεμελιωδώς διαφορετικές στρατηγικές render. Το ScrollView κάνει render τα πάντα ταυτόχρονα, το FlatList — μόνο τα ορατά στοιχεία.

Κανόνας επιλογής: ScrollView — για οθόνες όπου ο αριθμός θυγατρικών στοιχείων είναι γνωστός και δεν υπερβαίνει τα 20-30 (προφίλ χρήστη, φόρμα ρυθμίσεων, σελίδα προϊόντος). FlatList — για λίστες με δυνητικά μεγάλο αριθμό στοιχείων (ροή ειδήσεων, κατάλογος προϊόντων, μηνύματα συνομιλίας). Εάν το περιεχόμενο είναι ετερογενές (τίτλος, φόρμα, κάρτα, υποσέλιδο) — το ScrollView είναι προτιμότερο, καθώς το FlatList αναμένει ομοιογενή στοιχεία.

Οριζόντια κύλιση και σελιδοποίηση

ScrollView υποστηρίζει οριζόντια κύλιση μέσω της ιδιότητας horizontal, καθιστώντας το ιδανικό για καρουζέλ, γκαλερί εικόνων, καρτέλες και οριζόντιες λίστες. Σε συνδυασμό με την ιδιότητα pagingEnabled (iOS) ή snapToInterval, το ScrollView μετατρέπεται σε στοιχείο για πλοήγηση σελίδων.

Οριζόντιο καρουζέλ

Η ιδιότητα horizontal αλλάζει την κατεύθυνση κύλισης. Το pagingEnabled (iOS) ενεργοποιεί την κύλιση σελίδας, όπου η κύλιση σταματά μόνο στα όρια των στοιχείων. snapToInterval ορίζει το βήμα ασφάλισης σε pixel και για τις δύο πλατφόρμες.

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 (μέγεθος βήματος σε pixel) και snapToAlignment (start, center, end). Μέσω του snapToOffsets μπορεί να οριστεί ένας πίνακας συγκεκριμένων θέσεων για ασφάλιση. Αυτό είναι χρήσιμο για οριζόντιες λίστες με κάρτες διαφορετικών μεγεθών.

Πρακτικά παραδείγματα με ScrollView

Ας εξετάσουμε δύο τυπικά σενάρια: οθόνη με φόρμα (κάθετη κύλιση) και οριζόντια λίστα κατηγοριών. Και τα δύο χρησιμοποιούν ScrollView με διαφορετικές ιδιότητες για βέλτιστη συμπεριφορά.

Παράδειγμα 1: οθόνη προφίλ με φόρμα

Η σελίδα επεξεργασίας προφίλ περιέχει ετερογενή στοιχεία: avatar, πολλά πεδία εισόδου, διακόπτες και κουμπί αποθήκευσης. Το 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 με chips. Ένα τέτοιο στοιχείο συναντάται συχνά σε εφαρμογές marketplace και κοινωνικών δικτύων.

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 με απενεργοποιημένο δείκτη — πρότυπο για τη γραμμή κατηγοριών. Κάθε chip είναι ένα ξεχωριστό στοιχείο με κατάσταση επιλογής. Η ιδιότητα showsHorizontalScrollIndicator: false κρύβει τη γραμμή κύλισης, που ανταποκρίνεται στις προσδοκίες των χρηστών εφαρμογών για κινητά.