Özet - Flexbox
- React Native kursu
- Başlangıç
- Ders 41/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function MenuBar() {
// View ve iki Text ile menü çubuğunu yaz
return null;
}
// bar stilini buraya ekleÖrnek çözüm
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.
Başlangıç kodu
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' }
// right stilini buraya ekle
});Örnek çözüm
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 }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi özellik ana eksende dağıtır?
/* flexDirection: 'row' iken */- flexWrap
- alignItems
- flex
- justifyContent Doğru cevap
Açıklama: justifyContent ana eksende dağıtır.
2 Özelliği işlevine eşle
| Kavram | Anlamı |
|---|---|
flexDirection |
Dizilim yönü |
justifyContent |
Ana eksen dağıtma |
alignItems |
Çapraz eksen hizalama |
flexWrap |
Yeni satıra geçirme |