Renk ve font

color, fontSize, fontWeight öğrenirsin.

Renk ve font

Metin görünümünü üç özellik belirler. color harflerin rengini, fontSize puntoyu, fontWeight kalınlığı ayarlar. Örneğin { color: 'navy', fontSize: 18, fontWeight: 'bold' } koyu lacivert, 18 punto, kalın bir metin verir.

Renkler İngilizce adla ('tomato', 'steelblue') ya da onaltılık ('#ff5733') yazılır. fontWeight için dize değerler ('bold', 'normal') veya sayılar (400–900) kullanılır; 700 kalın kabul edilir.

Renk biçimleri

React Native renkleri üç biçimde kabul eder. İngilizce ad: 'tomato', 'navy'. Onaltılık: '#ff5733' ya da kısa '#f53'. Sayısal rgb: 'rgb(255, 87, 51)'.

Şeffaflık için rgba kullanılır: 'rgba(255, 87, 51, 0.5)' yarı saydam bir kırmızı verir. Dört değerden sonuncusu 0 ile 1 arasında bir alfa kanalıdır; 0 tamamen şeffaf, 1 tamamen opaktır. Renkler küçük harfle yazılır.

Uygulama Stil dosyası yaz

Boş StyleSheet.create bloğunu doldur. title adında stil tanımla: color: 'navy', fontSize: 20, fontWeight: 'bold'. Bileşen <Text style={styles.title}>Başlık</Text> döndürsün.

Örnek çözümü göster

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

export default function Title() {
  return <Text style={styles.title}>Başlık</Text>;
}

const styles = StyleSheet.create({
  title: { color: 'navy', fontSize: 20, fontWeight: 'bold' }
});

Kendini test et

Özelliği değerine eşle

color

'tomato'
fontSize

18
fontWeight

'bold'
backgroundColor

'white'
Metni kalın yapmak için hangi özellik kullanılır?
```
<Text style={{ ???: 'bold' }}>Önemli</Text>
```
- fontStyle
- bold
- fontWeight
- textBold
Cevabı göster

fontWeight — 'bold' metni kalın yapar.

fontWeight değerini yaz

<Text style={{ fontSize: 16,____: 'bold' }}>Başlık</Text>

Cevabı göster

<Text style={{ fontSize: 16,fontWeight: 'bold' }}>Başlık</Text>

Sıradaki ders: Margin ve padding

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler