RefreshControl
- React Native kursu
- Başlangıç
- Ders 63/116
- 5 dk
RefreshControl ile pull-to-refresh öğrenirsin.
RefreshControl nedir?
RefreshControl parmakla aşağı çekince yenileme yapan mekanizmadır. ScrollView'in refreshControl prop'una bir <RefreshControl> bileşeni verilir.
İki temel prop'u vardır: refreshing bir boolean'dır, yükleyici gösterilip gösterilmeyeceğini belirler; onRefresh ise çekme hareketi başlayınca çağrılan fonksiyondur.
Akış şöyledir: kullanıcı aşağı çeker, onRefresh çağrılır, sen refreshing'i true yaparsın, veri geldikten sonra false yaparsın. Bu döngü aşağı çek yenile hislerini verir.
refreshing state deseni
Aşağı çek yenile akışını yönetmek için bir useState hook'u gerekir. const [refreshing, setRefreshing] = useState(false) şeklinde tanımlanır. Başlangıçta false'tür.
onRefresh fonksiyonu içinde önce setRefreshing(true) yaparsın, sonra veriyi yükler, en son setRefreshing(false) ile yükleyiciyi kapatırsın.
useState'i Sayaç projesinde görmüştün. State grupunda ayrıntısını öğreneceksin; şimdilik bu desen yeterli. setTimeout ile sabit bir bekleme süresi de simüle edilebilir.
Uygulama Aşağı çek yenile ekle
Bir <ScrollView> yaz. refreshControl prop'una <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> ver. refreshing için useState(false), handleRefresh için setTimeout ile iki saniye sonra false yapan bir fonksiyon tanımla.
Başlangıç kodu
import { ScrollView, Text, RefreshControl } from 'react-native';
import { useState } from 'react';
// asagi cek yenileli ScrollView 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>
</ScrollView>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 RefreshControl içe aktar
import { ScrollView, ____ } from 'react-native';import { ScrollView, RefreshControl } from 'react-native';Açıklama: RefreshControl react-native paketinden alınır.
2 RefreshControl parçalarını eşle
| Kavram | Anlamı |
|---|---|
refreshControl |
ScrollView prop'una verilir |
refreshing |
Yükleyici durumu |
onRefresh |
Çekme başlayınca çağrılır |
setRefreshing |
Durumu günceller |
3 Yükleyici ne zaman kapanır?
- Cihaz döndüğünde
- setRefreshing(false) çağrıldığında Doğru cevap
- Uygulama kapandığında
- Kullanıcı yukarı kaydırdığında
Açıklama: refreshing false olduğunda yükleyici kaybolur.