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 (тень от карточного представления). Коллбэки onLayout вызываются при изменении размеров View, что полезно для адаптивных макетов.

Верстка с View и Flexbox

Flexbox — единственный механизм верстки в React Native (в отличие от веба, где доступен Grid и Float). Все позиционирование элементов выполняется через Flexbox-свойства компонента View. По умолчанию у View flexDirection установлен в column, а не row как в вебе, что соответствует вертикальной ориентации мобильных экранов.

Основные свойства 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, между ними есть ключевые различия, которые важно понимать при переносе кода с веба на 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% ширины, оставляя промежутки между колонками. Это типичный паттерн для каталогов и лент контента.