View: co to jest, właściwości kontenera i React Native

Czym jest View w React Native

View to fundamentalny komponent React Native, który służy jako kontener dla innych komponentów. Obsługuje stylizację przez StyleSheet, układ przez Flexbox, obsługę dotyku, animacje i transformacje. View jest abstrakcją nad natywnymi elementami kontenerów: UIView na iOS i android.view.View na Androidzie.

W React Native nie można używać elementów HTML — zamiast nich wszystkie układy są budowane z View. Nawet Text i Image są zwykle owinięte w View do pozycjonowania. Komponent może być pusty (tylko kontener) lub zawierać dowolną liczbę elementów potomnych o dowolnym zagnieżdżeniu.

View obsługuje renderowanie na obie platformy z jednego kodu JavaScript. Właściwości Flexbox, marginesy, tło, cienie i obramowania działają tak samo na iOS i Androidzie. Różnice platformowe są minimalne — na przykład cienie na iOS używają shadowColor/shadowOffset, a na Androidzie — elevation.

Według React Native Layout Docs, 2024, View jest zoptymalizowany dla urządzeń mobilnych: nie tworzy niepotrzebnych natywnych reprezentacji przy optymalizacji flatten i poprawnie obsługuje kaskadową aktualizację przy zmianie stylów rodzica.

Właściwości i API komponentu View

Komponent View ma bogaty zestaw propsów do zarządzania wyglądem, rozmieszczeniem i interaktywnością. Wszystkie propsy dzielą się na kilka kategorii: stylowe, zdarzenia dotyku, dostępność i cechy platformowe. Przyjrzyjmy się kluczowym grupom.

Stylowe propsy View

View obsługuje wszystkie standardowe właściwości CSS dla platform mobilnych. Kluczowe z nich: flexDirection, justifyContent, alignItems do pozycjonowania; margin, padding do marginesów; backgroundColor, borderRadius do wyglądu; width, height, maxHeight do rozmiarów.

Zdarzenia dotyku i gesty

View może przetwarzać zdarzenia dotyku przez propsy onStartShouldSetResponder, onMoveShouldSetResponder i onResponderGrant. Te zdarzenia pozwalają na implementację niestandardowych gestów bez bibliotek. Do standardowych kliknięć używa się onTouchStart, onTouchEnd i onPress (przez Pressable lub TouchableOpacity).

Propsy platformowe

Na iOS dostępne są shadowColor, shadowOffset, shadowOpacity, shadowRadius do cieni. Na Androidzie te właściwości są ignorowane — zamiast nich używa się elevation (cień z reprezentacji karty). Callbacki onLayout są wywoływane przy zmianie rozmiarów View, co jest przydatne do adaptacyjnych układów.

Układ z View i Flexbox

Flexbox to jedyny mechanizm układu w React Native (w przeciwieństwie do Web, gdzie dostępne są Grid i Float). Całe pozycjonowanie elementów odbywa się przez właściwości Flexbox komponentu View. Domyślnie u View flexDirection jest ustawiony na column, a nie row jak w Web, co odpowiada pionowej orientacji ekranów mobilnych.

Podstawowe właściwości Flexbox w View

flexDirection określa kierunek głównej osi: column (domyślnie) lub row. justifyContent zarządza rozmieszczeniem wzdłuż osi głównej (flex-start, center, space-between). alignItems — wzdłuż osi poprzecznej (stretch — wartość domyślna). flex określa udział dostępnego miejsca dla elementu potomnego.

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

W przykładzie pokazano typową strukturę: zewnętrzny View — karta, wewnętrzny row — wiersz z awatarem i blokiem tekstu, content — kolumna z nazwą i rolą. Taka zagnieżdżona struktura View to standard dla każdego ekranu React Native.

Różnice między View a HTML div

Chociaż View jest koncepcyjnie podobny do HTML div, istnieją między nimi kluczowe różnice, które ważne jest zrozumieć przy przenoszeniu kodu z Web na React Native. Różnice te dotyczą renderowania, stylów i domyślnego zachowania.

Najważniejsza różnica — domyślnie flexDirection: column. Oznacza to, że bez jawnego ustawienia elementy potomne są rozmieszczane pionowo, a nie poziomo. Druga różnica: width i height View domyślnie rozciągają się na całe dostępne miejsce rodzica (analogicznie do width: 100% w CSS).

Praktyczne przykłady z View

Przyjrzyjmy się dwóm rzeczywistym przykładom użycia View w aplikacjach React Native: centrowanie treści na całym ekranie i tworzenie adaptacyjnej siatki kafelek. Oba wzorce występują w każdym projekcie.

Przykład 1: ekran zastępczy z centrowaniem

Do tworzenia pustego stanu (empty state) używa się View z flex: 1 i centrowaniem w obu osiach. To standardowy wzorzec dla ekranów ładowania, błędów i pustych list.

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

Połączenie justifyContent: center i alignItems: center w View z flex: 1 środkuje zawartość w obu osiach na całym ekranie. To najpopularniejszy wzorzec użycia View w React Native.

Przykład 2: siatka kafelek z Flexbox

Do wyświetlania dwóch kolumn produktów lub artykułów używa się View z flexDirection: row, flexWrap: wrap i potomnymi View o stałej szerokości. Ten wzorzec zastępuje CSS Grid w 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 },
});

W tym przykładzie zewnętrzny View z flexWrap: wrap działa jak odpowiednik CSS Grid. Każdy kafelek zajmuje 48% szerokości, pozostawiając odstępy między kolumnami. To typowy wzorzec dla katalogów i kanałów treści.