style prop
- React Native kursu
- Başlangıç
- Ders 30/116
- 4 dk
style prop ile bileşen stillendirmeyi öğrenirsin.
style prop
React Native'te bir bileşeni stillendirmek için style prop'u kullanırsın. Değer bir JavaScript nesnesidir ve çift süslü parantezle yazılır: <Text style={{ color: 'red' }}>Merhaba</Text>.
Önemli ayrım: CSS'ten farklı olarak özellik adları camelCase yazılır. font-size değil fontSize, background-color değil backgroundColor. Değerler de dize ise tırnak içinde verilir: 'red', '16px' ya da sayısal: 16.
Sık kullanılan stil özellikleri
Birkaç temel özellik çoğu bileşende işini görür. color metin rengini, fontSize puntoyu, backgroundColor arka plan rengini belirler. padding içerideki boşluğu, margin dışarıdaki boşluğu ayarlar.
Bu özelliklerin hepsi sayı ya da dize alır. Örneğin { padding: 12 } sayısal piksel değeridir; { color: 'tomato' } ise dize. Değer birim eklemeden yazılır çünkü React Native pikseli varsayar.
Uygulama Kırmızı başlık yaz
Title bileşeni şu an boş. <Text> döndür ve style prop'una inline nesne ver: { color: 'red' }. Metin Başlık olsun.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
export default function Title() {
// Text'i kırmızı renkle stillendir
return null;
}Örnek çözüm
import React from 'react';
import { Text } from 'react-native';
export default function Title() {
return <Text style={{ color: 'red' }}>Başlık</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi geçerli bir inline style yazımıdır?
<Text ??? >Merhaba</Text>- style={{ color: 'red' }} Doğru cevap
- style={ color: 'red' }
- style=(color: 'red')
- style:[ color: 'red' ]
Açıklama: style bir nesne alır; nesne çift süslü parantezle yazılır.
2 Inline style'ı tamamla
<Text style={{____}}>Merhaba</Text><Text style={{color: 'red'}}>Merhaba</Text>Açıklama: color özelliği dize değer 'red' ile yazılır.
3 Özelliği işlevine eşle
| Kavram | Anlamı |
|---|---|
color |
Metin rengi |
fontSize |
Punto büyüklüğü |
backgroundColor |
Arka plan rengi |
padding |
İçerideki boşluk |