border
- React Native kursu
- Başlangıç
- Ders 34/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
return (
<View>
<Text>Kart</Text>
</View>
);
}
const styles = StyleSheet.create({
// card stilini buraya ekle
});Örnek çözüm
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 }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Köşe yuvarlama özelliğini yaz
styles = StyleSheet.create({
card: { borderWidth: 1,____: 8 }
});styles = StyleSheet.create({
card: { borderWidth: 1,borderRadius: 8 }
});Açıklama: borderRadius köşeleri yuvarlatır.
2 Özelliği işlevine eşle
| Kavram | Anlamı |
|---|---|
borderWidth |
Çizgi kalınlığı |
borderColor |
Çizgi rengi |
borderRadius |
Köşe yuvarlama |
overflow: 'hidden' |
İçeriği kırpar |
3 Hangisi geçerli bir kenarlık stilidir?
{ ??? }- borderWidth: 1, borderColor: 'gray' Doğru cevap
- border: '1px gray'
- borderWidth 1, borderColor gray
- border: 1 gray
Açıklama: React Native'de her kenarlık özelliği ayrı yazılır.