React Native
onRegionChange
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.
Örnek çözümü göster
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
onRegionChange={(region) => console.log(region)}
/>
);
Kendini test et
-
İşlev parametresini yaz
onRegionChange={(____) => console.log(region)}
Cevabı göster
onRegionChange={(region) => console.log(region)}
-
Prop'u amacına eşle
- onRegionChange
- Her değişimde çağrılır
- onRegionChangeComplete
- Kaydırma bitince
- region
- Bölge nesnesi
- setRegion
- Bölgeyi günceller
-
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
Cevabı göster
Her bölge değişiminde — onRegionChange her bölge değişiminde çağrılır.
Sıradaki ders: Custom marker
