View: какво е, свойства на контейнера и React Native

Какво е View в React Native

View е фундаменталният компонент на React Native, който служи като контейнер за други компоненти. Той поддържа стилизиране чрез StyleSheet, оформление чрез Flexbox, обработка на допир, анимации и трансформации. View е абстракция върху нативни контейнерни елементи: UIView на iOS и android.view.View на Android.

В React Native не могат да се използват HTML елементи — вместо тях всички оформления се изграждат от View. Дори Text и Image обикновено са обвити в View за позициониране. Компонентът може да бъде празен (само контейнер) или да съдържа произволен брой дъщерни елементи на произволна дълбочина.

View поддържа рендериране на двете платформи от един и същ JavaScript код. Свойствата на Flexbox, маржовете, фонът, сенките и границите работят еднакво на iOS и Android. Платформените разлики са минимални — например сенките на iOS използват shadowColor/shadowOffset, а на Android — elevation.

Според React Native Layout Docs, 2024, View е оптимизиран за мобилни устройства: не създава излишни нативни представяния при flatten оптимизацията и коректно обработва каскадно обновяване при промяна на стиловете на родителя.

Свойства и API на компонента View

Компонентът View има богат набор от пропсове за управление на външния вид, разположението и интерактивността. Всички пропсове се разделят на няколко категории: стилови, събития на допир, достъпност и платформени особености. Нека разгледаме ключовите групи.

Стилови пропсове на View

View поддържа всички стандартни CSS свойства за мобилни платформи. Ключовите от тях: flexDirection, justifyContent, alignItems за позициониране; margin, padding за разстояния; backgroundColor, borderRadius за външен вид; width, height, maxHeight за размери.

Събития на допир и жестове

View може да обработва събития на допир чрез пропсовете onStartShouldSetResponder, onMoveShouldSetResponder и onResponderGrant. Тези събития позволяват реализиране на персонализирани жестове без библиотеки. За стандартни кликвания се използват onTouchStart, onTouchEnd и onPress (чрез Pressable или TouchableOpacity).

Платформени пропсове

На iOS са достъпни shadowColor, shadowOffset, shadowOpacity, shadowRadius за сенки. На Android тези свойства се игнорират — вместо тях се използва elevation. Callback-ите onLayout се извикват при промяна на размерите на View, което е полезно за адаптивни оформления.

Оформление с View и Flexbox

Flexbox е единственият механизъм за оформление в React Native (за разлика от Web, където са достъпни Grid и Float). Цялото позициониране на елементи се извършва чрез Flexbox свойствата на компонента View. По подразбиране flexDirection на View е зададен на column, а не row както в Web, което съответства на вертикалната ориентация на мобилните екрани.

Основни Flexbox свойства в View

flexDirection определя посоката на главната ос: column (по подразбиране) или row. justifyContent управлява разпределението по главната ос (flex-start, center, space-between). alignItems — по напречната ос (stretch — стойност по подразбиране). flex определя дела от достъпното пространство за дъщерния елемент.

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

Примерът показва типична структура: външен View — карта, вътрешен row — ред с аватар и текстов блок, content — колона с име и роля. Такава вложена View структура е стандарт за всеки React Native екран.

Разлики между View и HTML div

Въпреки че View концептуално прилича на HTML div, съществуват ключови разлики между тях, които е важно да се разберат при прехвърляне на код от Web към React Native. Тези разлики засягат рендерирането, стиловете и поведението по подразбиране.

Най-важната разлика — по подразбиране flexDirection: column. Това означава, че без изрично задаване дъщерните елементи се разполагат вертикално, а не хоризонтално. Втората разлика: width и height на View по подразбиране се разтягат до цялото достъпно пространство на родителя (аналогично на width: 100% в CSS).

Практически примери с View

Нека разгледаме два реални примера за използване на View в React Native приложения: центриране на съдържание на цял екран и създаване на адаптивна мрежа от карти. И двата модела се срещат във всеки проект.

Пример 1: заместващ екран с центриране

За създаване на празно състояние (empty state) се използва View с flex: 1 и центриране по двете оси. Това е стандартният модел за екрани за зареждане, грешки и празни списъци.

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

Комбинацията от justifyContent: center и alignItems: center във View с flex: 1 центрира съдържанието по двете оси на целия екран. Това е най-разпространеният модел на използване на View в React Native.

Пример 2: мрежа от карти с Flexbox

За показване на две колони от продукти или статии се използва View с flexDirection: row, flexWrap: wrap и дъщерни View с фиксирана ширина. Този модел замества CSS Grid в 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 },
});

В този пример външният View с flexWrap: wrap работи като аналог на CSS Grid. Всяка карта заема 48% от ширината, оставяйки разстояния между колоните. Това е типичен модел за каталози и канали за съдържание.