onScroll

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.

Örnek çözümü göster

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;

Kendini test et

onScroll ne zaman çağrılır?
- Sadece butona basınca
- Bileşen yüklendiğinde bir kez
- Yalnızca ekran döndüğünde
- Kullanıcı kaydırdığında
Cevabı göster

Sadece butona basınca — her kayma hareketi onScroll'u tetikler.

Olay parametresini ekle

import { ScrollView } from 'react-native';

const handleScroll = (____) => {
  const y = event.nativeEvent.contentOffset.y;
  console.log(y);
};

Cevabı göster

import { ScrollView } from 'react-native';

const handleScroll = (event) => {
  const y = event.nativeEvent.contentOffset.y;
  console.log(y);
};

onScroll parçalarını eşle

onScroll

Kaydırma olayını dinler
nativeEvent

Yerel olay verisi
contentOffset.y

Dikey kayma miktarı
contentOffset.x

Yatay kayma miktarı

Sıradaki ders: RefreshControl

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler