ScrollView
- React Native kursu
- Başlangıç
- Ders 59/116
- 5 dk
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.
Başlangıç kodu
import { ScrollView, Text } from 'react-native';
// bileşeni buraya yazÖrnek çözüm
function App() {
return (
<ScrollView>
<Text>Satır bir</Text>
<Text>Satır iki</Text>
<Text>Satır üç</Text>
</ScrollView>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ScrollView ne işe yarar?
- Ekranın arka plan rengini değiştirir
- Ekranı aşan içeriği kaydırılabilir yapar Doğru cevap
- Metni kalın yapar
- Ağ isteği gönderir
Açıklama: sığmayan içeriği parmakla kaydırmanı sağlar.
2 İçe aktarma satırını tamamla
import { View, Text, ____ } from 'react-native';import { View, Text, ScrollView } from 'react-native';Açıklama: ScrollView bileşeni react-native paketinden içe aktarılır.
3 ScrollView parçalarını eşle
| Kavram | Anlamı |
|---|---|
ScrollView |
Kaydırma bölgesi |
dikey |
Varsayılan yön |
içerik |
Kaydırılan alt öğeler |
parmak |
Kaydırmayı başlatan hareket |