React Native
Görüntüleme
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.
Örnek çözümü göster
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;
Kendini test et
-
Sıcaklık nasıl gösterilir?
- <Text>{weather.temp}°C</Text>
- <Text>weather</Text>
- <View>temp</View>
- <Text>temp</Text>
Cevabı göster
<Text>temp</Text> — weather.temp süslü parantez içinde değerlendirilir.
-
Görüntüleme parçalarını eşle
- weather.temp
- Sıcaklık değeri
- weather.city
- Şehir adı
- weather.condition
- Durum
- fontSize: 64
- Sıcaklık stili
-
Sıcaklık stilli Text
import { Text } from 'react-native';
function App() {
return (
<Text style={{ fontSize: ____ }}>{weather.temp}°C</Text>
);
}
Cevabı göster
import { Text } from 'react-native';
function App() {
return (
<Text style={{ fontSize: 64 }}>{weather.temp}°C</Text>
);
}
Sıradaki ders: Şehir seçimi
