contentContainerStyle
- React Native kursu
- Başlangıç
- Ders 61/116
- 5 dk
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.
Başlangıç kodu
import { ScrollView, Text } from 'react-native';
// paddingli ScrollView buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 style ve contentContainerStyle
| Kavram | Anlamı |
|---|---|
style |
Dış kabuğu stillendirir |
contentContainerStyle |
İçeriği saran kabı stillendirir |
padding |
İçerik kenar boşluğu |
flex: 1 |
İçeriği genişletir |
2 İçerik kenar boşluğu için hangi prop?
- contentContainerStyle
- showsVerticalScrollIndicator
- keyboardShouldPersistTaps
- style Doğru cevap
Açıklama: contentContainerStyle içeriği saran kabı stillendirir.
3 İçerik dolgusunu ekle
import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
____={{ padding: 16 }}>
<Text>Başlık</Text>
</ScrollView>
);
}import { ScrollView, Text } from 'react-native';
function App() {
return (
<ScrollView
contentContainerStyle={{ padding: 16 }}>
<Text>Başlık</Text>
</ScrollView>
);
}Açıklama: contentContainerStyle içeriğe padding uygular.