style prop

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.

Örnek çözümü göster

import React from 'react';
import { Text } from 'react-native';

export default function Title() {
  return <Text style={{ color: 'red' }}>Başlık</Text>;
}

Kendini test et

Hangisi geçerli bir inline style yazımıdır?
```
<Text ??? >Merhaba</Text>
```
- style={{ color: 'red' }}
- style={ color: 'red' }
- style=(color: 'red')
- style:[ color: 'red' ]
Cevabı göster

style={{ color: 'red' }} — style bir nesne alır; nesne çift süslü parantezle yazılır.

Inline style'ı tamamla

<Text style={{____}}>Merhaba</Text>

Cevabı göster

<Text style={{color: 'red'}}>Merhaba</Text>

Özelliği işlevine eşle

color

Metin rengi
fontSize

Punto büyüklüğü
backgroundColor

Arka plan rengi
padding

İçerideki boşluk

Sıradaki ders: StyleSheet.create

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler