Özet - Flexbox

flexDirection, justifyContent ve alignItems'i birleştirerek bir menü çubuğu yazarsın.

Özet - Flexbox

Bu grupta beş şey öğrendin. flexDirection çocukları yan yana ya da alt alta dizer. justifyContent ana eksende dağıtır; alignItems çapraz eksende hizalar. flex bir çocuğa kalan boş alanı orantılı verir. flexWrap sığmayan çocukları yeni satıra geçirir.

Şimdi bunları birleştirip gerçek bir menü çubuğu yazacaksın: solda logo, sağda üç menü öğesi, hepsi tek satırda ve dikeyde ortalanmış. İki küçük görev seni sonuca götürecek.

Uygulama Menü çubuğu iskeleti

Boş StyleSheet.create bloğunu doldur. bar adında stil tanımla: flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'. Bileşen <View style={styles.bar}> döndürsün; solda <Text>Logo</Text>, sağda <Text>Menü</Text> bulunsun.

Örnek çözümü göster

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function MenuBar() {
  return (
    <View style={styles.bar}>
      <Text>Logo</Text>
      <Text>Menü</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  bar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }
});

Uygulama Sağ tarafa üç menü öğesi ekle

Önceki iskeletin sağındaki tek Text'i, içinde üç öge bulunan bir <View style={styles.right}> ile değiştir. right stilini ekle: flexDirection: 'row', gap: 12. Sağ View içinde üç <Text> bulunsun: Ana Sayfa, Hakkında, İletişim.

Örnek çözümü göster

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function MenuBar() {
  return (
    <View style={styles.bar}>
      <Text>Logo</Text>
      <View style={styles.right}>
        <Text>Ana Sayfa</Text>
        <Text>Hakkında</Text>
        <Text>İletişim</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  bar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  right: { flexDirection: 'row', gap: 12 }
});

Kendini test et

Hangi özellik ana eksende dağıtır?
```
/* flexDirection: 'row' iken */
```
- flexWrap
- alignItems
- flex
- justifyContent
Cevabı göster

justifyContent — justifyContent ana eksende dağıtır.
Özelliği işlevine eşle

flexDirection

Dizilim yönü
justifyContent

Ana eksen dağıtma
alignItems

Çapraz eksen hizalama
flexWrap

Yeni satıra geçirme

Sıradaki ders: Button

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler