Ocak 26, 2020
react-native

React Native – Temel Harita Gösterimi

Şu ana kadar genellikle web tabanlı harita geliştirme platformları hakkında yazdım, fakat en az web de kullanıldığı kadar mobil tarafta da sıklıkla harita bileşenleri kullanılıyor. Dolayısıyla bu kez React Native harita tabanlı uygulama geliştirmeye temel olması açısından, basit bir şekilde harita nasıl gösterilir, beraber bakalım.

Ben bu örneği Expo platformu üzerinde geliştireceğim, kurulum gerektirmeden doğrudan kod yazmaya başlayabildiğim için ufak denemeler yapmam gerektiğinde burayı tercih ediyorum. Platforma giriş yaptığında default olarak gelen proje içinde düzenlemeler yaparak ilerleyeceğim.

Öncelikle harita kütüphanemizi import edelim.

import MapView from 'react-native-maps';

Ana render kısmını da aşağıdaki gibi düzenleyelim, burada MapView bileşenini çağırarak, merkez koordinatlarını giriyoruz.

 render() {
    return (
      <View style={styles.container}>
        <MapView
          initialRegion={{
            latitude: 39.918163,
            longitude: 32.783203,
            latitudeDelta: 0.0817,
            longitudeDelta: 0.0312,
          }}
          style={styles.map}
        />
      </View>
    );
  }

Son olarak stil tarafını da aşağıdaki gibi düzenleyerek, telefon ekranımızın tamamını kaplayan bir harita uygulaması tasarlamış olduk.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  map: {
    flex: 3
  }
});

Buradan harita bileşeninin yetenekleri ile ilgili detaylı özelliklere ulaşabilirsiniz. Mobil uygulamanızda marker ekleme, çizgi ve poligon çizme gibi fonksiyonlara ihtiyacınız var ise bileşen size bu özellikleri sunmaktadır.

Bu uygulamayı temel alıp, harita tabanlı mobil uygulama geliştirmeye devam edeceğiz, takipte kalın!

Ömür Bilgili

Kıdemli Bilgisayar Mühendisi - GIS Geliştirici

View all posts by Ömür Bilgili →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir