View: nima, konteyner xususiyatlari va React Native

React Native da View nima

View — boshqa komponentlar uchun konteyner bo'lib xizmat qiladigan React Native ning asosiy komponentidir. U StyleSheet orqali stillashtirishni, Flexbox orqali joylashuvni, teginishni qayta ishlashni, animatsiyalar va transformatsiyalarni qo'llab-quvvatlaydi. View native konteyner elementlari ustidagi abstraksiyadir: iOS da UIView va Android da android.view.View.

React Native da HTML elementlaridan foydalanish mumkin emas — ularning o'rniga barcha joylashuvlar View dan quriladi. Hatto Text va Image ham odatda joylashtirish uchun View ga o'raladi. Komponent bo'sh (faqat konteyner) yoki istalgan chuqurlikdagi istalgan sondagi bolaviy elementlarni o'z ichiga olishi mumkin.

View bir JavaScript kodidan ikkala platformada renderlashni qo'llab-quvvatlaydi. Flexbox xususiyatlari, bo'shliqlar, fon, soyalar va chegaralar iOS va Android da bir xil ishlaydi. Platforma farqlari minimal — masalan, iOS da soyalar shadowColor/shadowOffset dan foydalanadi, Android da esa elevation.

React Native Layout Docs, 2024 ma'lumotlariga ko'ra, View mobil qurilmalar uchun optimallashtirilgan: flatten optimallashtirishda keraksiz native ko'rinishlarni yaratmaydi va ota-ona stillari o'zgarganda kaskad yangilanishini to'g'ri qayta ishlaydi.

View komponentining xususiyatlari va API si

View komponenti tashqi ko'rinish, joylashuv va interaktivlikni boshqarish uchun boy props to'plamiga ega. Barcha propslar bir necha toifaga bo'linadi: stillashtirish, teginish hodisalari, foydalanish imkoniyati va platforma xususiyatlari. Keling, asosiy guruhlarni ko'rib chiqaylik.

View ning stil propslari

View mobil platformalar uchun barcha standart CSS xususiyatlarini qo'llab-quvvatlaydi. Ulardan asosiylari: joylashtirish uchun flexDirection, justifyContent, alignItems; bo'shliqlar uchun margin, padding; tashqi ko'rinish uchun backgroundColor, borderRadius; o'lchamlar uchun width, height, maxHeight.

Teginish hodisalari va imo-ishoralar

View onStartShouldSetResponder, onMoveShouldSetResponder va onResponderGrant propslari orqali teginish hodisalarini qayta ishlashi mumkin. Bu hodisalar kutubxonasiz maxsus imo-ishoralarni amalga oshirish imkonini beradi. Standart bosishlar uchun onTouchStart, onTouchEnd va onPress (Pressable yoki TouchableOpacity orqali) ishlatiladi.

Platforma propslari

iOS da soyalar uchun shadowColor, shadowOffset, shadowOpacity, shadowRadius mavjud. Android da bu xususiyatlar e'tiborga olinmaydi — ularning o'rniga elevation ishlatiladi. onLayout callbacklari View o'lchamlari o'zgarganda chaqiriladi, bu adaptiv joylashuvlar uchun foydalidir.

View va Flexbox bilan joylashuv

Flexbox React Native dagi yagona joylashuv mexanizmidir (Grid va Float mavjud bo'lgan Web dan farqli o'laroq). Barcha elementlarni joylashtirish View komponentining Flexbox xususiyatlari orqali amalga oshiriladi. View da standart flexDirection column ga o'rnatilgan, Web dagi kabi row emas, bu mobil ekranlarning vertikal yo'nalishiga mos keladi.

View dagi asosiy Flexbox xususiyatlari

flexDirection asosiy o'qning yo'nalishini belgilaydi: column (standart) yoki row. justifyContent asosiy o'q bo'ylab taqsimotni boshqaradi (flex-start, center, space-between). alignItems — ko'ndalang o'q bo'ylab (stretch — standart qiymat). flex bolaviy element uchun mavjud joyning ulushini belgilaydi.

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

Misolda odatiy tuzilma ko'rsatilgan: tashqi View — karta, ichki row — avatar va matn blokli qator, content — ism va rol bilan ustun. Bunday joylashtirilgan View tuzilmasi har bir React Native ekrani uchun standartdir.

View va HTML div o'rtasidagi farqlar

View kontseptual jihatdan HTML div ga o'xshash bo'lsa-da, ular o'rtasida kodni Web dan React Native ga ko'chirishda muhim bo'lgan asosiy farqlar mavjud. Bu farqlar renderlash, stillar va standart xatti-harakatga tegishli.

Eng muhim farq — standart flexDirection: column. Bu shuni anglatadiki, aniq belgilanmagan holda bolaviy elementlar vertikal joylashadi, gorizontal emas. Ikkinchi farq: View ning width va height i standart ota-onaning barcha mavjud joyiga yoyiladi (CSS dagi width: 100% analogi).

View bilan amaliy misollar

React Native ilovalarida View dan foydalanishning ikkita haqiqiy misolini ko'rib chiqaylik: tarkibni butun ekranga markazlashtirish va kartalardan adaptiv tarmoq yaratish. Ikkala naqsh ham har bir loyihada uchraydi.

1-misol: markazlashtirish bilan bo'sh ekran

Bo'sh holat (empty state) yaratish uchun flex: 1 va ikkala o'qda markazlashtirish bilan View ishlatiladi. Bu yuklash, xato va bo'sh ro'yxat ekranlari uchun standart naqshdir.

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 va alignItems: center kombinatsiyasi flex: 1 bo'lgan View da tarkibni ikkala o'qda butun ekranga markazlashtiradi. Bu React Native da View ning eng keng tarqalgan foydalanish naqshidir.

2-misol: Flexbox bilan karta tarmog'i

Ikki ustunli mahsulot yoki maqolalarni ko'rsatish uchun flexDirection: row, flexWrap: wrap va doimiy enli bolaviy View lar bilan View ishlatiladi. Bu naqsh React Native da CSS Grid ni o'rnini bosadi.

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

Bu misolda flexWrap: wrap bo'lgan tashqi View CSS Grid ning analogi sifatida ishlaydi. Har bir karta enining 48% ni egallaydi, ustunlar orasida bo'shliqlar qoladi. Bu kataloglar va kontent lentalari uchun odatiy naqshdir.