react-native-maps
- React Native kursu
- İleri seviye
- Ders 25/83
- 5 dk
react-native-maps ile harita göstermeyi öğrenirsin.
react-native-maps paketi
React Native'de harita göstermek için react-native-maps paketini kullanırsın. Bu paket, Google Maps (Android) ve Apple Maps (iOS) altyapısını sarar; her iki platformda da tutarlı bir arayüz sunar. Expo ile kurulum: npx expo install react-native-maps.
Paketten iki ana parça içe aktarılır: MapView (harita görünümü) ve Marker (haritadaki imleç). Yazım: import { MapView, Marker } from 'react-native-maps'. Bu iki bileşen birlikte çalışır; MapView haritayı çizer, Marker ise belirli bir koordinata pin bırakır. Kullanıcı konum izni verince kendi konumunu da haritada gösterebilirsin.
İçe aktarma
react-native-maps paketinden MapView ve Marker süslü parantez ile içe aktarılır. Yazım: import { MapView, Marker } from 'react-native-maps'. Süslü parantez içindeki adlar paketin adlandırılmış dışa aktarımlarıdır.
Bu iki bileşen harita uygulamasının temelidir. MapView harita yüzeyini ekranda gösterir; Marker ise belirli bir koordinata imleç koyar. Bunlara ek olarak Polyline (çizgi), Polygon (alan) gibi bileşenler de vardır; ancak bu derste yalnızca MapView ve Marker odaklanacağız. Paketin tüm bileşenleri React bileşenidir; props ile yapılandırılır.
Uygulama Paketi içe aktar
Boş dosyayı tamamla. react-native-maps paketinden MapView ve Marker içe aktar. export { MapView, Marker } ile dışa aktar.
Başlangıç kodu
// react-native-maps paketinden MapView ve Marker içe aktar
// dışa aktarÖrnek çözüm
import { MapView, Marker } from 'react-native-maps';
export { MapView, Marker };Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 react-native-maps ne sağlar?
- Harita görünümü ve imleç Doğru cevap
- Yalnızca dosya saklama
- Yalnızca ağ isteği
- Yalnızca kamera
Açıklama: Paket harita görünümü ve imleç sağlar.
2 İçe aktarma cümlesini yaz
import { MapView, ____ } from 'react-native-maps';import { MapView, Marker } from 'react-native-maps';Açıklama: Marker harita imlecini temsil eder.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
MapView |
Harita görünümü |
Marker |
Harita imleci |
react-native-maps |
Paket adı |
Polyline |
Çizgi bileşeni |