Text: was es ist, Textanzeige und React Native

Was ist Text in React Native

Text ist eine React Native-Komponente zur Anzeige von Textinhalten. Anders als in der Webentwicklung, wo es viele semantische Tags für Text gibt, werden in React Native alle Textelemente durch Text erstellt. Die Komponente kann sowohl einfachen Text als auch komplexe Strukturen mit verschachteltem Text und gestalteten Fragmenten anzeigen.

Text übernimmt automatisch den Zeilenumbruch, verwaltet Schriftfamilie, Größe, Farbe und Ausrichtung. Die Komponente unterstützt Touch-Ereignisse (onPress), was klickbare Links ohne zusätzliche Wrapper ermöglicht. Eine wichtige Einschränkung: Text kann nicht direkt in View verschachtelt werden — nur in anderen Text-Komponenten oder als direkte Kinder.

Laut React Native Nested Text, 2024 erben verschachtelte Text-Komponenten Stile vom Eltern-Element. Dies ermöglicht es, einen Basisstil auf oberster Ebene zu definieren und einzelne Eigenschaften für bestimmte Fragmente zu überschreiben — ähnlich wie span mit CSS im Web funktioniert.

Eigenschaften und API der Text-Komponente

Die Text-Komponente bietet eine Reihe von Props zur Steuerung von Anzeige, Verhalten und Barrierefreiheit. Hauptkategorien: Stil-Props (Schriftart, Größe, Farbe, Ausrichtung), Anzeige-Props (numberOfLines, lineBreakMode) und interaktive Props (onPress, onLongPress).

Textanzeige-Props

numberOfLines begrenzt die Anzahl der angezeigten Zeilen und fügt am Ende Auslassungspunkte hinzu. ellipsizeMode steuert die Position der Auslassungspunkte (head, middle, tail, clip). adjustsFontSizeToFit reduziert automatisch die Schriftgröße, um Text in die festgelegten Grenzen einzufügen. lineBreakMode bestimmt, wie Text über numberOfLines hinaus abgeschnitten wird.

Interaktive Props

Text unterstützt onPress und onLongPress zur Behandlung von Berührungen. Dies ermöglicht die Erstellung von Textlinks ohne TouchableOpacity. onTextLayout gibt Informationen über das Text-Layout nach dem Rendern zurück — nützlich für Animationen und Positionierung.

Plattformspezifische Props

Auf iOS sind disabled (deaktiviert Text), selectable (aktiviert Auswahl) und dataDetectorTypes (automatische Erkennung von Links, Telefonen, Adressen) verfügbar. Auf Android sind selectable (über textSelectable) und includeFontPadding (entfernt zusätzliche Abstände) verfügbar.

Unterschiede zwischen Text und den HTML-Elementen p und span

Obwohl Text optisch den HTML-Tags p und span ähnelt, sind die architektonischen Unterschiede erheblich. React Native hat kein DOM-Modell mit semantischen Textelementen — alle Textknoten werden über eine einzige Text-Komponente mit verschiedenen Props verarbeitet.

Der Hauptunterschied ist die Stilvererbung durch Text-Verschachtelung. Wenn ein äußerer Text fontSize: 18 und color: blue hat, erben alle verschachtelten Text-Komponenten diese Stile. Jede Eigenschaft kann im inneren Text durch Festlegen eines bestimmten Werts überschrieben werden. Dies spart Code und hält die Struktur sauberer.

Textgestaltung und Schriftarten

Text unterstützt die meisten CSS-Eigenschaften für Typografie: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. In React Native werden Schriftarten auf Plattformebene verbunden, nicht über @font-face.

Verwendung benutzerdefinierter Schriftarten

Um benutzerdefinierte Schriftarten zu verwenden, müssen sie zum Ordner assets/fonts hinzugefügt und in react-native.config.js angegeben werden. Nach dem Neuerstellen der Anwendung ist die Schriftart über fontFamily verfügbar. React Native unterstützt Webschriftarten (Google Fonts) nicht direkt — es müssen .ttf- oder .otf-Dateien heruntergeladen werden.

Stilvererbung und Kaskade

Der Vererbungsmechanismus in Text unterscheidet sich von CSS. Stile werden nur von Text zu verschachteltem Text weitergegeben, nicht aber von View zu Text. Um eine Schriftart für die gesamte Anwendung festzulegen, werden defaultProps der Text-Komponente oder eine benutzerdefinierte Wrapper-Komponente verwendet.

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

In diesem Beispiel setzt der äußere Text fontSize: 18 und color: #333. Der innere Text erbt fontSize (18), überschreibt aber fontWeight auf bold und color auf #007AFF. Der äußere Text erbt nur seine eigenen Stile. Dies ist eine genaue Analogie zur Funktionsweise von verschachteltem span in HTML.

Praktische Beispiele mit Text

Betrachten wir zwei typische Anwendungsfälle für Text in React Native: Textformatierung mit Verschachtelung und Erstellung einer klickbaren Komponente mit Zeilenbegrenzung.

Beispiel 1: Nachrichtenkarte mit Formatierung

In diesem Beispiel wird Text verwendet, um mehrzeiligen Text mit hervorgehobenen Elementen anzuzeigen: Titel, Datum und Inhalt mit einem Link.

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

Diese Struktur hat drei unabhängige Text-Komponenten (Titel, Datum, Inhalt), jede mit ihrem eigenen Stil. Innerhalb des Inhalts-Textes ist ein weiterer Text mit onPress für den Link verschachtelt. Dieses Muster wird für Nachrichten-Feeds, Blogs und Kommentare verwendet.

Beispiel 2: Text mit Zeilenbegrenzung

Zur Anzeige von Textvorschauen mit Auslassungspunkten wird numberOfLines verwendet. Dies ist ein Standardmuster für Produktkarten und Artikellisten.

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

Die Eigenschaft numberOfLines = 2 begrenzt den Text auf zwei Zeilen. Wenn der Text länger ist, fügt React Native automatisch Auslassungspunkte am Ende der zweiten Zeile hinzu. Der Parameter ellipsizeMode: 'tail' gibt an, dass die Auslassungspunkte am Ende stehen sollen (head, middle und clip sind ebenfalls verfügbar).