onRegionChange
- React Native kursu
- İleri seviye
- Ders 28/83
- 5 dk
onRegionChange ile harita kaydırma öğrenirsin.
onRegionChange
Kullanıcı haritayı kaydırdığında veya yakınlaştırdığında bölge değişir. MapView'in onRegionChange prop'u her bölge değişiminde çağrılan bir işlev alır. Bu işlev, yeni bölgeyi parametre olarak alır; bölge bir nesnedir ve latitude, longitude, latitudeDelta, longitudeDelta alanları taşır.
Örnek: <MapView onRegionChange={(region) => console.log(region)} />. Bu, her kaydırmada yeni bölgeyi konsola yazar. Bölgeyi state'e yazıp başka amaçlarla kullanabilirsin; örneğin kullanıcı hangi bölgedeyse oradaki işletmeleri yükleyebilirsin. onRegionChangeComplete ise kaydırma durunca bir kez çağrılır; bu, gereksiz çağrıları azaltır.
Bölge state'i
Bölgeyi bir state'te tutarsın: const [region, setRegion] = React.useState(null). onRegionChange işlevi içinde setRegion(newRegion) ile güncellersin. State güncellenince bileşen yeniden render edilir; bu sırada bölgeyi kullanabilirsin.
Örneğin, ekranın üstünde bir metin göstermek istersen: <Text>Enlem: { region.latitude.toFixed(4) }</Text>. Bu, her kaydırmada enlem değerini günceller. onRegionChange çok sık çağrıldığından, ağır işlemleri onRegionChangeComplete'e bırakmak daha iyi olabilir. Bu, kullanıcı kaydırmayı bitirince bir kez çağrılır; performansı korur.
Uygulama Bölge değişimini konsola yaz
Boş App bileşenini tamamla. <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} onRegionChange={(region) => console.log(region)} /> döndür.
Başlangıç kodu
import { MapView } from 'react-native-maps';
export default function App() {
// bölge değişimini konsola yaz
return null;
}Örnek çözüm
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
onRegionChange={(region) => console.log(region)}
/>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İşlev parametresini yaz
onRegionChange={(____) => console.log(region)}onRegionChange={(region) => console.log(region)}Açıklama: region parametresi yeni bölgeyi taşır.
2 Prop'u amacına eşle
| Kavram | Anlamı |
|---|---|
onRegionChange |
Her değişimde çağrılır |
onRegionChangeComplete |
Kaydırma bitince |
region |
Bölge nesnesi |
setRegion |
Bölgeyi günceller |
3 onRegionChange ne zaman çağrılır?
<MapView onRegionChange={(region) => { ... }} />- Yalnızca uygulama açılırken
- Yalnızca imlece dokununca
- Yalnızca izin verilince
- Her bölge değişiminde Doğru cevap
Açıklama: onRegionChange her bölge değişiminde çağrılır.