React Native
RefreshControl
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.
Örnek çözümü göster
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;
Kendini test et
-
RefreshControl içe aktar
import { ScrollView, ____ } from 'react-native';
Cevabı göster
import { ScrollView, RefreshControl } from 'react-native';
-
RefreshControl parçalarını eşle
- refreshControl
- ScrollView prop'una verilir
- refreshing
- Yükleyici durumu
- onRefresh
- Çekme başlayınca çağrılır
- setRefreshing
- Durumu günceller
-
Yükleyici ne zaman kapanır?
- Cihaz döndüğünde
- setRefreshing(false) çağrıldığında
- Uygulama kapandığında
- Kullanıcı yukarı kaydırdığında
Cevabı göster
setRefreshing(false) çağrıldığında — refreshing false olduğunda yükleyici kaybolur.
Sıradaki ders: Özet - ScrollView
