View: mi ez, konténer tulajdonságok és React Native

Mi az a View React Native-ban

View a React Native alapvető komponense, amely konténerként szolgál más komponensek számára. Támogatja a stílusozást StyleSheet-en keresztül, az elrendezést Flexbox segítségével, az érintéskezelést, az animációkat és a transzformációkat. A View absztrakció a natív konténerelemek felett: UIView iOS-en és android.view.View Androidon.

A React Native-ban nem használhatók HTML elemek — helyettük az összes elrendezés View-ból épül fel. Még a Text és Image is általában View-ba van csomagolva a pozicionáláshoz. A komponens lehet üres (csak konténer) vagy tetszőleges számú gyermekelemből állhat bármilyen mélységben.

A View támogatja a renderelést mindkét platformon ugyanabból a JavaScript kódból. A Flexbox tulajdonságok, margók, háttér, árnyékok és szegélyek ugyanúgy működnek iOS-en és Androidon. A platform különbségek minimálisak — például az árnyékok iOS-en shadowColor/shadowOffset-t használnak, Androidon pedig elevation-t.

A React Native Layout Docs, 2024 szerint a View optimalizált mobil eszközökre: nem hoz létre felesleges natív megjelenítéseket a flatten optimalizáláskor és helyesen kezeli a kaszkád frissítést a szülő stílusainak változásakor.

A View komponens tulajdonságai és API-ja

A View komponens gazdag props készlettel rendelkezik a megjelenés, elhelyezés és interaktivitás kezeléséhez. Az összes props több kategóriára oszlik: stílus, érintéses események, akadálymentesség és platformjellemzők. Nézzük meg a fő csoportokat.

A View stílus props-jai

A View támogatja az összes szabványos CSS tulajdonságot mobil platformokhoz. A legfontosabbak: flexDirection, justifyContent, alignItems a pozicionáláshoz; margin, padding a távolságokhoz; backgroundColor, borderRadius a megjelenéshez; width, height, maxHeight a méretekhez.

Érintéses események és gesztusok

A View képes érintéses események feldolgozására az onStartShouldSetResponder, onMoveShouldSetResponder és onResponderGrant props-okon keresztül. Ezek az események lehetővé teszik egyedi gesztusok implementálását könyvtárak nélkül. A szabványos kattintásokhoz onTouchStart, onTouchEnd és onPress (Pressable vagy TouchableOpacity segítségével) használható.

Platform specifikus props-ok

iOS-en elérhetők a shadowColor, shadowOffset, shadowOpacity, shadowRadius árnyékokhoz. Androidon ezek a tulajdonságok figyelmen kívül maradnak — helyettük elevation használandó. Az onLayout callback-ek a View méretváltozásakor hívódnak meg, ami hasznos az adaptív elrendezésekhez.

Elrendezés View-val és Flexbox-szal

Flexbox az egyetlen elrendezési mechanizmus React Native-ban (ellentétben a Web-el, ahol Grid és Float is elérhető). Az elemek összes pozicionálása a View komponens Flexbox tulajdonságain keresztül történik. Alapértelmezésben a View flexDirection értéke column-ra van állítva, nem row-ra mint a Web-en, ami megfelel a mobil képernyők függőleges tájolásának.

Fő Flexbox tulajdonságok a View-ban

flexDirection meghatározza a főtengely irányát: column (alapértelmezett) vagy row. justifyContent kezeli az elosztást a főtengely mentén (flex-start, center, space-between). alignItems — a keresztirányú tengely mentén (stretch — alapértelmezett érték). A flex meghatározza a gyermekelem számára elérhető hely arányát.

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

A példa egy tipikus struktúrát mutat: külső View — kártya, belső row — sor avatárral és szöveges blokkal, content — oszlop névvel és szerepkörrel. Ez a beágyazott View struktúra a szabvány minden React Native képernyőn.

Különbségek a View és a HTML div között

Bár a View koncepcionálisan hasonlít a HTML div-hez, vannak közöttük fontos különbségek, amelyeket érdemes megérteni a kód Web-ről React Native-ba történő átvitelénél. Ezek a különbségek a renderelést, a stílusokat és az alapértelmezett viselkedést érintik.

A legfontosabb különbség — alapértelmezett flexDirection: column. Ez azt jelenti, hogy explicit beállítás nélkül a gyermekelemek függőlegesen helyezkednek el, nem vízszintesen. A második különbség: a View width és height alapértelmezetten a szülő teljes rendelkezésre álló helyére nyújlik (analóg a CSS width: 100%-val).

Gyakorlati példák View-val

Nézzünk két valós példát a View használatára React Native alkalmazásokban: tartalom középre igazítása a teljes képernyőre és adaptív kártyarács létrehozása. Mindkét minta megtalálható minden projektben.

1. példa: helyettesítő képernyő középre igazítással

Üres állapot (empty state) létrehozásához flex: 1 és mindkét tengelyen történő középre igazítás használatos View-val. Ez a szabványos minta a betöltő, hibajelző és üres lista képernyőkhöz.

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

A justifyContent: center és alignItems: center kombinációja egy flex: 1 View-ban középre igazítja a tartalmat mindkét tengelyen a teljes képernyőn. Ez a leggyakoribb View használati minta React Native-ban.

2. példa: kártyarács Flexbox-szal

Két oszlopos termékek vagy cikkek megjelenítéséhez flexDirection: row, flexWrap: wrap és fix szélességű gyermek View-k használatosak. Ez a minta helyettesíti a CSS Grid-et React Native-ban.

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

Ebben a példában a külső View flexWrap: wrap beállítással a CSS Grid megfelelőjeként működik. Minden kártya a szélesség 48%-át foglalja el, hézagokat hagyva az oszlopok között. Ez tipikus minta a katalógusok és tartalomcsatornák számára.