flexWrap
- React Native kursu
- Başlangıç
- Ders 40/116
- 5 dk
flexWrap ile sarma davranışını öğrenirsin.
flexWrap
Varsayılan olarak flex çocuklar tek satırda kalır; sığmasalar bile taşarlar. flexWrap: 'wrap' verildiğinde sığmayan çocuk bir sonraki satıra geçer. Etiketler, çipler ve küçük resim galerileri için idealdir.
Örnek: <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}> içinde beş etiket varsa, üçü ilk satıra, ikisi ikinci satıra dizilir. Varsayılan değer 'nowrap''tır; açıkça 'wrap' yazmazsan çocuklar taşar.
Etiket bulutu
Bir etiket bulutu hayal et: her etiket farklı genişlikte ve ekrana sığması gerekiyor. flexDirection: 'row' ile flexWrap: 'wrap' birlikte verilirse etiketler soldan sağa dizilir ve sığmayanınca alt satıra iner. Etiketler arası boşluk için gap özelliği kullanışlıdır.
Örnek: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }. Böylece her etiket kendi boyunu korurken satırlar arası 8 piksel boşluk kalır. Mobilde gap modern React Native sürümlerinde desteklenir; eski sürümlerde her çocuğa marginRight vermek gerekir.
Uygulama Etiket bulutu yaz
Boş StyleSheet.create bloğunu doldur. cloud adında stil tanımla: flexDirection: 'row', flexWrap: 'wrap', gap: 8. Bileşen <View style={styles.cloud}> döndürsün ve içinde üç <Text> bulunsun: Elma, Armut, Kiraz.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function TagCloud() {
return (
<View>
<Text>Elma</Text>
<Text>Armut</Text>
<Text>Kiraz</Text>
</View>
);
}
const styles = StyleSheet.create({
// cloud stilini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function TagCloud() {
return (
<View style={styles.cloud}>
<Text>Elma</Text>
<Text>Armut</Text>
<Text>Kiraz</Text>
</View>
);
}
const styles = StyleSheet.create({
cloud: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sarma değerini yaz
<View style={{ flexDirection: 'row', flexWrap:____}}>
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</View><View style={{ flexDirection: 'row', flexWrap:'wrap'}}>
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</View>Açıklama: 'wrap' sığmayan çocukları yeni satıra geçirir.
2 Değeri davranışına eşle
| Kavram | Anlamı |
|---|---|
'wrap' |
Yeni satıra geç |
'nowrap' |
Tek satırda taş |
flexDirection: 'row' |
Yatay dize |
flex: 1 |
Boş alanı al |
3 flexWrap yazılmazsa ne olur?
<View style={{ flexDirection: 'row' }}>
{/* 10 etiket */}
</View>- Çocuklar otomatik sarmalanır
- Çocuklar alt alta dizilir
- Çocuklar tek satırda taşar Doğru cevap
- Çocuklar gizlenir
Açıklama: Varsayılan 'nowrap'tır; çocuklar tek satırda taşar.