React Native
border
borderWidth, borderColor, borderRadius öğrenirsin.
border
Bir kutunun etrafına çizgi çekmek için üç özellik birlikte kullanılır. borderWidth çizgi kalınlığını piksel olarak, borderColor çizgi rengini, borderRadius köşe yuvarlanmasını verir. Örneğin { borderWidth: 1, borderColor: 'gray', borderRadius: 8 } ince gri kenarlıklı, hafif yuvarlak köşeli bir kutu üretir.
React Native'de kenarlık için tek bir border shorthand yoktur; her özelliği ayrı yazmak gerekir. Yuvarlatma köşeleri kırpar; yuvarlak köşeli bir kart için hem borderRadius hem overflow: 'hidden' kullanmak gerekir.
Tek kenar çizgisi
Bazen yalnızca bir kenara çizgi gerekir. React Native bunun için borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth özelliklerini sunar. Yön, kenar çizgisinin konumunu belirler; renk içinse borderTopColor gibi yön eşleniği kullanılır.
Örneğin bir kartın yalnızca altına ayraç çizmek için { borderBottomWidth: 1, borderBottomColor: 'lightgray' } yeterlidir. Bu yöntem liste satırlarını ayırmak için çok kullanılır. Tüm kenarlar için borderWidth ile başla, tek kenar değişimi gerektiğinde yön eki kullan.
Uygulama Kenarlıklı kart yaz
Boş StyleSheet.create bloğunu doldur. card adında stil tanımla: borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 12. Bileşen <View style={styles.card}><Text>Kart</Text></View> döndürsün.
Örnek çözümü göster
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
return (
<View style={styles.card}>
<Text>Kart</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { borderWidth: 1, borderColor: 'gray', borderRadius: 8, padding: 12 }
});
Kendini test et
-
Köşe yuvarlama özelliğini yaz
styles = StyleSheet.create({
card: { borderWidth: 1,____: 8 }
});
Cevabı göster
styles = StyleSheet.create({
card: { borderWidth: 1,borderRadius: 8 }
});
-
Özelliği işlevine eşle
- borderWidth
- Çizgi kalınlığı
- borderColor
- Çizgi rengi
- borderRadius
- Köşe yuvarlama
- overflow: 'hidden'
- İçeriği kırpar
-
Hangisi geçerli bir kenarlık stilidir?
{ ??? }
- borderWidth: 1, borderColor: 'gray'
- border: '1px gray'
- borderWidth 1, borderColor gray
- border: 1 gray
Cevabı göster
borderWidth: 1, borderColor: 'gray' — React Native'de her kenarlık özelliği ayrı yazılır.
Sıradaki ders: Özet - Stil
