React Native
flexWrap
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.
Örnek çözümü göster
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 }
});
Kendini test et
-
Sarma değerini yaz
<View style={{ flexDirection: 'row', flexWrap:____}}>
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</View>
Cevabı göster
<View style={{ flexDirection: 'row', flexWrap:'wrap'}}>
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</View>
-
Değeri davranışına eşle
- 'wrap'
- Yeni satıra geç
- 'nowrap'
- Tek satırda taş
- flexDirection: 'row'
- Yatay dize
- flex: 1
- Boş alanı al
-
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
- Çocuklar gizlenir
Cevabı göster
Çocuklar tek satırda taşar — Varsayılan 'nowrap'tır; çocuklar tek satırda taşar.
Sıradaki ders: Özet - Flexbox
