View: nedir, konteyner özellikleri ve React Native

React Native'de View Nedir

View, diğer bileşenler için konteyner görevi gören temel bir React Native bileşenidir. StyleSheet ile stil verme, Flexbox ile düzen, dokunma işleme, animasyonlar ve dönüşümleri destekler. View, yerel konteyner öğeleri üzerinde bir soyutlamadır: iOS'ta UIView ve Android'de android.view.View.

React Native'de HTML öğelerini kullanmak mümkün değildir — bunun yerine, tüm düzenler View'dan oluşturulur. Text ve Image bile genellikle konumlandırma için View'a sarılır. Bileşen boş olabilir (sadece bir konteyner) veya herhangi bir iç içe yerleşme derinliğinde herhangi bir sayıda alt öğe içerebilir.

View, tek bir JavaScript kod tabanından her iki platformda da render desteği sağlar. Flexbox özellikleri, kenar boşlukları, arka plan, gölgeler ve kenarlıklar iOS ve Android'de aynı şekilde çalışır. Platform farklılıkları minimumdur — örneğin, iOS'taki gölgeler shadowColor/shadowOffset kullanırken, Android'de elevation kullanılır.

React Native Layout Docs, 2024'e göre View, mobil cihazlar için optimize edilmiştir: düzleştirme optimizasyonu sırasında ekstra yerel görünümler oluşturmaz ve üst stiller değiştiğinde basamaklı güncellemeleri doğru şekilde işler.

View Bileşeninin Özellikleri ve API'si

View bileşeni, görünüm, düzen ve etkileşimi kontrol etmek için zengin bir prop setine sahiptir. Tüm proplar birkaç kategoriye ayrılır: stil propları, dokunma olayları, erişilebilirlik ve platforma özgü özellikler. Ana grupları inceleyelim.

View Stil Propları

View, mobil platformlar için tüm standart CSS özelliklerini destekler. Başlıcaları şunlardır: konumlandırma için flexDirection, justifyContent, alignItems; boşluk için margin, padding; görünüm için backgroundColor, borderRadius; boyutlandırma için width, height, maxHeight.

Dokunma Olayları ve Jestler

View, onStartShouldSetResponder, onMoveShouldSetResponder ve onResponderGrant propları aracılığıyla dokunma olaylarını işleyebilir. Bu olaylar, kütüphane olmadan özel jestler uygulamaya olanak tanır. Standart dokunuşlar için onTouchStart, onTouchEnd ve onPress (Pressable veya TouchableOpacity aracılığıyla) kullanılır.

Platforma Özgü Proplar

iOS'ta gölgeler için shadowColor, shadowOffset, shadowOpacity, shadowRadius mevcuttur. Android'de bu özellikler yok sayılır — bunun yerine elevation (kart benzeri bir gölge) kullanılır. onLayout geri çağrısı, View'ın boyutları değiştiğinde tetiklenir ve uyarlanabilir düzenler için kullanışlıdır.

View ve Flexbox ile Düzen

Flexbox, React Native'deki tek düzen mekanizmasıdır (Grid ve Float'ın bulunduğu web'in aksine). Tüm öğe konumlandırması, View bileşeninin Flexbox özellikleri aracılığıyla yapılır. Varsayılan olarak, View'da flexDirection, web'deki gibi row değil, mobil ekranların dikey yönüne uygun olarak column olarak ayarlanmıştır.

View'da Temel Flexbox Özellikleri

flexDirection ana eksen yönünü belirler: column (varsayılan) veya row. justifyContent ana eksen boyunca dağılımı kontrol eder (flex-start, center, space-between). alignItems — çapraz eksen boyunca (stretch — varsayılan değer). flex, bir alt öğe için kullanılabilir alanın oranını belirtir.

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

Örnek tipik bir yapıyı gösterir: dış View — kart, iç row — avatar ve metin bloğu olan bir satır, content — isim ve rol içeren bir sütun. Bu iç içe View yapısı, herhangi bir React Native ekranı için standarttır.

View ve HTML div Arasındaki Farklar

View kavramsal olarak HTML div'e benzese de, web'den React Native'e kod taşırken anlaşılması gereken önemli farklılıklar vardır. Bu farklılıklar render etme, stiller ve varsayılan davranışla ilgilidir.

En önemli fark, varsayılan olarak flexDirection: column olmasıdır. Bu, açık bir yapılandırma olmadan alt öğelerin yatay değil dikey olarak düzenlendiği anlamına gelir. İkinci fark: View'ın genişliği ve yüksekliği varsayılan olarak üst öğenin tüm kullanılabilir alanını dolduracak şekilde genişler (CSS'deki width: %100'e benzer).

View ile Pratik Örnekler

React Native uygulamalarında View kullanımının iki gerçek örneğine bakalım: içeriği tam ekranda ortalamak ve duyarlı bir kart ızgarası oluşturmak. Her iki desen de her projede görülür.

Örnek 1: Ortalamalı Yer Tutucu Ekran

Boş bir durum oluşturmak için flex: 1 ve her iki eksende ortalamaya sahip bir View kullanılır. Bu, yükleme ekranları, hata durumları ve boş listeler için standart bir desendir.

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

flex: 1 olan bir View'da justifyContent: center ve alignItems: center kombinasyonu, içeriği tam ekranda her iki eksende ortalar. Bu, React Native'de View kullanımının en yaygın desenidir.

Örnek 2: Flexbox ile Kart Izgarası

Ürünlerin veya makalelerin iki sütununu görüntülemek için flexDirection: row, flexWrap: wrap ve sabit genişlikte alt View'lar kullanılır. Bu desen, React Native'de CSS Grid'in yerini alır.

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 örnekte, flexWrap: wrap ile dış View, CSS Grid'in bir benzeri olarak çalışır. Her kart genişliğin %48'ini kaplar ve sütunlar arasında boşluk bırakır. Bu, kataloglar ve içerik akışları için tipik bir desendir.