Özet - Haritalar
- React Native kursu
- İleri seviye
- Ders 30/83
- 5 dk
MapView, Marker ve onRegionChange'i birleştirerek bir harita uygulaması yazarsın.
Özet - Haritalar
Bu grupta react-native-maps paketini kurmayı, MapView ile harita göstermeyi, Marker ile imleç koymayı, onRegionChange ile bölge değişimini izlemeyi ve özel imleç oluşturmayı gördün. Bir harita uygulamasının çekirdeği bu beş parçadan oluşur.
Özette haritayı, imleci ve bölge izlemeyi tek bir uygulamada birleştireceğiz. Bu üç parça birlikte gerçek bir harita ekranı oluşturur. Şimdi bunları birleştirelim.
Uygulama Özet - İstanbul'a imleç koy
Boş App bileşenini tamamla. <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}}> aç. İçine <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="İstanbul" /> ekle. MapView'i kapat.
Başlangıç kodu
import { MapView, Marker } from 'react-native-maps';
export default function App() {
// İstanbul'a imleç koy
return null;
}Örnek çözüm
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
>
<Marker
coordinate={{ latitude: 41.0082, longitude: 28.9784 }}
title="İstanbul"
/>
</MapView>
);Uygulama Özet - Bölge değişimini izle
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.latitude)} /> döndür.
Başlangıç kodu
import { MapView } from 'react-native-maps';
export default function App() {
// bölge değişimini izle ve enlemi 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.latitude)}
/>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 initialRegion prop'unu yaz
<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} /><MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />Açıklama: initialRegion açılış konumunu belirler.
2 Akış parçasını rolüne eşle
| Kavram | Anlamı |
|---|---|
MapView |
Harita görünümü |
Marker |
İmleç koyar |
onRegionChange |
Bölge izler |
initialRegion |
Açılış konumu |