Birleştirme
- React Native kursu
- Başlangıç
- Ders 87/116
- 6 dk
Tüm parçaları birleştirerek çalışan bir hava durumu uygulaması yazarsın.
Hepsini birleştir
Son adımda tüm parçaları birleştiriyoruz: uygulama iskeleti, weather state'i, sıcaklık ve durum görüntüleme, şehir seçici. Bir de aşağı çek yenile özelliği ekleyeceğiz.
ScrollView ve RefreshControl gruplarından hatırla: <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> ile aşağı çek yenile yapılır. refreshing state'i yükleyiciyi yönetir; handleRefresh veriyi yeniden çeker.
Bu projede veriyi uzaktan çekmiyoruz; setTimeout ile iki saniye sonra setRefreshing(false) yaparak yenileme tamamlandı hissi vereceğiz. Gerçek bir uygulamada burada bir ağ isteği olurdu.
Son dokunuşlar
Şimdi iki görev var. Önce Picker ve hava durumu kartını aynı ekranda birleştir; sonra tüm View'ı ScrollView içine al ve refreshControl ekle.
Birinci görevde Picker'ı kartın altına koy. selectedValue ve onValueChange zaten tanımlı; sadece konumu düzelt.
İkinci görevde dış kabuğu <ScrollView> ile değiştir. refreshControl prop'una <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> ver. refreshing için useState(false), handleRefresh için setTimeout ile iki saniye sonra false yapan bir fonksiyon tanımla.
Uygulama Kart ve şehir seçiciyi birleştir
App bileşeninde weather kartı ile Picker'ı yan yana göster. Kart üstte, Picker altta olsun. getWeather fonksiyonunu ve WEATHER_BY_CITY nesnesini kullan. En az iki <Picker.Item> ekle. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
// WEATHER_BY_CITY, getWeather ve App'i buraya yazÖrnek çözüm
import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
const WEATHER_BY_CITY = {
'İstanbul': { city: 'İstanbul', temp: 18, condition: 'Bulutlu' },
'Ankara': { city: 'Ankara', temp: 22, condition: 'Güneşli' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['İstanbul'];
function App() {
const [weather, setWeather] = useState(getWeather('İstanbul'));
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>
<Picker
selectedValue={weather.city}
onValueChange={(value) => setWeather(getWeather(value))}>
<Picker.Item label='İstanbul' value='İstanbul' />
<Picker.Item label='Ankara' value='Ankara' />
</Picker>
</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;Uygulama Tam uygulamayı yaz
Tüm View kabuğunu <ScrollView> ile değiştir. refreshControl prop'una <RefreshControl refreshing={'{refreshing}'} onRefresh={'{handleRefresh}'} /> ver. refreshing için useState(false), handleRefresh için iki saniye sonra setRefreshing(false) yapan bir fonksiyon tanımla. Kart ve Picker içeride kalsın. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import { Picker } from '@react-native-picker/picker';
const WEATHER_BY_CITY = {
'İstanbul': { city: 'İstanbul', temp: 18, condition: 'Bulutlu' },
'Ankara': { city: 'Ankara', temp: 22, condition: 'Güneşli' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['İstanbul'];
function App() {
const [weather, setWeather] = useState(getWeather('İstanbul'));
// refreshing state ve handleRefresh'i buraya yaz
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>
<Picker selectedValue={weather.city} onValueChange={(value) => setWeather(getWeather(value))}>
<Picker.Item label='İstanbul' value='İstanbul' />
<Picker.Item label='Ankara' value='Ankara' />
</Picker>
</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;Örnek çözüm
import { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import { Picker } from '@react-native-picker/picker';
const WEATHER_BY_CITY = {
'İstanbul': { city: 'İstanbul', temp: 18, condition: 'Bulutlu' },
'Ankara': { city: 'Ankara', temp: 22, condition: 'Güneşli' }
};
const getWeather = (city) => WEATHER_BY_CITY[city] || WEATHER_BY_CITY['İstanbul'];
function App() {
const [weather, setWeather] = useState(getWeather('İstanbul'));
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = () => {
setRefreshing(true);
setTimeout(() => setRefreshing(false), 2000);
};
return (
<ScrollView style={styles.container} contentContainerStyle={{ alignItems: 'center', justifyContent: 'center', flex: 1 }} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}>
<Text style={styles.city}>{weather.city}</Text>
<Text style={styles.temp}>{weather.temp}°C</Text>
<Text style={styles.condition}>{weather.condition}</Text>
<Picker selectedValue={weather.city} onValueChange={(value) => setWeather(getWeather(value))}>
<Picker.Item label='İstanbul' value='İstanbul' />
<Picker.Item label='Ankara' value='Ankara' />
</Picker>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
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 Aşağı çek yenile nasıl yapılır?
- Yalnızca Pressable ile
- RefreshControl ile Doğru cevap
- Yalnızca StyleSheet ile
- Yalnızca Picker ile
Açıklama: RefreshControl refreshing ve onRefresh ile çalışır.
2 Birleştirme parçalarını eşle
| Kavram | Anlamı |
|---|---|
ScrollView |
Dış kabuk |
RefreshControl |
Aşağı çek yenile |
Picker |
Şehir seçimi |
weather state |
Sıcaklık ve durum verisi |