flexDirection
- React Native kursu
- Başlangıç
- Ders 36/116
- 5 dk
flexDirection ile düzen yönünü öğrenirsin.
flexDirection
React Native'te her View varsayılan olarak bir flex kabıdır. İçindeki çocukları hangi yönde dizacağı flexDirection ile belirlenir. İki temel değer: 'column' çocukları alt alta (dikey), 'row' yan yana (yatay) dizer.
Önemli ayrım: 'column' varsayılan değerdir; yazmasan da aynı davranır. Yatay bir sıra istediğinde flexDirection: 'row' yazmak zorundasın. Bu özellik kaba verilir; çocuklar tek satıra sığmasa bile alt satıra geçmez (bunu ileride flexWrap ile çözeceksin).
Yatay sıra örneği
Bir düğme çubuğu hayal et: Kaydet ve İptal yan yana durmalı. Bunun için dış View'a flexDirection: 'row' verirsin. İçerideki iki Text artık soldan sağa dizilir.
Kod: <View style={{ flexDirection: 'row' }}><Text>Kaydet</Text><Text>İptal</Text></View>. Children'lar arasındaki boşluğu sonraki derslerde justifyContent ile ayarlayacaksın. Şimdilik yönü belirlemek yeterli.
Uygulama İki kutuyu yan yana diz
Boş StyleSheet.create bloğunu doldur. row adında stil tanımla: flexDirection: 'row'. Bileşen <View style={styles.row}> döndürsün ve içinde <Text>A</Text> ile <Text>B</Text> bulunsun.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Row() {
return (
<View>
<Text>A</Text>
<Text>B</Text>
</View>
);
}
const styles = StyleSheet.create({
// row stilini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Row() {
return (
<View style={styles.row}>
<Text>A</Text>
<Text>B</Text>
</View>
);
}
const styles = StyleSheet.create({
row: { flexDirection: 'row' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 flexDirection'ın varsayılan değeri nedir?
<View style={{ flexDirection: ??? }}>
<Text>A</Text>
<Text>B</Text>
</View>- 'row'
- 'horizontal'
- 'column' Doğru cevap
- 'stack'
Açıklama: Varsayılan 'column'dur; çocuklar alt alta dizilir.
2 Yatay dizilim değerini yaz
<View style={{ flexDirection:____}}>
<Text>A</Text>
<Text>B</Text>
</View><View style={{ flexDirection:'row'}}>
<Text>A</Text>
<Text>B</Text>
</View>Açıklama: 'row' çocukları yan yana dizer.
3 Değeri yönüne eşle
| Kavram | Anlamı |
|---|---|
'row' |
Yan yana |
'column' |
Alt alta |
'column' (varsayılan) |
Yazılmasa da uygulanır |
flexDirection |
Dizilim yönünü verir |