alignItems
- React Native kursu
- Başlangıç
- Ders 38/116
- 5 dk
alignItems ile çapraz eksen hizalamayı öğrenirsin.
alignItems
alignItems çocukları çapraz eksende hizalar. flexDirection: 'row' iken ana eksen yatay, çapraz eksen dikeydir; bu durumda alignItems çocukları dikeyde hizalar. Yaygın değerler: 'flex-start' (üst), 'center' (ortala), 'flex-end' (alt), 'stretch' ( Kabı dolduracak şekilde uzat).
Varsayılan değer 'stretch''tir; bu yüzden flexDirection: 'column' iken çocuklar kabın genişliğini doldurur. Bir düğme çubuğunda yükseklikleri eşitlemek için alignItems: 'center' sıkça kullanılır.
Ortalı düğme çubuğu
Bir düğme çubuğunda düğmelerin yükseklikleri farklı olabilir; alignItems: 'center' hepsini dikeyde ortalar. Böylece bir düğme uzun, biri kısa olsa bile görsel olarak hizalı durur. justifyContent: 'space-between' ile birlikte kullanıldığında yatayda iki uca, dikeyde merkeze hizalanmış bir çubuk elde edilir.
Örnek: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }. Mobil tasarımda bu üçlü çok yaygındır; araç çubukları, başlık satırları ve menüler için temel kombinasyonu oluşturur.
Uygulama Ortalı satır yaz
Boş StyleSheet.create bloğunu doldur. row adında stil tanımla: flexDirection: 'row', justifyContent: 'center', alignItems: 'center'. 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', justifyContent: 'center', alignItems: 'center' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Değeri hizalamasına eşle
| Kavram | Anlamı |
|---|---|
'flex-start' |
Üst hizalama |
'center' |
Orta hizalama |
'flex-end' |
Alt hizalama |
'stretch' |
Kabı doldur |
2 alignItems'ın varsayılan değeri nedir?
<View style={{ flexDirection: 'row' }}>
{/* alignItems verilmedi */}
</View>- 'stretch' Doğru cevap
- 'flex-start'
- 'center'
- 'auto'
Açıklama: Varsayılan 'stretch'tir; çocuklar kabı doldurur.
3 Dikey ortalama değerini yaz
<View style={{ flexDirection: 'row', alignItems:____}}>
<Text>A</Text>
<Text>B</Text>
</View><View style={{ flexDirection: 'row', alignItems:'center'}}>
<Text>A</Text>
<Text>B</Text>
</View>Açıklama: 'center' çocukları çapraz eksende ortalar.