View: ano ito, mga katangian ng container at React Native

Ano ang View sa React Native

View ay ang pangunahing component ng React Native na nagsisilbing container para sa iba pang mga component. Sinusuportahan nito ang pag-istilo sa pamamagitan ng StyleSheet, layout sa pamamagitan ng Flexbox, pagproseso ng pagpindot, animation at pagbabago. Ang View ay isang abstraction sa ibabaw ng native na container elements: UIView sa iOS at android.view.View sa Android.

Sa React Native, hindi maaaring gumamit ng HTML elements — sa halip, lahat ng layout ay binuo mula sa View. Kahit ang Text at Image ay karaniwang nakabalot sa View para sa pagpoposisyon. Ang component ay maaaring walang laman (container lang) o maglaman ng anumang bilang ng mga child element sa anumang lalim.

Sinusuportahan ng View ang pagre-render sa parehong platform mula sa iisang JavaScript code. Ang mga katangian ng Flexbox, margin, background, shadow at border ay gumagana nang pareho sa iOS at Android. Ang mga pagkakaiba sa platform ay minimal — halimbawa, ang mga shadow sa iOS ay gumagamit ng shadowColor/shadowOffset, at sa Android ay elevation.

Ayon sa React Native Layout Docs, 2024, ang View ay na-optimize para sa mga mobile device: hindi ito lumilikha ng mga hindi kinakailangang native na representasyon sa panahon ng flatten optimization at wastong pinoproseso ang cascade update kapag nagbabago ang mga style ng magulang.

Mga katangian at API ng component na View

Ang component na View ay may mayamang set ng props para sa pamamahala ng hitsura, pagkakalagay at interaktibidad. Ang lahat ng props ay nahahati sa ilang kategorya: pag-istilo, touch event, accessibility at mga feature ng platform. Tingnan natin ang mga pangunahing grupo.

Props ng estilo ng View

Sinusuportahan ng View ang lahat ng standard na CSS properties para sa mga mobile platform. Ang mga pangunahing: flexDirection, justifyContent, alignItems para sa pagpoposisyon; margin, padding para sa mga puwang; backgroundColor, borderRadius para sa hitsura; width, height, maxHeight para sa mga sukat.

Touch event at gesture

Ang View ay maaaring magproseso ng touch event sa pamamagitan ng props na onStartShouldSetResponder, onMoveShouldSetResponder at onResponderGrant. Ang mga event na ito ay nagbibigay-daan sa pagpapatupad ng custom na gesture nang walang mga library. Para sa standard na pag-click, ginagamit ang onTouchStart, onTouchEnd at onPress (sa pamamagitan ng Pressable o TouchableOpacity).

Props ng platform

Sa iOS, available ang shadowColor, shadowOffset, shadowOpacity, shadowRadius para sa mga shadow. Sa Android, ang mga property na ito ay binabalewala — sa halip ay ginagamit ang elevation. Ang mga callback na onLayout ay tinatawag kapag nagbabago ang mga sukat ng View, na kapaki-pakinabang para sa adaptive layouts.

Layout gamit ang View at Flexbox

Flexbox ay ang tanging mekanismo ng layout sa React Native (hindi tulad ng Web kung saan available ang Grid at Float). Ang lahat ng pagpoposisyon ng mga elemento ay ginagawa sa pamamagitan ng Flexbox properties ng View component. Bilang default, ang flexDirection sa View ay nakatakda sa column, hindi row tulad sa Web, na tumutugma sa vertical na oryentasyon ng mga mobile screen.

Pangunahing Flexbox properties sa View

flexDirection ay tumutukoy sa direksyon ng pangunahing axis: column (default) o row. justifyContent ay namamahala sa pamamahagi kasama ang pangunahing axis (flex-start, center, space-between). alignItems — kasama ang cross axis (stretch — default na halaga). Ang flex ay tumutukoy sa bahagi ng available na espasyo para sa child element.

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

Ang halimbawa ay nagpapakita ng tipikal na istraktura: panlabas na View — card, panloob na row — hilera na may avatar at text block, content — column na may pangalan at papel. Ang ganitong nested View structure ay standard para sa bawat React Native screen.

Mga pagkakaiba ng View at HTML div

Bagaman ang View ay konseptwal na katulad ng HTML div, may mga pangunahing pagkakaiba sa pagitan ng mga ito na mahalagang maunawaan kapag naglilipat ng code mula Web patungong React Native. Ang mga pagkakaibang ito ay tungkol sa pagre-render, mga style at default na pag-uugali.

Ang pinakamahalagang pagkakaiba — default na flexDirection: column. Ibig sabihin nito na walang tahasang pagtatakda, ang mga child element ay inilalagay nang patayo, hindi pahalang. Ang pangalawang pagkakaiba: ang width at height ng View ay default na lumalawak sa lahat ng available na espasyo ng magulang (katulad ng width: 100% sa CSS).

Mga praktikal na halimbawa gamit ang View

Tingnan natin ang dalawang tunay na halimbawa ng paggamit ng View sa React Native applications: pag-center ng nilalaman sa buong screen at paggawa ng adaptive grid ng mga card. Ang parehong pattern ay matatagpuan sa bawat proyekto.

Halimbawa 1: placeholder screen na may pag-center

Para sa paggawa ng empty state, ginagamit ang View na may flex: 1 at pag-center sa parehong axis. Ito ang standard na pattern para sa loading, error at empty list screens.

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

Ang kombinasyon ng justifyContent: center at alignItems: center sa View na may flex: 1 ay nag-center ng nilalaman sa parehong axis sa buong screen. Ito ang pinaka-karaniwang pattern ng paggamit ng View sa React Native.

Halimbawa 2: grid ng card gamit ang Flexbox

Para sa pagpapakita ng dalawang column ng mga produkto o artikulo, ginagamit ang View na may flexDirection: row, flexWrap: wrap at child View na may nakapirming lapad. Ang pattern na ito ay pumapalit sa CSS Grid sa 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 },
});

Sa halimbawang ito, ang panlabas na View na may flexWrap: wrap ay gumagana bilang katumbas ng CSS Grid. Bawat card ay sumasakop sa 48% ng lapad, na nag-iiwan ng mga puwang sa pagitan ng mga column. Ito ay tipikal na pattern para sa mga catalog at content feed.