View: nədir, konteyner xüsusiyyətləri və React Native

React Native-də View nədir

View — digər komponentlər üçün konteyner rolunu oynayan React Native-in əsas komponentidir. O, StyleSheet vasitəsilə stilləşdirməni, Flexbox vasitəsilə düzülüşü, toxunma emalını, animasiyaları və transformasiyaları dəstəkləyir. View native konteyner elementləri üzərində abstraksiyadır: iOS-da UIView və Android-də android.view.View.

React Native-də HTML elementlərindən istifadə etmək mümkün deyil — onların əvəzinə bütün düzülüşlər View-dən qurulur. Hətta Text və Image da adətən yerləşdirmə üçün View-ə bükülür. Komponent boş (sadəcə konteyner) və ya istənilən sayda alt elementi istənilən dərinlikdə ehtiva edə bilər.

View bir JavaScript kodundan hər iki platformada render-i dəstəkləyir. Flexbox xüsusiyyətləri, boşluqlar, fon, kölgələr və haşiyələr iOS və Android-də eyni işləyir. Platforma fərqləri minimaldır — məsələn, iOS-da kölgələr shadowColor/shadowOffset istifadə edir, Android-də isə elevation.

React Native Layout Docs, 2024-ə görə, View mobil cihazlar üçün optimallaşdırılıb: flatten optimallaşdırması zamanı lazımsız native təsvirlər yaratmır və valideyn stilləri dəyişdikdə kaskad yenilənməsini düzgün emal edir.

View komponentinin xüsusiyyətləri və API-si

View komponenti görünüşü, yerləşməsi və interaktivliyi idarə etmək üçün zəngin props dəstinə malikdir. Bütün propslar bir neçə kateqoriyaya bölünür: stilləşdirmə, toxunma hadisələri, əlçatanlıq və platforma xüsusiyyətləri. Əsas qrupları nəzərdən keçirək.

View-in stil propsları

View mobil platformalar üçün bütün standart CSS xüsusiyyətlərini dəstəkləyir. Əsas olanlar: yerləşdirmə üçün flexDirection, justifyContent, alignItems; boşluqlar üçün margin, padding; görünüş üçün backgroundColor, borderRadius; ölçülər üçün width, height, maxHeight.

Toxunma hadisələri və jestlər

View onStartShouldSetResponder, onMoveShouldSetResponder və onResponderGrant propsları vasitəsilə toxunma hadisələrini emal edə bilər. Bu hadisələr kitabxanasız xüsusi jestləri tətbiq etməyə imkan verir. Standart kliklər üçün onTouchStart, onTouchEnd və onPress (Pressable və ya TouchableOpacity vasitəsilə) istifadə olunur.

Platforma propsları

iOS-da kölgələr üçün shadowColor, shadowOffset, shadowOpacity, shadowRadius mövcuddur. Android-də bu xüsusiyyətlər nəzərə alınmır — onların əvəzinə elevation istifadə olunur. onLayout callback-ləri View-in ölçüləri dəyişdikdə çağırılır ki, bu da adaptiv düzülüşlər üçün faydalıdır.

View və Flexbox ilə düzülüş

Flexbox React Native-də yeganə düzülüş mexanizmidir (Grid və Float-ın mövcud olduğu Web-dən fərqli olaraq). Bütün element yerləşdirmə View komponentinin Flexbox xüsusiyyətləri vasitəsilə həyata keçirilir. View-də defolt olaraq flexDirection column-a təyin edilib, Web-dəki kimi row deyil, bu da mobil ekranların şaquli istiqamətinə uyğundur.

View-də əsas Flexbox xüsusiyyətləri

flexDirection əsas oxun istiqamətini müəyyən edir: column (defolt) və ya row. justifyContent əsas ox boyunca paylanmanı idarə edir (flex-start, center, space-between). alignItems — eninə ox boyunca (stretch — defolt dəyər). flex alt element üçün mövcud yerin payını təyin edir.

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

Nümunədə tipik struktur göstərilib: xarici View — kart, daxili row — avatar və mətn bloku olan sətir, content — ad və rol ilə sütun. Belə yerləşdirilmiş View strukturu hər bir React Native ekranı üçün standartdır.

View ilə HTML div arasındakı fərqlər

View konseptual olaraq HTML div-ə bənzəsə də, aralarında kodu Web-dən React Native-ə köçürərkən vacib olan əsas fərqlər var. Bu fərqlər render, stillər və defolt davranışa aiddir.

Ən vacib fərq — defolt olaraq flexDirection: column. Bu o deməkdir ki, açıq şəkildə təyin edilmədən alt elementlər şaquli şəkildə yerləşir, üfüqi deyil. İkinci fərq: View-in width və height-i defolt olaraq valideynin bütün mövcud yerinə yayılır (CSS-də width: 100% analoqu).

View ilə praktiki nümunələr

React Native tətbiqlərində View-dən istifadənin iki real nümunəsini nəzərdən keçirək: məzmunun bütün ekrana mərkəzləşdirilməsi və kartlardan adaptiv şəbəkə yaradılması. Hər iki nümunə hər bir layihədə rast gəlinir.

Nümunə 1: mərkəzləşdirmə ilə boş ekran

Boş vəziyyət (empty state) yaratmaq üçün flex: 1 və hər iki oxda mərkəzləşdirmə ilə View istifadə olunur. Bu yükləmə, xəta və boş siyahı ekranları üçün standart nümunədir.

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 və alignItems: center kombinasiyası flex: 1 olan View-də məzmunu hər iki oxda bütün ekrana mərkəzləşdirir. Bu React Native-də View-in ən geniş yayılmış istifadə nümunəsidir.

Nümunə 2: Flexbox ilə kart şəbəkəsi

İki sütunlu məhsul və ya məqalə göstərmək üçün flexDirection: row, flexWrap: wrap və sabit enli alt View-lər olan View istifadə olunur. Bu nümunə React Native-də CSS Grid-i əvəz edir.

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 nümunədə flexWrap: wrap olan xarici View CSS Grid-in analoqu kimi işləyir. Hər bir kart eninin 48%-ni tutur, sütunlar arasında boşluqlar qalır. Bu kataloqlar və məzmun lentləri üçün tipik nümunədir.