watchPositionAsync
- React Native kursu
- İleri seviye
- Ders 22/83
- 5 dk
watchPositionAsync ile konum takibini öğrenirsin.
watchPositionAsync
Kullanıcı hareket ettikçe konumu sürekli izlemek için Location.watchPositionAsync kullanılır. Bu işlev bir abonelik döndürür; her konum değişiminde bir geri çağırma çağrılır. Bileşen kapanınca abonelik subscription.remove() ile kaldırılır.
İşlev iki parametre alır: bir seçenek nesnesi ve bir geri çağırma. Örnek: const sub = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, (loc) => console.log(loc.coords)). Abonelik bir değişkene atanır; temizlik useEffect'in dönüşünde yapılır. Bu kalıp, harita uygulamalarında kullanıcı imlecini canlı tutar.
useEffect ve temizlik
Sürekli konum izlemeyi useEffect içinde kurarsın. Bu hook, bileşen ekrana geldiğinde bir kez çağrılır. İçinde aboneliği kurar, dışında da bir temizlik işlevi döndürürsün. Temizlik işlevi bileşen kapanınca aboneliği kaldırır; böylece konum güncellemeleri durur.
Örnek kalıp: useEffect(() => {{ (async () => {{ const sub = await Location.watchPositionAsync(...); subscriptionRef.current = sub; }})(); return () => subscriptionRef.current?.remove(); }}, []). Boş bağımlılık dizisi [] hook'un yalnızca bir kez çağrılmasını sağlar. Aboneliği ref'te tutarsın çünkü async işlevin içinde oluşturulur.
Uygulama Sürekli konum izle
Boş useEffect'i tamamla. const sub = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, (loc) => console.log(loc.coords)) çağır. return () => sub.remove() ile temizle. useEffect'in ikinci parametresi [] olsun.
Başlangıç kodu
import React from 'react';
import * as Location from 'expo-location';
export function useWatchLocation() {
React.useEffect(() => {
let sub;
// sürekli konum izle ve temizlik döndür
}, []);
}Örnek çözüm
let sub;
(async () => {
sub = await Location.watchPositionAsync(
{ accuracy: Location.Accuracy.High },
(loc) => console.log(loc.coords)
);
})();
return () => sub && sub.remove();Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Abonelik değişkenini yaz
const ____ = await Location.watchPositionAsync(options, callback);const subscription = await Location.watchPositionAsync(options, callback);Açıklama: subscription değişkeni aboneliği taşır.
2 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
watchPositionAsync |
Sürekli izler |
subscription.remove() |
Aboneliği kaldırır |
useEffect |
Kurulum yeri |
accuracy |
Doğruluk seçeneği |
3 Bileşen kapanınca ne yapılır?
return () => { ??? }- Yeni abonelik aç
- Konum güncellemesini bekle
- Aboneliği remove() ile kaldır Doğru cevap
- Hata fırlat
Açıklama: Bileşen kapanınca abonelik remove() ile kaldırılır.