Özet - ScrollView

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.

Örnek çözümü göster

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.

Ö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>
      <Text>Satır üç</Text>
      <Text>Satır dört</Text>
    </ScrollView>
  );
}
export default App;

Kendini test et

Tüm kavramları eşle

horizontal

Yatay kayma
contentContainerStyle

İç kabuk stili
onScroll

Kayma olayı
RefreshControl

Aşağı çek yenile
Aşağı çek yenile neyle yapılır?
- RefreshControl
- horizontal
- contentOffset
- padding
Cevabı göster

contentOffset — RefreshControl refreshing ve onRefresh ile çalışır.

Sıradaki ders: Image

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler