Şehir seçimi

Şehir seçimi eklersin.

Şehir seçimi yaklaşımı

Kullanıcının şehir seçmesi için birkaç seçenek var: düğmeler, bir liste ya da bir Picker. Bu projede Picker kullanacağız; o, açılır bir menü gibidir ve az yer kaplar.

Picker @react-native-picker/picker paketinden gelir. import {'{ Picker }'} from '@react-native-picker/picker' ile içe aktarılır. Her şehir için bir <Picker.Item> eklersin.

Picker'ın selectedValue prop'u hangi şehrin seçili olduğunu, onValueChange ise seçim değişince çağrılır. Biz setWeather ile yeni şehre göre tüm weather nesnesini güncelleyeceğiz.

Şehir değişince weather'ı güncelle

Picker'ın onValueChange prop'u yeni seçilen değeri alır. Biz bu değere göre yeni bir weather nesnesi kurup setWeather ile kaydederiz.

Örnek: onValueChange={'{(value) => setWeather(getWeather(value))}'}. Burada getWeather bir şehir adı alıp ona ait hava durumu nesnesini döndüren yardımcı fonksiyondur. Böylece kod sade kalır.

Bu derste getWeather'i basit bir if zinciri ya da nesne haritası olarak yazabiliriz. Şimdilik üç şehir yeterli: İstanbul, Ankara, İzmir. Her birinin temp ve condition değerlerini elle vereceğiz.

Uygulama Şehir seçici ekle

App bileşenine bir <Picker> ekle. selectedValue={'{weather.city}'} ve onValueChange prop'ları olsun. onValueChange, yeni şehre göre setWeather çağrısı yapsın. İçine en az iki <Picker.Item> koy (İstanbul ve Ankara). App fonksiyonunu dışa aktar.

Örnek çözümü göster

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;

Kendini test et

Picker içe aktar

import { ____ } from '@react-native-picker/picker';

Cevabı göster

import { Picker } from '@react-native-picker/picker';

Şehir seçimi parçalarını eşle

Picker

Açılır menü bileşeni
selectedValue

Seçili değeri tutar
onValueChange

Seçim değişince çağrılır
Picker.Item

Tek bir seçenek
Picker'da seçim değişince ne çağrılır?
- onPress
- onLayout
- onChangeText
- onValueChange
Cevabı göster

onPress — onValueChange Picker'ın seçim olayıdır.

Sıradaki ders: Birleştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler