View: Was ist das, Containereigenschaften und React Native

Was ist View in React Native

View ist eine grundlegende React Native-Komponente, die als Container für andere Komponenten dient. Sie unterstützt Styling über StyleSheet, Layout über Flexbox, Berührungsverarbeitung, Animationen und Transformationen. View ist eine Abstraktion über native Containerelemente: UIView auf iOS und android.view.View auf Android.

In React Native ist es nicht möglich, HTML-Elemente zu verwenden — stattdessen werden alle Layouts aus View aufgebaut. Sogar Text und Image werden normalerweise zur Positionierung in View eingewickelt. Die Komponente kann leer sein (nur ein Container) oder eine beliebige Anzahl von Kindelementen in beliebiger Verschachtelungstiefe enthalten.

View unterstützt Rendering auf beiden Plattformen aus einer einzigen JavaScript-Codebasis. Flexbox-Eigenschaften, Abstände, Hintergrund, Schatten und Rahmen funktionieren auf iOS und Android identisch. Plattformunterschiede sind minimal — zum Beispiel verwenden Schatten auf iOS shadowColor/shadowOffset, während auf Android elevation verwendet wird.

Laut React Native Layout Docs, 2024 ist View für mobile Geräte optimiert: Es erstellt während der Flatten-Optimierung keine zusätzlichen nativen Ansichten und verarbeitet kaskadierende Aktualisierungen korrekt, wenn sich die übergeordneten Stile ändern.

Eigenschaften und API der View-Komponente

Die View-Komponente verfügt über eine umfangreiche Sammlung von Props zur Steuerung von Aussehen, Layout und Interaktivität. Alle Props fallen in mehrere Kategorien: Style-Props, Berührungsereignisse, Barrierefreiheit und plattformspezifische Funktionen. Lassen Sie uns die wichtigsten Gruppen untersuchen.

View-Style-Props

View unterstützt alle standardmäßigen CSS-Eigenschaften für mobile Plattformen. Zu den wichtigsten gehören: flexDirection, justifyContent, alignItems zur Positionierung; margin, padding für Abstände; backgroundColor, borderRadius für das Aussehen; width, height, maxHeight für die Größenbestimmung.

Berührungsereignisse und Gesten

View kann Berührungsereignisse über die Props onStartShouldSetResponder, onMoveShouldSetResponder und onResponderGrant verarbeiten. Diese Ereignisse ermöglichen die Implementierung benutzerdefinierter Gesten ohne Bibliotheken. Für Standard-Tippvorgänge werden onTouchStart, onTouchEnd und onPress (über Pressable oder TouchableOpacity) verwendet.

Plattformspezifische Props

Auf iOS stehen shadowColor, shadowOffset, shadowOpacity, shadowRadius für Schatten zur Verfügung. Auf Android werden diese Eigenschaften ignoriert — stattdessen wird elevation verwendet (ein kartenartiger Schatten). Der onLayout-Callback wird ausgelöst, wenn sich die Abmessungen von View ändern, was für adaptive Layouts nützlich ist.

Layout mit View und Flexbox

Flexbox ist der einzige Layout-Mechanismus in React Native (im Gegensatz zum Web, wo Grid und Float verfügbar sind). Die gesamte Elementpositionierung erfolgt über die Flexbox-Eigenschaften der View-Komponente. Standardmäßig ist flexDirection bei View auf column gesetzt, nicht auf row wie im Web, was der vertikalen Ausrichtung mobiler Bildschirme entspricht.

Wichtige Flexbox-Eigenschaften in View

flexDirection bestimmt die Hauptachsenrichtung: column (Standard) oder row. justifyContent steuert die Verteilung entlang der Hauptachse (flex-start, center, space-between). alignItems — entlang der Querachse (stretch — Standardwert). flex gibt den Anteil des verfügbaren Platzes für ein Kindelement an.

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

Das Beispiel zeigt eine typische Struktur: ein äußeres View — Karte, eine innere row — eine Zeile mit Avatar und Textblock, content — eine Spalte mit Name und Rolle. Diese verschachtelte View-Struktur ist der Standard für jeden React Native-Bildschirm.

Unterschiede zwischen View und HTML-div

Obwohl View konzeptionell dem HTML-div ähnelt, gibt es wichtige Unterschiede, die beim Portieren von Code vom Web auf React Native zu verstehen sind. Diese Unterschiede betreffen das Rendering, die Stile und das Standardverhalten.

Der wichtigste Unterschied ist standardmäßig flexDirection: column. Das bedeutet, dass ohne explizite Konfiguration Kindelemente vertikal und nicht horizontal angeordnet werden. Der zweite Unterschied: Die Breite und Höhe von View dehnen sich standardmäßig aus, um den gesamten verfügbaren Platz des übergeordneten Elements auszufüllen (analog zu width: 100% in CSS).

Praktische Beispiele mit View

Sehen wir uns zwei reale Beispiele für die Verwendung von View in React Native-Anwendungen an: Zentrieren von Inhalten über den gesamten Bildschirm und Erstellen eines responsiven Kartenrasters. Beide Muster kommen in jedem Projekt vor.

Beispiel 1: Platzhalterbildschirm mit Zentrierung

Um einen leeren Zustand zu erstellen, wird ein View mit flex: 1 und Zentrierung auf beiden Achsen verwendet. Dies ist ein Standardmuster für Ladebildschirme, Fehlerzustände und leere Listen.

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

Die Kombination von justifyContent: center und alignItems: center in einem View mit flex: 1 zentriert den Inhalt auf beiden Achsen über den gesamten Bildschirm. Dies ist das häufigste Muster der View-Verwendung in React Native.

Beispiel 2: Kartenraster mit Flexbox

Um zwei Spalten von Produkten oder Artikeln anzuzeigen, wird ein View mit flexDirection: row, flexWrap: wrap und untergeordneten Views mit fester Breite verwendet. Dieses Muster ersetzt CSS Grid in 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 },
});

In diesem Beispiel fungiert das äußere View mit flexWrap: wrap als Analogon von CSS Grid. Jede Karte nimmt 48% der Breite ein und lässt Lücken zwischen den Spalten. Dies ist ein typisches Muster für Kataloge und Content-Feeds.