onScroll
- React Native kursu
- Başlangıç
- Ders 62/116
- 5 dk
onScroll ile kaydırma olayını öğrenirsin.
onScroll olayı
onScroll prop'u kullanıcı kaydırdıkça çağrılır. İçine bir fonksiyon verirsin; her kayma hareketinde React Native bu fonksiyonu bir olay nesnesi ile çağırır.
Olay nesnesinin en kullanışlı parçası nativeEvent.contentOffset.y değeridir. Bu, içeriğin üstten ne kadar kaydırıldığını piksel olarak verir. Aşağı kaydırınca değer büyür.
Sık kullanım: kayma pozisyonuna göre başlık küçültmek, ilerleme çubuğu güncellemek veya sayfa sonuna yaklaştığında yeni veri yüklemek. Çok pahalı işlemler yapmamaya dikkat et; her hareket bir kez tetikler.
contentOffset değerini oku
Olay işleyiciye gelen event parametresinden event.nativeEvent.contentOffset.y ile dikey kayma miktarını alırsın. Bu sayı bir const veya let değişkenine atanabilir.
Örnek: const onScroll = (event) => {`{ const y = event.nativeEvent.contentOffset.y; console.log(y); }`}. Her kaymada y konsola yazılır.
Yatay kaydırma için .x kullanılır. Çok sık tetiklendiği için ağır işleri doğrudan yapma; gerekiyorsa bir throttle uygula. Bu konuyu ileri seviyede göreceksin.
Uygulama Kayma miktarını konsola yaz
Bir <ScrollView> yaz ve onScroll prop'una bir fonksiyon ver. Fonksiyon event alıp event.nativeEvent.contentOffset.y değerini console.log ile yazdırsın. İçine birkaç <Text> satırı koy.
Başlangıç kodu
import { ScrollView, Text } from 'react-native';
// onScroll'lu ScrollView buraya yazÖrnek çözüm
function App() {
return (
<ScrollView onScroll={(event) => {
console.log(event.nativeEvent.contentOffset.y);
}}>
<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 onScroll ne zaman çağrılır?
- Sadece butona basınca Doğru cevap
- Bileşen yüklendiğinde bir kez
- Yalnızca ekran döndüğünde
- Kullanıcı kaydırdığında
Açıklama: her kayma hareketi onScroll'u tetikler.
2 Olay parametresini ekle
import { ScrollView } from 'react-native';
const handleScroll = (____) => {
const y = event.nativeEvent.contentOffset.y;
console.log(y);
};import { ScrollView } from 'react-native';
const handleScroll = (event) => {
const y = event.nativeEvent.contentOffset.y;
console.log(y);
};Açıklama: event parametresi olay nesnesini taşır.
3 onScroll parçalarını eşle
| Kavram | Anlamı |
|---|---|
onScroll |
Kaydırma olayını dinler |
nativeEvent |
Yerel olay verisi |
contentOffset.y |
Dikey kayma miktarı |
contentOffset.x |
Yatay kayma miktarı |