React Native
Veri modeli
Hava durumu veri modelini kurarsın.
Hava durumu verisi
Bir hava durumu kaydında en az üç bilgi olur: city (şehir adı), temp (sıcaklık) ve condition (durum: güneşli, bulutlu, yağmurlu). Bu üçünü bir nesnede tutmak mantıklıdır.
Örneğin İstanbul için: {`{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }`}. Bu nesne uygulamanın weather state'inde tutulur ve ekran buradan beslenir.
State grupunda nesne state'i öğrenmiştin. Burada aynı deseni kullanırız: const [weather, setWeather] = useState({'{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }'}).
weather state'i tanımla
State grubundan hatırla: useState bir başlangıç değeri alır ve değer-setter ikilisi döndürür. Nesne state'inde başlangıç bir nesnedir.
Burada const [weather, setWeather] = useState({'{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }'}) yazarız. Böylece ilk render'da ekranda İstanbul veriliri görünür; kullanıcı şehir değiştirdiğinde setWeather ile nesneyi yeniden yazarız.
İleride şehir seçiminde spread yerine tam nesne vererek değiştireceğiz: setWeather({'{ city: 'Ankara', temp: 22, condition: 'Güneşli' }'}). Çünkü şehir değişince üç alan birden değişir; spread gerektirmez.
Uygulama weather state'i ekle
App bileşenine useState ile bir weather state'i ekle. Başlangıç değeri {`{ city: 'İstanbul', temp: 18, condition: 'Bulutlu' }`} 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>Hava durumu</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;
Kendini test et
-
Veri alanlarını eşle
- city
- Şehir adı
- temp
- Sıcaklık değeri
- condition
- Hava durumu
- weather
- State nesnesi
-
Sıcaklık hangi alanla tutulur?
Cevabı göster
condition — temp sayı olarak sıcaklığı taşır.
-
useState başlangıç nesnesi
import { useState } from 'react';
function App() {
const [weather, setWeather] = ____({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
}
Cevabı göster
import { useState } from 'react';
function App() {
const [weather, setWeather] = useState({ city: 'İstanbul', temp: 18, condition: 'Bulutlu' });
}
Sıradaki ders: Görüntüleme
