ScrollView

ScrollView ile kaydırma alanı öğrenirsin.

ScrollView nedir?

ScrollView bir kaydırma bölgesi oluşturur. Telefon ekranına sığmayan içeriği parmakla yukarı aşağı kaydırmanı sağlar. <ScrollView> etiketi içine yerleştirdiğin tüm öğeler birlikte kayar.

Temel kullanımı şöyledir: <ScrollView> açılır, içine <Text> ya da <View> gibi öğeler konur, sonra </ScrollView> ile kapatılır. Yön varsayılan olarak dikeydir.

İçerik ekranı aşmazsa ScrollView yine çalışır; sadece kaydırma hareketi gerekmez. Bu yüzden emin olmak için fazladan öğe eklemek iyi bir alıştırma olur.

Dikey kayma varsayılan

ScrollView açıldığında içerik dikey kayar. Yükseklik değerini sen ayarlaman gerekmez; ScrollView içeriği boyunca uzar ve ekranı aştığında kayma başlar.

İçerik ne kadar uzunsa kayma bölgesi de o kadar uzun olur. Bu yüzden içine onlarca <Text> satırı koyduktan sonra hepsini görebilmek için parmağını kaydırman yeterlidir.

ScrollView, FlatList'ten farklı olarak tüm çocukları aynı anda render eder. Az sayıda öğe için uygundur; binlerce satır için FlatList tercih edilir. O konuyu Listeler grubunda görmüştün.

Uygulama Üç satırlık bir ScrollView yaz

İçinde üç <Text> öğesi olan bir <ScrollView> bileşeni yaz. Her Text farklı bir satır gösterilsin. App fonksiyonunu dışa aktarmayı unutma.

Örnek çözümü göster

function App() {
  return (
    <ScrollView>
      <Text>Satır bir</Text>
      <Text>Satır iki</Text>
      <Text>Satır üç</Text>
    </ScrollView>
  );
}
export default App;

Kendini test et

ScrollView ne işe yarar?
- Ekranın arka plan rengini değiştirir
- Ekranı aşan içeriği kaydırılabilir yapar
- Metni kalın yapar
- Ağ isteği gönderir
Cevabı göster

Ekranı aşan içeriği kaydırılabilir yapar — sığmayan içeriği parmakla kaydırmanı sağlar.

İçe aktarma satırını tamamla

import { View, Text, ____ } from 'react-native';

Cevabı göster

import { View, Text, ScrollView } from 'react-native';

ScrollView parçalarını eşle

ScrollView

Kaydırma bölgesi
dikey

Varsayılan yön
içerik

Kaydırılan alt öğeler
parmak

Kaydırmayı başlatan hareket

Sıradaki ders: horizontal

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler