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. Подразумевано, View има flexDirection постављен на 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% ширине, остављајући размаке између колона. Ово је типичан образац за каталоге и токове садржаја.