justifyContent
- React Native kursu
- Başlangıç
- Ders 37/116
- 5 dk
justifyContent ile ana eksen hizalamayı öğrenirsin.
justifyContent
justifyContent çocukları ana eksen boyunca nasıl dağıtacağını belirler. flexDirection: 'row' iken ana eksen yataydır; 'column' iken dikeydir. Yaygın değerler: 'flex-start' (başa yapış), 'center' (ortala), 'space-between' (aralarını eşit aç), 'flex-end' (son yapış).
Örneğin bir düğme çubuğunda justifyContent: 'space-between' ilk düğmeyi sola, son düğmeyi sağa koyar; aralarındaki boşluğu eşit böler. Bu değerler kabın ana eksenini kontrol eder; çapraz eksen için alignItems kullanılır.
space-between ne yapar?
justifyContent: 'space-between' ilk çocuk başa, son çocuk sona yapışır; aradakılerin boşluğu eşit bölünür. Üç düğmeli bir araç çubuğunda Kaydet sola, İptal sağa, Yardım tam ortaya düşer.
Benzeri 'space-around': her çocuğa eşit boşluk verilir ama uçlardaki çocuklar kenara yarım boşlukla yaklaşır. 'space-evenly' ise tüm boşlukları (uçlar dahil) eşit yapar. Mobil tasarımda en sık 'space-between' ve 'center' kullanılır.
Uygulama Düğme çubuğu yaz
Boş StyleSheet.create bloğunu doldur. bar adında stil tanımla: flexDirection: 'row', justifyContent: 'space-between'. Bileşen <View style={styles.bar}> döndürsün ve içinde <Text>Kaydet</Text> ile <Text>İptal</Text> bulunsun.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Bar() {
return (
<View>
<Text>Kaydet</Text>
<Text>İptal</Text>
</View>
);
}
const styles = StyleSheet.create({
// bar stilini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Bar() {
return (
<View style={styles.bar}>
<Text>Kaydet</Text>
<Text>İptal</Text>
</View>
);
}
const styles = StyleSheet.create({
bar: { flexDirection: 'row', justifyContent: 'space-between' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Ortalama değerini yaz
<View style={{ flexDirection: 'row', justifyContent:____}}>
<Text>A</Text>
<Text>B</Text>
</View><View style={{ flexDirection: 'row', justifyContent:'center'}}>
<Text>A</Text>
<Text>B</Text>
</View>Açıklama: 'center' çocukları ana eksende ortalar.
2 Hangisi çocukları kenarlara yapıştırır?
justifyContent: ???- 'stretch'
- 'center'
- 'flex-start'
- 'space-between' Doğru cevap
Açıklama: space-between ilk ve son çocuğu kenarlara yapıştırır.
3 Değeri işlevine eşle
| Kavram | Anlamı |
|---|---|
'flex-start' |
Başa yapış |
'center' |
Ortala |
'space-between' |
Kenarlara yapış, arayı böl |
'flex-end' |
Sona yapış |