flexDirection

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.

Örnek çözümü göster

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' }
});

Kendini test et

flexDirection'ın varsayılan değeri nedir?
```
<View style={{ flexDirection: ??? }}>
  <Text>A</Text>
  <Text>B</Text>
</View>
```
- 'row'
- 'horizontal'
- 'column'
- 'stack'
Cevabı göster

'column' — Varsayılan 'column'dur; çocuklar alt alta dizilir.

Yatay dizilim değerini yaz

<View style={{ flexDirection:____}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Cevabı göster

<View style={{ flexDirection:'row'}}>
  <Text>A</Text>
  <Text>B</Text>
</View>

Değeri yönüne eşle

'row'

Yan yana
'column'

Alt alta
'column' (varsayılan)

Yazılmasa da uygulanır
flexDirection

Dizilim yönünü verir

Sıradaki ders: justifyContent

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler