ScrollView — nedir, kaydırma kabı ve React Native

React Native'de ScrollView Nedir

ScrollView, içeriğini kaydırılabilir bir kaba saran bir React Native bileşenidir. İçerik ekran sınırlarını aşarsa, kullanıcı dikey veya yatay olarak kaydırabilir. ScrollView, ekranda görünür olsun veya olmasın, mount sırasında tüm alt öğeleri oluşturur.

Yalnızca görünür öğeleri oluşturan FlatList'in (tembel oluşturma) aksine, ScrollView hemen tüm yerel görünümleri oluşturur. Bu, ScrollView'ı formlar, ayarlar sayfaları, tek ekrandaki ürün kartları için kullanışlı hale getirir — alt öğelerin sayısının az olduğu (20-30'a kadar) veya tam sayısının önceden bilinmediği her yerde.

React Native Using ScrollView, 2024'e göre, ScrollView iç içe kaydırmayı (örneğin, ScrollView içinde ScrollView), kenara ulaşıldığında sıçrama efekti, kaydırma göstergeleri, yakalama konumlandırması ve jest işlemeyi destekler. iOS'ta ScrollView, contentInsetAdjustmentBehavior aracılığıyla otomatik olarak SafeArea dolgusu ekler.

ScrollView Bileşeninin Özellikleri ve API'si

ScrollView, kaydırma davranışını, görünümü ve etkileşimi kontrol etmek için zengin bir özellik seti sağlar. Ana gruplara bakalım: kaydırma kontrolü, görsel ayarlar, olaylar ve platforma özgü özellikler.

Yön ve Kaydırma Kontrolü

horizontal — kaydırma yönünü dikeyden (varsayılan) yataya değiştirir. scrollEnabled — gerektiğinde kaydırmayı devre dışı bırakır. showsVerticalScrollIndicator ve showsHorizontalScrollIndicator, kaydırma göstergelerinin görüntülenmesini kontrol eder. bounces (iOS), içeriğin kenarına ulaşıldığında sıçrama efektini etkinleştirir/devre dışı bırakır.

ScrollView Olayları

Ana olay onScroll'dur, her kaydırmada tetiklenir ve contentOffset (mevcut konum), contentSize (içerik boyutu), layoutMeasurement (görünür alan boyutu) içeren nativeEvent ile bir nesne iletir. onMomentumScrollEnd, ataletli kaydırma tamamlandıktan sonra tetiklenir. onScrollEndDrag — kullanıcı parmağını ekrandan kaldırdığında tetiklenir. Bu olaylar, sonsuz kaydırma, paralaks efektleri ve tembel yükleme uygulamak için kullanılır.

ref ile Programatik Kontrol

ScrollView, ref aracılığıyla programatik kontrol için yöntemler sağlar: scrollTo({x, y, animated}) belirtilen koordinatlara kaydırır, scrollToEnd({animated}) — içeriğin sonuna kaydırır, flashScrollIndicators() — kaydırma göstergelerini geçici olarak gösterir.

const scrollRef = useRef(null);

// Yukarı kaydır
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Sona kaydır
scrollRef.current.scrollToEnd({ animated: true });

Kaydırmanın programatik kontrolü genellikle sohbetlerde (son mesaja otomatik kaydırma), formlarda (hatalı alana kaydırma) ve karusellerde (programatik kaydırma) kullanılır.

ScrollView ve FlatList Arasındaki Farklar

ScrollView ve FlatList arasında seçim yapmak, React Native'deki temel mimari kararlardan biridir. Her iki bileşen de kaydırma sağlar, ancak temelde farklı oluşturma stratejileri kullanır. ScrollView her şeyi bir kerede oluşturur, FlatList — yalnızca görünür öğeleri.

Seçim kuralı: ScrollView — alt öğelerin sayısının bilindiği ve 20-30'u aşmadığı ekranlar için (kullanıcı profili, ayarlar formu, ürün sayfası). FlatList — potansiyel olarak çok sayıda öğeye sahip listeler için (haber akışı, ürün kataloğu, sohbet mesajları). İçerik heterojense (başlık, form, kart, altbilgi) — ScrollView tercih edilir çünkü FlatList tek tip öğeler bekler.

Yatay Kaydırma ve Sayfalama

ScrollView, horizontal prop aracılığıyla yatay kaydırmayı destekler ve bu da onu karuseller, resim galerileri, sekmeler ve yatay listeler için ideal hale getirir. pagingEnabled prop (iOS) veya snapToInterval ile birleştirildiğinde, ScrollView sayfa tabanlı gezinme için bir bileşen haline gelir.

Yatay Karusel

horizontal özelliği kaydırma yönünü değiştirir. pagingEnabled (iOS), kaydırmanın yalnızca öğe sınırlarında durduğu sayfa tabanlı kaydırmayı etkinleştirir. snapToInterval, her iki platform için piksel cinsinden yakalama adımını ayarlar.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

Bu karuselde, pagingEnabled otomatik olarak her görüntünün sınırına kaydırmayı yapıştırır. onMomentumScrollEnd, geçerli sayfa göstergesini güncellemeye olanak tanır. Böyle bir karusel yerel olarak çalışır ve ataletli kaydırmayı destekler.

Yakalama Konumlandırması

Standart olmayan yakalama adımları için, snapToInterval (piksel cinsinden adım boyutu) ve snapToAlignment (start, center, end) kullanın. snapToOffsets ile yakalama için belirli konumların bir dizisini belirtebilirsiniz. Bu, farklı boyutlarda kartlara sahip yatay listeler için kullanışlıdır.

ScrollView ile Pratik Örnekler

İki tipik senaryoya bakalım: form ekranı (dikey kaydırma) ve yatay kategori listesi. Her ikisi de optimum davranış için farklı prop'larla ScrollView kullanır.

Örnek 1: Formlu Profil Ekranı

Profil düzenleme sayfası heterojen öğeler içerir: avatar, birkaç giriş alanı, anahtarlar ve kaydet düğmesi. ScrollView, her bloğu ayrı ayrı değil, tüm sayfayı bir bütün olarak kaydırmaya olanak tanır.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled' prop'u, klavye açıkken formla kaydırmaya ve etkileşime izin verir. contentContainerStyle tüm içeriğe dolgu uygular. Bu model, React Native'deki tüm form ekranlarında kullanılır.

Örnek 2: Yatay Kategori Listesi

Kategoriler (sohbetler, filtreler, sekmeler) arasında gezinmek için, çipli yatay bir ScrollView kullanılır. Bu bileşen genellikle pazar yeri ve sosyal medya uygulamalarında bulunur.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

Gösterge kapalı olan yatay bir ScrollView, kategori şeritleri için standarttır. Her çip, seçim durumuna sahip ayrı bir bileşendir. showsHorizontalScrollIndicator: false prop'u kaydırma çubuğunu kaldırır ve bu, mobil uygulama kullanıcılarının beklentileriyle örtüşür.