0Pricing
React Native Academy · Lektion

Text anzeigen und Schriften formatieren

Geben Sie Text mit der Text-Komponente aus, wenden Sie die Styles fontSize, fontWeight, color und lineHeight an und behandeln Sie mehrzeilige Inhalte zuverlässig.

Text anzeigen und Schriften formatieren ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

The Text Component Basics

In React Native, every word lives inside a Text component. Loose strings outside one will crash — so Text wraps all the text you show.

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

export default function Greeting() {
  return (
    <View>
      <Text>Hello, World!</Text>
      {/* This would cause an error: */}
      {/* Hello, World!  ← raw string outside Text */}
    </View>
  );
}

fontSize and fontWeight

Size text with fontSize (a number) and thickness with fontWeight like "bold" or "600". Custom fonts may only have some weights, so test on a real device.

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

export default function Typography() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.h1}>Heading 1</Text>
      <Text style={styles.h2}>Heading 2</Text>
      <Text style={styles.body}>Regular body text for paragraphs.</Text>
      <Text style={styles.caption}>Small caption text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: 32, fontWeight: '700', color: '#111' },
  h2: { fontSize: 24, fontWeight: '600', color: '#333' },
  body: { fontSize: 16, fontWeight: '400', color: '#555', lineHeight: 24 },
  caption: { fontSize: 12, fontWeight: '300', color: '#999' },
});

color and lineHeight

Set the text color with a hex or named value, and use lineHeight to space lines apart. A little breathing room makes longer text far easier to read.

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

export default function Article() {
  return (
    <Text style={styles.paragraph}>
      React Native brings the best parts of mobile development
      together, combining a smooth native experience with the
      speed of JavaScript development.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    color: '#444',
    lineHeight: 26,     // 26/16 = 1.625× line height
    letterSpacing: 0.2, // slight tracking for readability
  },
});

textAlign and Text Decoration

Position text with textAlign (left, center, right) and dress it up with textDecorationLine for underlines or textTransform for uppercase — just like CSS.

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

export default function TextStyling() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.centered}>Centered heading</Text>
      <Text style={styles.link}>Tap to visit website</Text>
      <Text style={styles.strikethrough}>Old price: $29.99</Text>
      <Text style={styles.uppercase}>sale ends tonight</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: { textAlign: 'center', fontSize: 20, fontWeight: 'bold' },
  link: { color: '#0066cc', textDecorationLine: 'underline' },
  strikethrough: { textDecorationLine: 'line-through', color: '#999' },
  uppercase: { textTransform: 'uppercase', letterSpacing: 2, fontSize: 14 },
});

Nested Text for Mixed Styles

Nest Text inside Text to mix styles in one line, like a single bold word. Inner Text inherits the parent style and overrides only what you set.

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

export default function MixedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>
        Welcome back,{' '}
        <Text style={{ fontWeight: 'bold', color: '#0066cc' }}>
          Alice
        </Text>
        ! You have{' '}
        <Text style={{ color: 'red', fontWeight: '600' }}>3</Text>
        {' '}unread messages.
      </Text>
    </View>
  );
}

numberOfLines and ellipsizeMode

Use numberOfLines to cap how many lines show, and ellipsizeMode to add the "..." at the end. Great for list titles that should never wrap forever.

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

const longTitle = 'The Complete Guide to Building Production-Ready React Native Applications in 2024';

export default function TruncatedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>
        {longTitle}
      </Text>
      <Text numberOfLines={2} ellipsizeMode='tail' style={styles.body}>
        {longTitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  body: { fontSize: 14, color: '#666' },
});

Loading Custom Fonts with expo-font

Want your own font? Drop a .ttf in assets, then load it with the useFonts hook from expo-font. Wait until it is ready to avoid a flash of plain text.

import { useFonts } from 'expo-font';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
  });

  if (!fontsLoaded) return null; // Show splash or null while loading

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Poppins-Bold', fontSize: 24 }}>
        Custom Font Heading
      </Text>
      <Text style={{ fontFamily: 'Poppins-Regular', fontSize: 16 }}>
        Body text with Poppins Regular.
      </Text>
    </View>
  );
}

Google Fonts with @expo-google-fonts

Even easier: the @expo-google-fonts packages bundle any Google Font for you. Install one, import the hook, and use its name — no manual files needed.

import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
  });

  if (!fontsLoaded) return null;

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 24 }}>
        Inter Bold
      </Text>
      <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 16 }}>
        Inter Regular body text.
      </Text>
    </View>
  );
}

Selectable Text and onPress

By default Text cannot be copied. Add the selectable prop to allow it, or an onPress handler to make a word act like a tappable link.

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

export default function InteractiveText() {
  return (
    <View style={{ padding: 16 }}>
      {/* Selectable text (user can copy) */}
      <Text selectable style={{ fontSize: 14, color: '#333', marginBottom: 16 }}>
        Long-press to select and copy this text.
      </Text>

      {/* Tappable text link */}
      <Text
        style={{ color: '#0066cc', fontSize: 16 }}
        onPress={() => Alert.alert('Link tapped!')}
        accessibilityRole='link'
      >
        Terms and Conditions
      </Text>
    </View>
  );
}

Handling Multiline and Long Content

Text wraps on its own when it runs out of room. Inside a flex row, add flexShrink: 1 so a long line shrinks instead of pushing things off screen.

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

export default function Article() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={styles.row}>
        <Text style={styles.label}>Title:</Text>
        {/* flexShrink prevents overflowing the row */}
        <Text style={styles.value} numberOfLines={1}>
          A Very Long Article Title That Would Otherwise Overflow
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontWeight: 'bold', color: '#333' },
  value: { flexShrink: 1, color: '#666' },
});

Text Accessibility: accessibilityLabel

For screen reader users, add an accessibilityLabel to Text that is not self-explanatory. It helps VoiceOver and TalkBack describe your app clearly.

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

export default function AccessibleText() {
  return (
    <View>
      {/* Screen reader will say: 'Alice, 5 unread messages' */}
      <View accessible accessibilityLabel='Alice, 5 unread messages'>
        <Text style={{ fontWeight: 'bold' }}>Alice</Text>
        <Text style={{ color: 'red' }}>5</Text>
      </View>

      <TouchableOpacity
        accessibilityLabel='Delete account'
        accessibilityHint='Double tap to permanently delete your account'
      >
        <Text style={{ color: 'red' }}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}

Quick Check

Quick check! Lock in what you learned about Text and fonts. ✨

Lesson Recap

Great job! All text lives in Text, fontSize and color shape it, and expo-font makes custom typefaces easy. Next up: showing images.

Häufig gestellte Fragen

Ist die Lektion „Text anzeigen und Schriften formatieren“ kostenlos?

Ja — der vollständige Text von „Text anzeigen und Schriften formatieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Text anzeigen und Schriften formatieren“?

Geben Sie Text mit der Text-Komponente aus, wenden Sie die Styles fontSize, fontWeight, color und lineHeight an und behandeln Sie mehrzeilige Inhalte zuverlässig. Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Native Academy zu starten?

Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Text anzeigen und Schriften formatieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Die View-Komponente als Container
  2. Text anzeigen und Schriften formatieren
  3. Bilder aus lokalen und entfernten Quellen anzeigen
  4. Eine einfache Profilkarte erstellen
← Zurück zu React Native Academy