Renk ve font
- React Native kursu
- Başlangıç
- Ders 32/116
- 4 dk
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.
Başlangıç kodu
import React from 'react';
import { Text, StyleSheet } from 'react-native';
export default function Title() {
return <Text>Başlık</Text>;
}
const styles = StyleSheet.create({
// title stilini buraya ekle
});Örnek çözüm
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' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Özelliği değerine eşle
| Kavram | Anlamı |
|---|---|
color |
'tomato' |
fontSize |
18 |
fontWeight |
'bold' |
backgroundColor |
'white' |
2 Metni kalın yapmak için hangi özellik kullanılır?
<Text style={{ ???: 'bold' }}>Önemli</Text>- fontStyle
- bold
- fontWeight Doğru cevap
- textBold
Açıklama: 'bold' metni kalın yapar.
3 fontWeight değerini yaz
<Text style={{ fontSize: 16,____: 'bold' }}>Başlık</Text><Text style={{ fontSize: 16,fontWeight: 'bold' }}>Başlık</Text>Açıklama: 'bold' metni kalın yapar.