\nReact Native uygulamalar\u0131n\u0131z i\u00e7in s\u00fcr\u00fckle b\u0131rak i\u015faret\u00e7ili, adres arama \u00f6zellikli ve kullan\u0131c\u0131 dostu bir konum se\u00e7ici olu\u015fturmay\u0131 \u00f6\u011frenin. Ad\u0131m ad\u0131m rehberimizle harita entegrasyonundan adres sorgulamaya kadar her \u015feyi ke\u015ffederek, projelerinize interaktif harita yetenekleri kazand\u0131r\u0131n.\n<\/p>\n
\nG\u00fcn\u00fcm\u00fcz mobil uygulamalar\u0131nda kullan\u0131c\u0131lar\u0131n konumlar\u0131n\u0131 do\u011fru ve h\u0131zl\u0131 bir \u015fekilde belirlemesi, sundu\u011fumuz hizmetlerin kalitesi i\u00e7in kritik bir fakt\u00f6rd\u00fcr. Yemek sipari\u015fi, ara\u00e7 \u00e7a\u011f\u0131rma, hizmet rezervasyonu veya sosyal medya payla\u015f\u0131mlar\u0131 gibi bir\u00e7ok senaryoda, kullan\u0131c\u0131lar\u0131n tam olarak nerede olduklar\u0131n\u0131 veya bir hizmetin nerede sa\u011flanaca\u011f\u0131n\u0131 belirtmeleri gerekir. Manuel adres giri\u015fi s\u0131k\u0131c\u0131 ve hataya a\u00e7\u0131k olabilirken, interaktif bir konum se\u00e7ici bu s\u00fcreci hem h\u0131zland\u0131r\u0131r hem de kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Peki, React Native gibi pop\u00fcler bir \u00e7er\u00e7evede, bu t\u00fcr bir konumsal yetene\u011fi nas\u0131l sorunsuz bir \u015fekilde entegre edebiliriz? Bu makalede, \nBu t\u00fcr bir konum se\u00e7ici, sadece kullan\u0131c\u0131n\u0131n mevcut konumunu almakla kalmaz, ayn\u0131 zamanda harita \u00fczerinde g\u00f6rsel bir referans sunarak belirli bir noktay\u0131 i\u015faretlemesine olanak tan\u0131r. Kullan\u0131c\u0131lar haritay\u0131 kayd\u0131rabilir, yak\u0131nla\u015ft\u0131rabilir ve i\u015faret\u00e7iyi istedikleri yere s\u00fcr\u00fckleyebilirler. \u0130\u015faret\u00e7i hareket ettik\u00e7e, arka planda \u00e7al\u0131\u015fan adres arama (geocoding) mekanizmas\u0131 sayesinde se\u00e7ilen noktan\u0131n tam adresi otomatik olarak bulunur ve g\u00f6r\u00fcnt\u00fclenir. Bu, \u00f6zellikle hassas konumland\u0131rman\u0131n \u00f6nemli oldu\u011fu lojistik, e-ticaret ve teslimat uygulamalar\u0131 i\u00e7in vazge\u00e7ilmez bir \u00f6zelliktir. Temel olarak, bu i\u015flevsellik iki ana bile\u015fenin birle\u015fimiyle sa\u011flan\u0131r: harita \u00fczerinde interaktif bir i\u015faret\u00e7i ve bu i\u015faret\u00e7inin koordinatlar\u0131n\u0131 ger\u00e7ek adreslere \u00e7eviren bir geocoding servisi.\n<\/p>\n \nProjelerimizde bu t\u00fcr bir \u00f6zelli\u011fi kullanmak, hem geli\u015ftirme verimlili\u011fini art\u0131r\u0131r hem de son kullan\u0131c\u0131 memnuniyetini maksimize eder. \u00d6rne\u011fin, bir kargo teslimat uygulamas\u0131nda, kullan\u0131c\u0131 teslimat adresini harita \u00fczerinden se\u00e7erek olas\u0131 yanl\u0131\u015f anla\u015f\u0131lmalar\u0131 \u00f6nleyebilir. Bir emlak uygulamas\u0131nda, potansiyel al\u0131c\u0131lar ilgi duyduklar\u0131 b\u00f6lgeyi tam olarak i\u015faretleyebilirler. Bu sayede, hatal\u0131 adres giri\u015finden kaynaklanan iade oranlar\u0131 d\u00fc\u015fer, teslimat s\u00fcreleri k\u0131sal\u0131r ve genel operasyonel maliyetler azal\u0131r. Dolay\u0131s\u0131yla, konum se\u00e7ici, modern mobil uygulama geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015ftir ve React Native, bu yetene\u011fi h\u0131zl\u0131 ve etkili bir \u015fekilde uygulamam\u0131za olanak tan\u0131yan g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. \u015eimdi gelin, bu etkileyici \u00f6zelli\u011fi ad\u0131m ad\u0131m nas\u0131l in\u015fa edece\u011fimize yak\u0131ndan bakal\u0131m.\n<\/p>\n \nReact Native uygulaman\u0131za harita \u00f6zelli\u011fi eklemenin ilk ad\u0131m\u0131, gerekli k\u00fct\u00fcphaneleri kurmak ve projenizi temel harita g\u00f6sterimi i\u00e7in yap\u0131land\u0131rmakt\u0131r. Bu b\u00f6l\u00fcmde, yeni bir React Native projesi olu\u015fturacak, \nYeni bir React Native projesi olu\u015fturmakla ba\u015flayal\u0131m:\n<\/p>\n <\/code><\/p>\n \nProjemizi olu\u015fturduktan sonra, harita i\u015flevselli\u011fi i\u00e7in temel k\u00fct\u00fcphane olan <\/code><\/p>\n \nKurulum tamamland\u0131ktan sonra, e\u011fer manuel linkleme gerektiren eski bir React Native s\u00fcr\u00fcm\u00fc kullan\u0131yorsan\u0131z (0.60 ve sonras\u0131 i\u00e7in genellikle otomatik), a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:\n<\/p>\n <\/code><\/p>\n \nArd\u0131ndan, Android ve iOS i\u00e7in API anahtarlar\u0131n\u0131z\u0131 yap\u0131land\u0131rmal\u0131s\u0131n\u0131z. Google Cloud Console \u00fczerinden bir API anahtar\u0131 edinmeniz gerekecektir. Bu anahtar\u0131n Google Haritalar SDK'lar\u0131 (Android i\u00e7in Maps SDK for Android, iOS i\u00e7in Maps SDK for iOS) ve Geocoding API i\u00e7in etkinle\u015ftirildi\u011finden emin olun.\n<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ul>\n \nT\u00fcm bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra, <\/code><\/p>\n \nBu kod blo\u011fu, ekran\u0131 kaplayan temel bir harita bile\u015feni olu\u015fturur ve varsay\u0131lan olarak \u0130stanbul'u merkez al\u0131r. \nTemel harita kurulumumuzu tamamlad\u0131ktan sonra, bir konum se\u00e7icinin anahtar \u00f6zelliklerinden biri olan s\u00fcr\u00fckle b\u0131rak i\u015faret\u00e7iyi (draggable marker) uygulamam\u0131za entegre etme zaman\u0131 geldi. Bu \u00f6zellik, kullan\u0131c\u0131lar\u0131n parmaklar\u0131n\u0131 kullanarak harita \u00fczerindeki bir i\u015faret\u00e7iyi istedikleri herhangi bir konuma ta\u015f\u0131mas\u0131na olanak tan\u0131r. Bu sayede, do\u011fru ve hassas bir konum se\u00e7imi g\u00f6rsel ve interaktif bir \u015fekilde yap\u0131labilir. React Native Maps k\u00fct\u00fcphanesi, \n\u00d6ncelikle, haritam\u0131za bir <\/code><\/p>\n \nBu kod blo\u011funda yap\u0131lan de\u011fi\u015fiklikleri inceleyelim:\n<\/p>\n \nArt\u0131k uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, haritan\u0131n ortas\u0131nda bir i\u015faret\u00e7i g\u00f6receksiniz. Bu i\u015faret\u00e7iye bas\u0131l\u0131 tutarak parma\u011f\u0131n\u0131z\u0131 harita \u00fczerinde hareket ettirdi\u011finizde, i\u015faret\u00e7i de sizinle birlikte s\u00fcr\u00fcklenecektir. Parma\u011f\u0131n\u0131z\u0131 kald\u0131rd\u0131\u011f\u0131n\u0131zda, \nKullan\u0131c\u0131lar i\u015faret\u00e7iyi s\u00fcr\u00fckleyip b\u0131rakt\u0131\u011f\u0131nda, elimizde sadece enlem ve boylam koordinatlar\u0131 bulunur. Ancak son kullan\u0131c\u0131lar i\u00e7in bu koordinatlar pek bir \u015fey ifade etmez. Bu noktada, \"Geocoding\" ve \"Reverse Geocoding\" kavramlar\u0131 devreye girer. Geocoding, okunabilir adres metinlerini (\u00f6rne\u011fin, \"\u0130stanbul, T\u00fcrkiye\") co\u011frafi koordinatlara (enlem ve boylam) d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemidir. Reverse Geocoding ise bunun tam tersidir: co\u011frafi koordinatlar\u0131 okunabilir adreslere \u00e7evirir. Konum se\u00e7icimizde, kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi koordinatlar\u0131 bir adrese \u00e7evirmek i\u00e7in Reverse Geocoding'i kullanaca\u011f\u0131z.\n<\/p>\n \nBu i\u015flemi ger\u00e7ekle\u015ftirmek i\u00e7in \u00e7e\u015fitli servisler ve k\u00fct\u00fcphaneler mevcuttur. Google Geocoding API, OpenCage Data API veya Nominatim (OpenStreetMap tabanl\u0131) pop\u00fcler se\u00e7eneklerdir. React Native ekosisteminde, \n\u00d6ncelikle, <\/code><\/p>\n \nKurulumdan sonra, k\u00fct\u00fcphaneyi kullanmaya ba\u015flamadan \u00f6nce Google Geocoding API anahtar\u0131n\u0131z\u0131 yap\u0131land\u0131rman\u0131z gerekir. Bu anahtar, Google Haritalar API anahtar\u0131n\u0131zla ayn\u0131 olabilir, ancak Geocoding API hizmetinin de etkin oldu\u011fundan emin olun.\n<\/p>\n <\/code><\/p>\n \n\u015eimdi, <\/code><\/p>\n \nBu yeni kod blo\u011funda \u015funlar\u0131 yapt\u0131k:\n<\/p>\n \nB\u00f6ylece, art\u0131k harita \u00fczerinde bir i\u015faret\u00e7iyi s\u00fcr\u00fckledi\u011finizde, uygulaman\u0131z dinamik olarak yeni konumun adresini alacak ve bunu ekranda g\u00f6sterecektir. Bu, kullan\u0131c\u0131lar\u0131n se\u00e7tikleri konumdan emin olmalar\u0131n\u0131 sa\u011flayan \u00e7ok daha interaktif ve bilgilendirici bir deneyim sunar. Bir sonraki b\u00f6l\u00fcmde, bu konum se\u00e7icinin kullan\u0131c\u0131 deneyimini daha da zenginle\u015ftirecek arama \u00e7ubu\u011fu ve performans optimizasyonlar\u0131n\u0131 ele alaca\u011f\u0131z.\n<\/p>\n \nGeli\u015ftirdi\u011fimiz konum se\u00e7ici, s\u00fcr\u00fckle b\u0131rak i\u015faret\u00e7i ve adres lookup \u00f6zellikleri sayesinde olduk\u00e7a i\u015flevsel hale geldi. Ancak kullan\u0131c\u0131 deneyimini daha da geli\u015ftirmek i\u00e7in birka\u00e7 \u00f6nemli ad\u0131m daha atabiliriz. Bunlardan biri, kullan\u0131c\u0131lar\u0131n adresleri metin olarak arayabilmelerini sa\u011flayan bir arama \u00e7ubu\u011fu eklemektir. Di\u011feri ise, uygulaman\u0131n performans\u0131n\u0131 art\u0131racak optimizasyonlar yapmakt\u0131r. Bu b\u00f6l\u00fcm, hem ileri Geocoding i\u015flevselli\u011fini hem de genel uygulama performans\u0131n\u0131 ele alacakt\u0131r.\n<\/p>\n \nBir arama \u00e7ubu\u011fu, kullan\u0131c\u0131lar\u0131n do\u011frudan adres metni girerek harita \u00fczerinde belirli bir konuma gitmelerine olanak tan\u0131r. Bu, \u00f6zellikle geni\u015f alanlarda veya belirli bir adresin aranmas\u0131 gerekti\u011finde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Bu i\u015flevselli\u011fi sa\u011flamak i\u00e7in \"Forward Geocoding\" (adres metnini koordinatlara \u00e7evirme) kullanaca\u011f\u0131z.\n<\/p>\n <\/code><\/p>\n \nUygulamam\u0131z\u0131n hem i\u015flevselli\u011fini art\u0131rmak hem de performans\u0131n\u0131 optimize etmek i\u00e7in birka\u00e7 ileri d\u00fczey ipucu ve en iyi uygulama mevcut:\n<\/p>\nreact-native-maps<\/code> k\u00fct\u00fcphanesini kullanarak s\u00fcr\u00fckle b\u0131rak (draggable) bir i\u015faret\u00e7i ile adres arama \u00f6zelliklerini birle\u015ftiren geli\u015fmi\u015f bir konum se\u00e7ici olu\u015fturma s\u00fcrecini detayland\u0131raca\u011f\u0131z.\n<\/p>\nProje Kurulumu ve Temel Harita Entegrasyonu Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
react-native-maps<\/code> k\u00fct\u00fcphanesini kuracak ve Google Haritalar API anahtar\u0131n\u0131z\u0131 (veya tercih etti\u011finiz harita sa\u011flay\u0131c\u0131s\u0131n\u0131n anahtar\u0131n\u0131) entegre edece\u011fiz. Bu ad\u0131mlar, uygulaman\u0131z\u0131n harita bile\u015fenini d\u00fczg\u00fcn bir \u015fekilde g\u00f6r\u00fcnt\u00fcleyebilmesi i\u00e7in hayati \u00f6neme sahiptir. \u0130lk olarak, e\u011fer kurulu de\u011filse, Node.js ve React Native CLI’n\u0131n bilgisayar\u0131n\u0131zda mevcut oldu\u011fundan emin olun.\n<\/p>\n\nnpx react-native init LocationPickerApp\ncd LocationPickerApp\n<\/pre>\nreact-native-maps<\/code>'i kurmam\u0131z gerekiyor. Bu k\u00fct\u00fcphane, hem iOS'ta Apple Haritalar'\u0131 hem de Android'de Google Haritalar'\u0131 destekleyerek platformlar aras\u0131 tutarl\u0131 bir harita deneyimi sunar.\n<\/p>\n\nnpm install react-native-maps --save\n# veya\nyarn add react-native-maps\n<\/pre>\n\nnpx react-native link react-native-maps\n<\/pre>\n\n
android\/app\/src\/main\/AndroidManifest.xml<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve YOUR_API_KEY<\/code> k\u0131sm\u0131n\u0131 kendi anahtar\u0131n\u0131zla de\u011fi\u015ftirin):<\/p>\n\n ios\/LocationPickerApp\/AppDelegate.mm<\/code> (veya AppDelegate.m<\/code>) dosyas\u0131n\u0131 a\u00e7\u0131n. En \u00fcste #import didFinishLaunchingWithOptions<\/code> metoduna [GMSServices provideAPIKey:@\"YOUR_API_KEY\"];<\/code> sat\u0131r\u0131n\u0131 ekleyin. Ayr\u0131ca, iOS ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00fcklemek i\u00e7in ios<\/code> klas\u00f6r\u00fcne gidip pod install<\/code> \u00e7al\u0131\u015ft\u0131rman\u0131z gerekebilir.<\/p>\n\n \/\/ AppDelegate.mm (veya .m)\n #import App.js<\/code> dosyan\u0131z\u0131 g\u00fcncelleyerek basit bir harita g\u00f6r\u00fcnt\u00fcleyebiliriz. \u0130lk ba\u015flang\u0131\u00e7 konumu olarak \u0130stanbul'u (\u00f6rne\u011fin) belirleyelim.\n<\/p>\n\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport MapView from 'react-native-maps';\n\nconst App = () => {\n const initialRegion = {\n latitude: 41.0082,\n longitude: 28.9784,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n };\n\n return (\n showsUserLocation={true}<\/code> prop'u, kullan\u0131c\u0131n\u0131n mevcut konumunu harita \u00fczerinde g\u00f6stermek i\u00e7in kullan\u0131l\u0131r (uygulama izinleri verilmi\u015fse). Art\u0131k temel haritam\u0131z haz\u0131r ve sonraki ad\u0131mlarda bu harita \u00fczerine interaktif bir i\u015faret\u00e7i ekleyece\u011fiz.\n<\/p>\nS\u00fcr\u00fckle B\u0131rak \u0130\u015faret\u00e7i (Draggable Marker) ile Konum Se\u00e7imi Nas\u0131l Ger\u00e7ekle\u015fir?<\/h2>\n
Marker<\/code> bile\u015feninin draggable<\/code> prop'u ve onDragEnd<\/code> olay\u0131 ile bu i\u015flevselli\u011fi kolayca sunar.\n<\/p>\nMarker<\/code> bile\u015feni ekleyece\u011fiz. Bu i\u015faret\u00e7i, ba\u015flang\u0131\u00e7ta haritan\u0131n merkezinde konumlanacak ve kullan\u0131c\u0131 taraf\u0131ndan s\u00fcr\u00fcklenebilir olacakt\u0131r. \u0130\u015faret\u00e7inin konumunu dinamik olarak y\u00f6netebilmek i\u00e7in React'in useState<\/code> hook'unu kullanaca\u011f\u0131z. Bu state, i\u015faret\u00e7inin enlem ve boylam koordinatlar\u0131n\u0131 saklayacak.\n<\/p>\n\nimport React, { useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport MapView, { Marker } from 'react-native-maps';\n\nconst App = () => {\n const initialRegion = {\n latitude: 41.0082,\n longitude: 28.9784,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n };\n\n const [markerCoordinate, setMarkerCoordinate] = useState({\n latitude: initialRegion.latitude,\n longitude: initialRegion.longitude,\n });\n\n const onMarkerDragEnd = (e) => {\n setMarkerCoordinate(e.nativeEvent.coordinate);\n console.log('\u0130\u015faret\u00e7i yeni konumu:', e.nativeEvent.coordinate);\n \/\/ Burada yeni koordinatlarla adres aramas\u0131 yap\u0131labilir.\n };\n\n return (\n \n
useState<\/code> Kullan\u0131m\u0131:<\/strong> markerCoordinate<\/code> ad\u0131nda bir state tan\u0131mlad\u0131k. Bu state, i\u015faret\u00e7inin mevcut enlem ve boylam de\u011ferlerini tutar. Ba\u015flang\u0131\u00e7ta, haritan\u0131n initialRegion<\/code> ile ayn\u0131 koordinatlara ayarlan\u0131r.\n <\/li>\nMarker<\/code> Bile\u015feni:<\/strong> MapView<\/code> i\u00e7ine bir Marker<\/code> bile\u015feni ekledik.<\/p>\n\n
coordinate={markerCoordinate}<\/code>: \u0130\u015faret\u00e7inin konumunu markerCoordinate<\/code> state'inden al\u0131r.\n <\/li>\ndraggable<\/code>: Bu prop, i\u015faret\u00e7inin kullan\u0131c\u0131 taraf\u0131ndan s\u00fcr\u00fcklenebilir olmas\u0131n\u0131 sa\u011flar. Bu olmazsa, i\u015faret\u00e7i sabit kal\u0131r.\n <\/li>\nonDragEnd={onMarkerDragEnd}<\/code>: Kullan\u0131c\u0131 i\u015faret\u00e7iyi s\u00fcr\u00fcklemeyi bitirdi\u011finde (parma\u011f\u0131n\u0131 ekrandan \u00e7ekti\u011finde) tetiklenecek olan bir geri arama fonksiyonudur. Bu fonksiyon, olay\u0131n (e<\/code>) nativeEvent.coordinate<\/code> \u00f6zelli\u011finden yeni koordinatlar\u0131 alarak markerCoordinate<\/code> state'ini g\u00fcnceller.\n <\/li>\ntitle<\/code> ve description<\/code>: \u0130\u015faret\u00e7iye dokunuldu\u011funda g\u00f6r\u00fcnen bilgi baloncu\u011funun metnini belirler.\n <\/li>\n<\/ul>\n<\/li>\n<\/ul>\nonDragEnd<\/code> fonksiyonu tetiklenecek ve konsolda i\u015faret\u00e7inin yeni koordinatlar\u0131n\u0131 g\u00f6receksiniz. Bu, konum se\u00e7icimizin temel interaktif \u00f6zelli\u011fini olu\u015fturur. Ancak bu koordinatlar\u0131n bir anlam ifade etmesi i\u00e7in, bunlar\u0131 okunabilir bir adrese \u00e7evirmemiz gerekiyor. \u0130\u015fte burada Geocoding devreye giriyor. Bir sonraki ad\u0131mda, se\u00e7ilen koordinatlar\u0131 bir adrese \u00e7evirme mekanizmas\u0131n\u0131 inceleyece\u011fiz.\n<\/p>\nDinamik Adres Arama (Geocoding) ve G\u00f6sterimi Nas\u0131l Entegre Edilir?<\/h2>\n
react-native-geocoding<\/code> gibi k\u00fct\u00fcphaneler bu API'lerle etkile\u015fimi basitle\u015ftirir. Bu k\u00fct\u00fcphane, arka planda se\u00e7ti\u011finiz bir geocoding servisini (varsay\u0131lan olarak Google Haritalar) kullanarak koordinatlar\u0131 adrese \u00e7evirme i\u015flemini kolayla\u015ft\u0131r\u0131r.\n<\/p>\nreact-native-geocoding<\/code> k\u00fct\u00fcphanesini projemize kural\u0131m:\n<\/p>\n\nnpm install react-native-geocoding --save\n# veya\nyarn add react-native-geocoding\n<\/pre>\n\nimport Geocoding from 'react-native-geocoding';\n\n\/\/ ... di\u011fer kodlar\n\n\/\/ Uygulaman\u0131z\u0131n ba\u015flang\u0131c\u0131nda veya harita bile\u015feni monte edildi\u011finde\n\/\/ API anahtar\u0131n\u0131z\u0131 ayarlay\u0131n\nGeocoding.init(\"YOUR_GOOGLE_GEOCODING_API_KEY\");\n<\/pre>\nonMarkerDragEnd<\/code> fonksiyonumuzu g\u00fcncelleyerek, i\u015faret\u00e7i s\u00fcr\u00fcklendi\u011finde yeni koordinatlar\u0131 bir adrese \u00e7evirelim ve bu adresi kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6sterelim. Adresi tutmak i\u00e7in yeni bir state (selectedAddress<\/code>) tan\u0131mlayaca\u011f\u0131z.\n<\/p>\n\nimport React, { useState, useEffect } from 'react';\nimport { StyleSheet, View, Text, ActivityIndicator } from 'react-native';\nimport MapView, { Marker } from 'react-native-maps';\nimport Geocoding from 'react-native-geocoding';\n\n\/\/ Google Geocoding API anahtar\u0131n\u0131z\u0131 buraya girin\n\/\/ Not: Ger\u00e7ek uygulamalarda bu t\u00fcr hassas bilgileri env dosyalar\u0131nda saklay\u0131n.\nGeocoding.init(\"YOUR_GOOGLE_GEOCODING_API_KEY\");\n\nconst App = () => {\n const initialRegion = {\n latitude: 41.0082,\n longitude: 28.9784,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n };\n\n const [markerCoordinate, setMarkerCoordinate] = useState({\n latitude: initialRegion.latitude,\n longitude: initialRegion.longitude,\n });\n const [selectedAddress, setSelectedAddress] = useState(\"Konum bekleniyor...\");\n const [isLoadingAddress, setIsLoadingAddress] = useState(false);\n\n const getAddressFromCoordinates = async (lat, lng) => {\n setIsLoadingAddress(true);\n try {\n const json = await Geocoding.from(lat, lng);\n const addressComponent = json.results[0].formatted_address;\n setSelectedAddress(addressComponent);\n } catch (error) {\n console.error(error);\n setSelectedAddress(\"Adres bulunamad\u0131.\");\n } finally {\n setIsLoadingAddress(false);\n }\n };\n\n useEffect(() => {\n \/\/ Uygulama ilk a\u00e7\u0131ld\u0131\u011f\u0131nda ba\u015flang\u0131\u00e7 konumunun adresini al\n getAddressFromCoordinates(markerCoordinate.latitude, markerCoordinate.longitude);\n }, []); \/\/ Sadece bir kere \u00e7al\u0131\u015f\u0131r\n\n const onMarkerDragEnd = async (e) => {\n const newCoordinate = e.nativeEvent.coordinate;\n setMarkerCoordinate(newCoordinate);\n await getAddressFromCoordinates(newCoordinate.latitude, newCoordinate.longitude);\n };\n\n return (\n \n
selectedAddress<\/code> State'i:<\/strong> Kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi adresin metinsel ifadesini tutmak i\u00e7in yeni bir state tan\u0131mlad\u0131k.\n <\/li>\nisLoadingAddress<\/code> State'i:<\/strong> Adres arama i\u015flemi devam ederken bir y\u00fckleme g\u00f6stergesi (ActivityIndicator<\/code>) g\u00f6stermek i\u00e7in bir state ekledik. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir.\n <\/li>\ngetAddressFromCoordinates<\/code> Fonksiyonu:<\/strong> Verilen enlem ve boylam koordinatlar\u0131 i\u00e7in Geocoding servisini kullanarak adres bilgisini \u00e7eken bir async<\/code> fonksiyon olu\u015fturduk. Bu fonksiyon, API'den gelen ilk sonucun formatted_address<\/code> alan\u0131n\u0131 alarak selectedAddress<\/code> state'ini g\u00fcnceller. Hata durumlar\u0131n\u0131 da y\u00f6netir.\n <\/li>\nuseEffect<\/code> Kancas\u0131:<\/strong> Uygulama ilk y\u00fcklendi\u011finde (veya bile\u015fen monte edildi\u011finde), ba\u015flang\u0131\u00e7taki i\u015faret\u00e7i koordinatlar\u0131 i\u00e7in bir adres sorgusu yapmas\u0131n\u0131 sa\u011flad\u0131k. Bu sayede harita a\u00e7\u0131l\u0131r a\u00e7\u0131lmaz varsay\u0131lan konumun adresi g\u00f6r\u00fcn\u00fcr olur.\n <\/li>\nonMarkerDragEnd<\/code> G\u00fcncellemesi:<\/strong> \u0130\u015faret\u00e7i s\u00fcr\u00fcklendi\u011finde, \u00f6nce yeni koordinatlar\u0131 g\u00fcnceller ve ard\u0131ndan getAddressFromCoordinates<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak bu yeni konum i\u00e7in adresi al\u0131r\u0131z.\n <\/li>\naddressContainer<\/code> ad\u0131nda yeni bir View<\/code> bile\u015feni ekledik. Bu bile\u015fen, isLoadingAddress<\/code> durumuna g\u00f6re bir y\u00fckleme g\u00f6stergesi veya selectedAddress<\/code> metnini g\u00f6sterir.\n <\/li>\n<\/ul>\nKullan\u0131c\u0131 Deneyimini \u0130yile\u015ftirme: Arama \u00c7ubu\u011fu ve Performans Optimizasyonlar\u0131<\/h2>\n
Adres Arama \u00c7ubu\u011fu Nas\u0131l Entegre Edilir?<\/h3>\n
\nimport React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { StyleSheet, View, Text, ActivityIndicator, TextInput, TouchableOpacity, Keyboard } from 'react-native';\nimport MapView, { Marker } from 'react-native-maps';\nimport Geocoding from 'react-native-geocoding';\n\nGeocoding.init(\"YOUR_GOOGLE_GEOCODING_API_KEY\");\n\nconst App = () => {\n const initialRegion = { \/* ... *\/ }; \/\/ Yukar\u0131daki initialRegion ile ayn\u0131\n const mapRef = useRef(null); \/\/ MapView'e referans almak i\u00e7in\n\n const [markerCoordinate, setMarkerCoordinate] = useState({ \/* ... *\/ }); \/\/ Yukar\u0131daki markerCoordinate ile ayn\u0131\n const [selectedAddress, setSelectedAddress] = useState(\"Konum bekleniyor...\");\n const [isLoadingAddress, setIsLoadingAddress] = useState(false);\n const [searchText, setSearchText] = useState(\"\");\n const [isSearching, setIsSearching] = useState(false);\n\n const getAddressFromCoordinates = useCallback(async (lat, lng) => { \/* ... *\/ }, []); \/\/ Yukar\u0131daki getAddressFromCoordinates ile ayn\u0131, useCallback ekleyin\n\n const getCoordinatesFromAddress = useCallback(async (address) => {\n if (!address) return;\n setIsSearching(true);\n try {\n const json = await Geocoding.from(address);\n if (json.results.length > 0) {\n const location = json.results[0].geometry.location;\n const newCoordinate = {\n latitude: location.lat,\n longitude: location.lng,\n };\n setMarkerCoordinate(newCoordinate);\n setSelectedAddress(json.results[0].formatted_address);\n \/\/ Haritay\u0131 yeni konuma odakla\n mapRef.current.animateToRegion({\n ...newCoordinate,\n latitudeDelta: 0.02,\n longitudeDelta: 0.02,\n }, 1000);\n } else {\n setSelectedAddress(\"Adres bulunamad\u0131.\");\n }\n } catch (error) {\n console.error(\"Adres arama hatas\u0131:\", error);\n setSelectedAddress(\"Adres arama hatas\u0131 olu\u015ftu.\");\n } finally {\n setIsSearching(false);\n Keyboard.dismiss(); \/\/ Klavyeyi kapat\n }\n }, []);\n\n useEffect(() => { \/* ... *\/ }, []); \/\/ Yukar\u0131daki useEffect ile ayn\u0131\n\n const onMarkerDragEnd = async (e) => { \/* ... *\/ }; \/\/ Yukar\u0131daki onMarkerDragEnd ile ayn\u0131\n\n \/\/ Arama metni de\u011fi\u015fti\u011finde otomatik arama yapmak i\u00e7in debouncing kullan\u0131labilir\n useEffect(() => {\n const handler = setTimeout(() => {\n if (searchText.length > 2) { \/\/ Minimum 3 karakterde ara\n getCoordinatesFromAddress(searchText);\n }\n }, 1000); \/\/ 1 saniye bekleme s\u00fcresi\n return () => {\n clearTimeout(handler);\n };\n }, [searchText, getCoordinatesFromAddress]);\n\n return (\n \u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar Nelerdir?<\/h3>\n
\n
useEffect<\/code> i\u00e7indeki setTimeout<\/code> \u00f6rne\u011finde oldu\u011fu gibi, istekleri belirli bir gecikmeyle (debouncing) veya belirli aral\u0131klarla (throttling) tetiklemek API \u00e7a\u011fr\u0131 say\u0131s\u0131n\u0131 azaltarak performans\u0131 art\u0131r\u0131r ve kota a\u015f\u0131m\u0131n\u0131 engeller.\n <\/li>\nonRegionChangeComplete<\/code> Kullan\u0131m\u0131:<\/strong> Kullan\u0131c\u0131 haritay\u0131 kayd\u0131r\u0131p yak\u0131nla\u015ft\u0131rmay\u0131 bitirdi\u011finde, MapView<\/code>'in onRegionChangeComplete<\/code> olay\u0131n\u0131 dinleyerek haritan\u0131n yeni merkez koordinatlar\u0131n\u0131 alabilir ve bu noktadaki adresi g\u00fcncelleyebilirsiniz. Bu yakla\u015f\u0131m, s\u00fcr\u00fckle b\u0131rak i\u015faret\u00e7isi yerine haritan\u0131n tam ortas\u0131ndaki konumu referans almak isteyen uygulamalar i\u00e7in idealdir. Yukar\u0131daki kod \u00f6rne\u011finde bu kullan\u0131m\u0131 g\u00f6sterdik ve Marker<\/code>'\u0131n draggable<\/code> \u00f6zelli\u011fini bu senaryoda kald\u0131rabilirsiniz, zira i\u015faret\u00e7i haritan\u0131n merkezinde sabit kalacakt\u0131r.\n <\/li>\nuseMemo<\/code> ve useCallback<\/code>:<\/strong> React performans optimizasyonlar\u0131 i\u00e7in useMemo<\/code> ve useCallback<\/code> hook'lar\u0131n\u0131 kullanarak pahal\u0131 hesaplamalar\u0131 veya fonksiyon tan\u0131mlamalar\u0131n\u0131 \u00f6nbelle\u011fe alabilirsiniz. \u00d6zellikle getAddressFromCoordinates<\/code> ve getCoordinatesFromAddress<\/code> gibi s\u0131k \u00e7a\u011fr\u0131lan fonksiyonlar i\u00e7in bu yararl\u0131 olabilir.\n <\/li>\nActivityIndicator<\/code> kullan\u0131m\u0131, y\u00fckleme s\u00fcre\u00e7lerinde kullan\u0131c\u0131ya geri bildirim sa\u011flaman\u0131n basit bir yoludur.\n <\/li>\nMarker<\/code> bile\u015feni i\u00e7erisine Dimensions<\/code> API's\u0131n\u0131 ve esnek stiller (flexbox) kullan\u0131n. A\u015fa\u011f\u0131daki gibi basit bir media query mant\u0131\u011f\u0131yla web g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tasarlarken, React Native'de benzer bir esnekli\u011fi sa\u011flamak i\u00e7in StyleSheet.create<\/code> i\u00e7inde y\u00fczdelik de\u011ferler veya Dimensions.get('window').width<\/code> gibi de\u011ferler kullanabilirsiniz.<\/p>\n\n \/* Web g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in \u00f6rnek bir media query *\/\n