View: τι είναι, ιδιότητες δοχείου και React Native

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

View είναι το θεμελιώδες στοιχείο React Native που λειτουργεί ως δοχείο για άλλα στοιχεία. Υποστηρίζει styling μέσω StyleSheet, διάταξη μέσω Flexbox, επεξεργασία αφής, κινούμενα σχέδια και μετασχηματισμούς. Το View είναι μια αφαίρεση πάνω από εγγενή στοιχεία δοχείου: UIView στο iOS και android.view.View στο Android.

Στο React Native δεν μπορούν να χρησιμοποιηθούν HTML στοιχεία — αντ’ αυτών όλες οι διατάξεις χτίζονται από View. Ακόμα και τα Text και Image είναι συνήθως τυλιγμένα σε View για τοποθέτηση. Το στοιχείο μπορεί να είναι κενό (μόνο δοχείο) ή να περιέχει οποιονδήποτε αριθμό θυγατρικών στοιχείων σε οποιοδήποτε βάθος.

Το View υποστηρίζει απόδοση και στις δύο πλατφόρμες από τον ίδιο κώδικα JavaScript. Οι ιδιότητες Flexbox, περιθώρια, φόντο, σκιές και περιγράμματα λειτουργούν το ίδιο σε iOS και Android. Οι διαφορές πλατφόρμας είναι ελάχιστες — για παράδειγμα, οι σκιές στο iOS χρησιμοποιούν shadowColor/shadowOffset, και στο Android elevation.

Σύμφωνα με το React Native Layout Docs, 2024, το View είναι βελτιστοποιημένο για φορητές συσκευές: δεν δημιουργεί περιττές εγγενείς αναπαραστάσεις κατά τη βελτιστοποίηση flatten και χειρίζεται σωστά την αλυσιδωτή ενημέρωση κατά την αλλαγή στυλ του γονέα.

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

Το στοιχείο View έχει ένα πλούσιο σύνολο props για τη διαχείριση εμφάνισης, τοποθέτησης και διαδραστικότητας. Όλα τα props χωρίζονται σε διάφορες κατηγορίες: styling, γεγονότα αφής, προσβασιμότητα και χαρακτηριστικά πλατφόρμας. Ας δούμε τις βασικές ομάδες.

Styling props του View

Το View υποστηρίζει όλες τις τυπικές ιδιότητες CSS για φορητές πλατφόρμες. Οι κυριότερες: flexDirection, justifyContent, alignItems για τοποθέτηση; margin, padding για αποστάσεις; backgroundColor, borderRadius για εμφάνιση; width, height, maxHeight για διαστάσεις.

Γεγονότα αφής και χειρονομίες

Το View μπορεί να επεξεργάζεται γεγονότα αφής μέσω των props onStartShouldSetResponder, onMoveShouldSetResponder και onResponderGrant. Αυτά τα γεγονότα επιτρέπουν την υλοποίηση προσαρμοσμένων χειρονομιών χωρίς βιβλιοθήκες. Για τυπικά κλικ χρησιμοποιούνται onTouchStart, onTouchEnd και onPress (μέσω Pressable ή TouchableOpacity).

Props πλατφόρμας

Στο iOS είναι διαθέσιμα shadowColor, shadowOffset, shadowOpacity, shadowRadius για σκιές. Στο Android αυτές οι ιδιότητες αγνοούνται — αντ’ αυτών χρησιμοποιείται το elevation. Τα callbacks onLayout καλούνται όταν αλλάζουν οι διαστάσεις του View, κάτι που είναι χρήσιμο για προσαρμοστικές διατάξεις.

Διάταξη με View και Flexbox

Flexbox είναι ο μοναδικός μηχανισμός διάταξης στο React Native (σε αντίθεση με το Web όπου είναι διαθέσιμα Grid και Float). Όλη η τοποθέτηση στοιχείων γίνεται μέσω των ιδιοτήτων Flexbox του στοιχείου View. Από προεπιλογή, το flexDirection στο View είναι ορισμένο σε column, όχι row όπως στο Web, που αντιστοιχεί στον κατακόρυφο προσανατολισμό των φορητών οθονών.

Βασικές ιδιότητες Flexbox στο View

flexDirection καθορίζει την κατεύθυνση του κύριου άξονα: column (προεπιλογή) ή row. justifyContent διαχειρίζεται την κατανομή κατά μήκος του κύριου άξονα (flex-start, center, space-between). alignItems — κατά μήκος του εγκάρσιου άξονα (stretch — προεπιλεγμένη τιμή). Το flex καθορίζει το μερίδιο του διαθέσιμου χώρου για το θυγατρικό στοιχείο.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const CardLayout = () => (
    <View style={styles.card}>
        <View style={styles.row}>
            <View style={styles.avatar} />
            <View style={styles.content}>
                <Text style={styles.name}>John Doe</Text>
                <Text style={styles.role}>Developer</Text>
            </View>
        </View>
    </View>
);

Το παράδειγμα δείχνει μια τυπική δομή: εξωτερικό View — κάρτα, εσωτερικό row — γραμμή με avatar και μπλοκ κειμένου, content — στήλη με όνομα και ρόλο. Αυτή η ένθετη δομή View είναι το πρότυπο για κάθε οθόνη React Native.

Διαφορές μεταξύ View και HTML div

Αν και το View είναι εννοιολογικά παρόμοιο με το HTML div, υπάρχουν βασικές διαφορές μεταξύ τους που είναι σημαντικό να κατανοηθούν κατά τη μεταφορά κώδικα από το Web στο React Native. Αυτές οι διαφορές αφορούν την απόδοση, τα στυλ και την προεπιλεγμένη συμπεριφορά.

Η πιο σημαντική διαφορά — προεπιλεγμένο flexDirection: column. Αυτό σημαίνει ότι χωρίς ρητή ρύθμιση, τα θυγατρικά στοιχεία τοποθετούνται κάθετα, όχι οριζόντια. Η δεύτερη διαφορά: τα width και height του View από προεπιλογή εκτείνονται σε όλο τον διαθέσιμο χώρο του γονέα (ανάλογο με το width: 100% στο CSS).

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

Ας δούμε δύο πραγματικά παραδείγματα χρήσης του View σε εφαρμογές React Native: κεντράρισμα περιεχομένου σε όλη την οθόνη και δημιουργία προσαρμοστικού πλέγματος καρτών. Και τα δύο μοτίβα συναντώνται σε κάθε έργο.

Παράδειγμα 1: οθόνη placeholder με κεντράρισμα

Για τη δημιουργία κενής κατάστασης (empty state) χρησιμοποιείται View με flex: 1 και κεντράρισμα και στους δύο άξονες. Αυτό είναι το τυπικό μοτίβο για οθόνες φόρτωσης, σφαλμάτων και κενών λιστών.

const EmptyState = ({ message }) => (
    <View style={styles.container}>
        <Text style={styles.icon}>{icon}</Text>
        <Text style={styles.message}>{message}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    icon: { fontSize: 48 },
    message: { fontSize: 16, color: '#666', marginTop: 16 },
});

Ο συνδυασμός justifyContent: center και alignItems: center σε View με flex: 1 κεντράρει το περιεχόμενο και στους δύο άξονες σε όλη την οθόνη. Αυτό είναι το πιο διαδεδομένο μοτίβο χρήσης του View στο React Native.

Παράδειγμα 2: πλέγμα καρτών με Flexbox

Για την εμφάνιση δύο στηλών προϊόντων ή άρθρων χρησιμοποιείται View με flexDirection: row, flexWrap: wrap και θυγατρικά View με σταθερό πλάτος. Αυτό το μοτίβο αντικαθιστά το CSS Grid στο React Native.

const ProductGrid = ({ products }) => (
    <View style={styles.grid}>
        {products.map((product) => (
            <View key={product.id} style={styles.card}>
                <Image source={{ uri: product.image }} />
                <Text>{product.name}</Text>
            </View>
        ))}
    </View>
);

const styles = StyleSheet.create({
    grid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    card: { width: '48%', marginBottom: 16 },
});

Σε αυτό το παράδειγμα, το εξωτερικό View με flexWrap: wrap λειτουργεί ως αντίστοιχο του CSS Grid. Κάθε κάρτα καταλαμβάνει το 48% του πλάτους, αφήνοντας κενά μεταξύ των στηλών. Αυτό είναι το τυπικό μοτίβο για καταλόγους και ροές περιεχομένου.