React Native
alignItems
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.
Ö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', justifyContent: 'center', alignItems: 'center' }
});
Kendini test et
-
Değeri hizalamasına eşle
- 'flex-start'
- Üst hizalama
- 'center'
- Orta hizalama
- 'flex-end'
- Alt hizalama
- 'stretch'
- Kabı doldur
-
alignItems'ın varsayılan değeri nedir?
<View style={{ flexDirection: 'row' }}>
{/* alignItems verilmedi */}
</View>
- 'stretch'
- 'flex-start'
- 'center'
- 'auto'
Cevabı göster
'stretch' — Varsayılan 'stretch'tir; çocuklar kabı doldurur.
-
Dikey ortalama değerini yaz
<View style={{ flexDirection: 'row', alignItems:____}}>
<Text>A</Text>
<Text>B</Text>
</View>
Cevabı göster
<View style={{ flexDirection: 'row', alignItems:'center'}}>
<Text>A</Text>
<Text>B</Text>
</View>
Sıradaki ders: flex
