contentContainerStyle

contentContainerStyle ile içerik stillendirmeyi öğrenirsin.

contentContainerStyle ne işe yarar?

contentContainerStyle kaydırılan içeriği saran iç kabı stillendirir. ScrollView'in dış kabı ile içeriği birbirinden ayırır: dış kabuk style, içerik contentContainerStyle ile biçimlenir.

En sık kullanım padding vermektir. Örneğin contentContainerStyle={'{ padding: 16 }'} yazdığında tüm içerik kenarlardan 16 birim içeri kayar; kaydırma çubuğu ekran kenarına değmez.

Listelerde boş durum mesajını ortalamak için flex: 1 ve justifyContent: 'center' de buraya verilir. Bu ayrım sonradan düzenlemeyi kolaylaştırır.

padding ile içerik nefes alır

contentContainerStyle'a padding verdiğinde içerik kenarlardan içeri çekilir. Tek değer tüm kenarlara uygulanır: padding: 16.

Yalnızca üst ve alt boşluk istiyorsan paddingVertical: 24 yazarsın. Yalnızca sağ ve sol için paddingHorizontal: 12 vardır. Bunlar liste görünümünde başlık veya altbilgi alanı yaratır.

Liste düzeninde gap henüz her platformda tam desteklenmediği için aralıkları marginBottom ile verebilirsin. Böylece her satır arasında eşit boşluk olur.

Uygulama Dolgulu içerikli ScrollView yaz

Bir <ScrollView> yaz ve içeriğine padding: 16 ver. İçine dört <Text> satırı ekle. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <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

style ve contentContainerStyle

style

Dış kabuğu stillendirir
contentContainerStyle

İçeriği saran kabı stillendirir
padding

İçerik kenar boşluğu
flex: 1

İçeriği genişletir
İçerik kenar boşluğu için hangi prop?
- contentContainerStyle
- showsVerticalScrollIndicator
- keyboardShouldPersistTaps
- style
Cevabı göster

style — contentContainerStyle içeriği saran kabı stillendirir.

İçerik dolgusunu ekle

import { ScrollView, Text } from 'react-native';

function App() {
  return (
    <ScrollView
      ____={{ padding: 16 }}>
      <Text>Başlık</Text>
    </ScrollView>
  );
}

Cevabı göster

import { ScrollView, Text } from 'react-native';

function App() {
  return (
    <ScrollView
      contentContainerStyle={{ padding: 16 }}>
      <Text>Başlık</Text>
    </ScrollView>
  );
}

Sıradaki ders: onScroll

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler