Text: τι είναι, εμφάνιση κειμένου και React Native

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

Text είναι ένα στοιχείο React Native για εμφάνιση περιεχομένου κειμένου. Σε αντίθεση με την ανάπτυξη ιστού, όπου υπάρχουν πολλές σημασιολογικές ετικέτες για κείμενο, στο React Native όλα τα στοιχεία κειμένου δημιουργούνται μέσω του Text. Το στοιχείο μπορεί να εμφανίσει τόσο απλό κείμενο όσο και περίπλοκες δομές με ένθετα Text και στυλιζαρισμένα τμήματα.

Το Text χειρίζεται αυτόματα την αναδίπλωση γραμμών, ελέγχει την οικογένεια γραμματοσειράς, το μέγεθος, το χρώμα και τη στοίχιση. Το στοιχείο υποστηρίζει συμβάντα αφής (onPress), επιτρέποντας τη δημιουργία κλικ άνω συνδέσμων χωρίς επιπλέον περιτυλίγματα. Σημαντικός περιορισμός: το Text δεν μπορεί να τοποθετηθεί απευθείας σε View — μόνο σε άλλα στοιχεία Text ή ως άμεσο περιεχόμενο.

Σύμφωνα με το React Native Nested Text, 2024, τα ένθετα στοιχεία Text κληρονομούν στυλ από τον γονέα. Αυτό επιτρέπει τον καθορισμό βασικού στυλ στο ανώτερο επίπεδο και την παράκαμψη μεμονωμένων ιδιοτήτων για συγκεκριμένα τμήματα — παρόμοια με τη λειτουργία του span με CSS στον ιστό.

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

Το στοιχείο Text παρέχει ένα σύνολο props για διαχείριση εμφάνισης, συμπεριφοράς και προσβασιμότητας. Βασικές κατηγορίες: props στυλ (γραμματοσειρά, μέγεθος, χρώμα, στοίχιση), props εμφάνισης (numberOfLines, lineBreakMode) και διαδραστικά (onPress, onLongPress).

Props εμφάνισης κειμένου

numberOfLines περιορίζει τον αριθμό των εμφανιζόμενων γραμμών, προσθέτοντας αποσιωπητικά στο τέλος. ellipsizeMode ελέγχει τη θέση των αποσιωπητικών (head, middle, tail, clip). adjustsFontSizeToFit μειώνει αυτόματα το μέγεθος γραμματοσειράς ώστε το κείμενο να χωρά στα καθορισμένα όρια. lineBreakMode καθορίζει πώς θα περικοπεί το κείμενο πέρα από το numberOfLines.

Διαδραστικά props

Το Text υποστηρίζει onPress και onLongPress για επεξεργασία αφής. Αυτό επιτρέπει τη δημιουργία συνδέσμων κειμένου χωρίς χρήση TouchableOpacity. onTextLayout επιστρέφει πληροφορίες σχετικά με τη θέση του κειμένου μετά την απόδοση — χρήσιμο για κινούμενα σχέδια και τοποθέτηση.

Props πλατφόρμας

Στο iOS είναι διαθέσιμα disabled (απενεργοποίηση κειμένου), selectable (ενεργοποίηση επιλογής), dataDetectorTypes (αυτόματη αναγνώριση συνδέσμων, τηλεφώνων, διευθύνσεων). Στο Android είναι διαθέσιμα selectable (μέσω textSelectable), includeFontPadding (αφαίρεση περιττών διαστημάτων).

Διαφορές του Text από τα στοιχεία HTML p και span

Αν και το Text οπτικά μοιάζει με τις ετικέτες HTML p και span, οι αρχιτεκτονικές διαφορές είναι σημαντικές. Στο React Native λείπει το μοντέλο DOM με σημασιολογικά στοιχεία κειμένου — όλοι οι κόμβοι κειμένου διαχειρίζονται μέσω ενός ενιαίου στοιχείου Text με διαφορετικά props.

Η βασική διαφορά — κληρονομικότητα στυλ μέσω ένθεσης Text. Αν το εξωτερικό Text έχει fontSize: 18 και color: blue, όλα τα ένθετα Text κληρονομούν αυτά τα στυλ. Οποιαδήποτε ιδιότητα μπορεί να παρακαμφθεί στο εσωτερικό Text ορίζοντας συγκεκριμένη τιμή. Αυτό εξοικονομεί κώδικα και καθιστά τη δομή πιο καθαρή.

Styling κειμένου και γραμματοσειρές

Το Text υποστηρίζει τις περισσότερες ιδιότητες CSS για τυπογραφία: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. Στο React Native, οι γραμματοσειρές συνδέονται σε επίπεδο πλατφόρμας, όχι μέσω @font-face.

Σύνδεση προσαρμοσμένων γραμματοσειρών

Για χρήση προσαρμοσμένων γραμματοσειρών, πρέπει να προστεθούν στο φάκελο assets/fonts και να καθοριστούν στο react-native.config.js. Μετά την ανακατασκευή της εφαρμογής, η γραμματοσειρά γίνεται διαθέσιμη μέσω fontFamily. Το React Native δεν υποστηρίζει άμεσα γραμματοσειρές ιστού (Google Fonts) — απαιτείται λήψη αρχείων .ttf ή .otf.

Κληρονομικότητα και αλληλουχία στυλ

Ο μηχανισμός κληρονομικότητας στο Text διαφέρει από το CSS. Τα στυλ μεταφέρονται μόνο από Text σε ένθετο Text, αλλά όχι από View σε Text. Αν χρειάζεται να οριστεί γραμματοσειρά για ολόκληρη την εφαρμογή, χρησιμοποιείται το defaultProps του στοιχείου Text ή ένα προσαρμοσμένο στοιχείο-περιτύλιγμα.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

Σε αυτό το παράδειγμα, το εξωτερικό Text ορίζει fontSize: 18 και color: #333. Το εσωτερικό Text κληρονομεί το fontSize (18), αλλά παρακάμπτει το fontWeight σε bold και το color σε #007AFF. Το εξωτερικό Text κληρονομεί μόνο τα δικά του στυλ. Αυτή είναι ακριβής αναλογία της λειτουργίας ένθετων span στην HTML.

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

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

Παράδειγμα 1: κάρτα είδησης με μορφοποίηση

Σε αυτό το παράδειγμα, το Text χρησιμοποιείται για εμφάνιση πολύγραμμου κειμένου με επισημασμένα στοιχεία: τίτλος, ημερομηνία και περιεχόμενο με σύνδεσμο.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

Σε αυτή τη δομή υπάρχουν τρία ανεξάρτητα στοιχεία Text (τίτλος, ημερομηνία, περιεχόμενο), το καθένα με το δικό του στυλ. Μέσα στο Text με περιεχόμενο είναι ένθετο ένα άλλο Text με onPress για τον σύνδεσμο. Αυτό το μοτίβο χρησιμοποιείται για ροές ειδήσεων, ιστολόγια και σχόλια.

Παράδειγμα 2: κείμενο με περιορισμό γραμμών

Για εμφάνιση προεπισκόπησης κειμένου με αποσιωπητικά χρησιμοποιείται το numberOfLines. Αυτό είναι ένα τυπικό μοτίβο για κάρτες προϊόντων και άρθρα σε λίστες.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

Η ιδιότητα numberOfLines = 2 περιορίζει το κείμενο σε δύο γραμμές. Αν το κείμενο είναι μεγαλύτερο, το React Native προσθέτει αυτόματα αποσιωπητικά στο τέλος της δεύτερης γραμμής. Η παράμετρος ellipsizeMode: 'tail' υποδεικνύει ότι τα αποσιωπητικά πρέπει να είναι στο τέλος (διαθέσιμα είναι επίσης head, middle, clip).