Görüntüleme
- React Native kursu
- Başlangıç
- Ders 85/116
- 6 dk
Sıcaklık ve durumu görüntülersin.
Sıcaklığı görüntüle
Artık weather state'i var. Ekranda bunu göstermenin zamanı. Sıcaklık için büyük bir <Text>, durum için bir başka <Text> kullanırız.
Sıcaklık etiketi şöyledir: <Text style={'{ styles.temp }'}>{`{weather.temp}°C`}</Text>. Burada {`{weather.temp}`} ifadesi state'ten değeri çeker ve °C ile yanına birim koyar.
Şehir ve durum için benzer etiketler eklenir. Stil olarak fontSize ve fontWeight ile hiyerarşi kurulur; sıcaklık en büyük, şehir ve durum daha küçük görünür.
Hava durumu kartı stili
Sıcaklığı vurgulamak için büyük font kullanırız: fontSize: 64. Şehir için orta boy: fontSize: 24. Durum için daha sade: fontSize: 18, gri renk.
Her Text'e kendi stilini veririz. StyleSheet.create içinde city, temp ve condition adında üç anahtar tanımlarız. Böylece kod düzenli kalır.
Renk de ekleyebiliriz: color: '#333'. Bu, hafif gri tonlardan biridir; okunabilirliği artırır. İleride arka plan görseli eklerken beyaz rengi tercih edebilirsin.
Uygulama Hava durumu kartını göster
İskelete üç <Text> ekle: şehir, sıcaklık ve durum. Sırayla {`{weather.city}`}, {`{weather.temp}°C`} ve {`{weather.condition}`} göstersinler. Her birine StyleSheet.create'te tanımlı stil ver (styles.city, styles.temp, styles.condition). temp stilinde fontSize: 64 olsun. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
const [weather, setWeather] = useState({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
return (
<View style={styles.container}>
{/* üç Text'i buraya ekle */}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;Örnek çözüm
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
function App() {
const [weather, setWeather] = useState({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
return (
<View style={styles.container}>
<Text style={styles.city}>{weather.city}</Text>
<Text style={styles.temp}>{weather.temp}°C</Text>
<Text style={styles.condition}>{weather.condition}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
city: { fontSize: 24, marginBottom: 8 },
temp: { fontSize: 64, fontWeight: 'bold' },
condition: { fontSize: 18, color: '#555' }
});
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sıcaklık nasıl gösterilir?
- <Text>{weather.temp}°C</Text>
- <Text>weather</Text>
- <View>temp</View>
- <Text>temp</Text> Doğru cevap
Açıklama: weather.temp süslü parantez içinde değerlendirilir.
2 Görüntüleme parçalarını eşle
| Kavram | Anlamı |
|---|---|
weather.temp |
Sıcaklık değeri |
weather.city |
Şehir adı |
weather.condition |
Durum |
fontSize: 64 |
Sıcaklık stili |
3 Sıcaklık stilli Text
import { Text } from 'react-native';
function App() {
return (
<Text style={{ fontSize: ____ }}>{weather.temp}°C</Text>
);
}import { Text } from 'react-native';
function App() {
return (
<Text style={{ fontSize: 64 }}>{weather.temp}°C</Text>
);
}Açıklama: fontSize: 64 büyük sıcaklık için uygundur.