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