Özet - ScrollView
- React Native kursu
- Başlangıç
- Ders 64/116
- 5 dk
ScrollView, horizontal ve RefreshControl'u birleştirerek bir galeri yazarsın.
Özet - ScrollView
Bu grupta kaydırma bölgesinin temelini öğrendin. ScrollView içeriği parmakla kaydırır; horizontal yatay kayma sağlar; contentContainerStyle içeriği saran kabı stillendirir.
onScroll kaydırma sırasında bir fonksiyon çağırır; event.nativeEvent.contentOffset.y ile dikey pozisyonu okursun. RefreshControl ise aşağı çek yenile mekanizmasıdır; refreshing state'i ile yükleyiciyi yönetirsin.
Şimdi iki mini görevle bunları birleştireceksin: önce yatay bir galeri, sonra aşağı çek yenile özellikli bir liste.
Uygulama Yatay kart galerisi
Üç <View> kart içeren yatay bir ScrollView yaz. Her kart width: 140 ve height: 140 stillensin, içinde bir <Text> olsun. contentContainerStyle ile padding: 8 ver.
Başlangıç kodu
import { ScrollView, View, Text } from 'react-native';
// yatay galeriyi buraya yazÖrnek çözüm
const styles = { card: { width: 140, height: 140, margin: 6, backgroundColor: '#f0f0f0' } };
function App() {
return (
<ScrollView horizontal contentContainerStyle={{ padding: 8 }}>
<View style={styles.card}><Text>Bir</Text></View>
<View style={styles.card}><Text>İki</Text></View>
<View style={styles.card}><Text>Üç</Text></View>
</ScrollView>
);
}
export default App;Uygulama Yenileme özellikli liste
Dört <Text> satırı içeren bir ScrollView yaz. refreshControl prop'una <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> ver. useState(false) ile refreshing ve iki saniye sonra false yapan handleRefresh tanımla.
Başlangıç kodu
import { ScrollView, Text, RefreshControl } from 'react-native';
import { useState } from 'react';
// yenilemeli listeyi buraya yazÖrnek çözüm
function App() {
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = () => {
setRefreshing(true);
setTimeout(() => setRefreshing(false), 2000);
};
return (
<ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
<Text>Satır bir</Text>
<Text>Satır iki</Text>
<Text>Satır üç</Text>
<Text>Satır dört</Text>
</ScrollView>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tüm kavramları eşle
| Kavram | Anlamı |
|---|---|
horizontal |
Yatay kayma |
contentContainerStyle |
İç kabuk stili |
onScroll |
Kayma olayı |
RefreshControl |
Aşağı çek yenile |
2 Aşağı çek yenile neyle yapılır?
- RefreshControl
- horizontal
- contentOffset Doğru cevap
- padding
Açıklama: RefreshControl refreshing ve onRefresh ile çalışır.