View: co to je, vlastnosti kontejneru a React Native

Co je View v React Native

View je základní komponenta React Native, která slouží jako kontejner pro ostatní komponenty. Podporuje stylování přes StyleSheet, rozvržení přes Flexbox, zpracování dotyků, animace a transformace. View je abstrakcí nad nativními kontejnerovými prvky: UIView na iOS a android.view.View na Androidu.

V React Native nelze používat HTML prvky — místo nich jsou všechna rozvržení postavena z View. Dokonce i Text a Image jsou obvykle zabaleny do View pro pozicování. Komponenta může být prázdná (jen kontejner) nebo obsahovat libovolný počet podřízených prvků v libovolné hloubce.

View podporuje renderování na obě platformy z jednoho JavaScript kódu. Vlastnosti Flexbox, okraje, pozadí, stíny a ohraničení fungují stejně na iOS i Androidu. Platformní rozdíly jsou minimální — například stíny na iOS používají shadowColor/shadowOffset, a na Androidu elevation.

Podle React Native Layout Docs, 2024 je View optimalizován pro mobilní zařízení: nevytváří zbytečné nativní reprezentace při optimalizaci flatten a správně zpracovává kaskádovou aktualizaci při změně stylů rodiče.

Vlastnosti a API komponenty View

Komponenta View má bohatou sadu props pro správu vzhledu, umístění a interaktivity. Všechny props se dělí do několika kategorií: stylovací, dotykové události, přístupnost a platformní vlastnosti. Podívejme se na klíčové skupiny.

Stylovací props View

View podporuje všechny standardní CSS vlastnosti pro mobilní platformy. Klíčové z nich: flexDirection, justifyContent, alignItems pro pozicování; margin, padding pro okraje; backgroundColor, borderRadius pro vzhled; width, height, maxHeight pro rozměry.

Dotykové události a gesta

View může zpracovávat dotykové události přes props onStartShouldSetResponder, onMoveShouldSetResponder a onResponderGrant. Tyto události umožňují implementovat vlastní gesta bez knihoven. Pro standardní kliknutí se používají onTouchStart, onTouchEnd a onPress (přes Pressable nebo TouchableOpacity).

Platformní props

Na iOS jsou k dispozici shadowColor, shadowOffset, shadowOpacity, shadowRadius pro stíny. Na Androidu jsou tyto vlastnosti ignorovány — místo nich se používá elevation. Callbacky onLayout jsou volány při změně rozměrů View, což je užitečné pro adaptivní rozvržení.

Rozvržení s View a Flexboxem

Flexbox je jediný mechanismus rozvržení v React Native (na rozdíl od Webu, kde jsou k dispozici Grid a Float). Veškeré pozicování prvků probíhá přes Flexbox vlastnosti komponenty View. Ve výchozím nastavení je flexDirection u View nastaven na column, nikoli row jako na Webu, což odpovídá vertikální orientaci mobilních obrazovek.

Hlavní Flexbox vlastnosti ve View

flexDirection určuje směr hlavní osy: column (výchozí) nebo row. justifyContent spravuje rozložení podél hlavní osy (flex-start, center, space-between). alignItems — podél příčné osy (stretch — výchozí hodnota). flex určuje podíl dostupného prostoru pro podřízený prvek.

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

Příklad ukazuje typickou strukturu: vnější View — karta, vnitřní row — řádek s avatarem a textovým blokem, content — sloupec s jménem a rolí. Taková vnořená struktura View je standardem pro každou obrazovku React Native.

Rozdíly mezi View a HTML div

Ačkoli je View koncepčně podobný HTML div, existují mezi nimi klíčové rozdíly, které je důležité pochopit při přenosu kódu z Webu na React Native. Tyto rozdíly se týkají renderování, stylů a výchozího chování.

Nejdůležitější rozdíl — výchozí flexDirection: column. To znamená, že bez explicitního nastavení jsou podřízené prvky umístěny vertikálně, nikoli horizontálně. Druhý rozdíl: width a height View se ve výchozím nastavení roztahují na veškerý dostupný prostor rodiče (analogicky k width: 100 % v CSS).

Praktické příklady s View

Podívejme se na dva reálné příklady použití View v React Native aplikacích: centrování obsahu na celou obrazovku a vytvoření adaptivní mřížky z karet. Oba vzory se vyskytují v každém projektu.

Příklad 1: náhradní obrazovka s centrováním

Pro vytvoření prázdného stavu (empty state) se používá View s flex: 1 a centrováním na obou osách. Toto je standardní vzor pro obrazovky načítání, chyb a prázdných seznamů.

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

Kombinace justifyContent: center a alignItems: center ve View s flex: 1 centruje obsah na obou osách přes celou obrazovku. Toto je nejrozšířenější vzor použití View v React Native.

Příklad 2: mřížka karet s Flexboxem

Pro zobrazení dvou sloupců produktů nebo článků se používá View s flexDirection: row, flexWrap: wrap a podřízenými View s pevnou šířkou. Tento vzor nahrazuje CSS Grid v 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 },
});

V tomto příkladu vnější View s flexWrap: wrap funguje jako obdoba CSS Grid. Každá karta zabírá 48 % šířky a ponechává mezery mezi sloupci. Toto je typický vzor pro katalogy a kanály obsahu.