expo-location - Geolokalizacja

Witaj w Kartograficznej Komnacie! Poznaj lokalizację użytkownika i nawiguj po podwodnym świecie.

Instalacja

npx expo install expo-location

Uprawnienia i aktualna lokalizacja

import * as Location from 'expo-location';

async function getCurrentLocation() {
  // Poproś o uprawnienia
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Brak uprawnień', 'Włącz dostęp do lokalizacji');
    return null;
  }

  // Pobierz aktualną lokalizację
  const location = await Location.getCurrentPositionAsync({
    accuracy: Location.Accuracy.High,
  });

  return {
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  };
}

Śledzenie lokalizacji

function useLocationTracking() {
  const [location, setLocation] = useState<Location.LocationObject | null>(null);

  useEffect(() => {
    let subscription: Location.LocationSubscription;

    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      subscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.BestForNavigation,
          timeInterval: 5000,
          distanceInterval: 10,
        },
        (newLocation) => setLocation(newLocation)
      );
    })();

    return () => subscription?.remove();
  }, []);

  return location;
}

Geokodowanie

// Adres -> Współrzędne
const geocode = async (address: string) => {
  const results = await Location.geocodeAsync(address);
  if (results.length > 0) {
    return { lat: results[0].latitude, lng: results[0].longitude };
  }
  return null;
};

// Współrzędne -> Adres
const reverseGeocode = async (lat: number, lng: number) => {
  const results = await Location.reverseGeocodeAsync({ latitude: lat, longitude: lng });
  if (results.length > 0) {
    const { city, street, streetNumber, country } = results[0];
    return `${street} ${streetNumber}, ${city}, ${country}`;
  }
  return null;
};

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState<Location.LocationObject | null>(null);

  useEffect(() => {
    let subscription: Location.LocationSubscription | undefined;

    (async () => {
      // Poproś o uprawnienia do lokalizacji w foreground
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      // TODO: uruchom Location.watchPositionAsync z konfiguracją:
      //   accuracy: Location.Accuracy.High,
      //   timeInterval: 5000,
      //   distanceInterval: 10
      // a w callbacku zapisz nową lokalizację przez setLocation
      subscription = await Location.watchPositionAsync(
        {
          // TODO: uzupełnij accuracy, timeInterval i distanceInterval
        },
        (newLocation) => {
          // TODO: zaktualizuj stan lokalizacji
        }
      );
    })();

    // Pamiętaj o sprzątaniu subskrypcji
    return () => subscription?.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Navigator Atlantydy</Text>
      <Text style={styles.coords}>
        {location
          ? `${location.coords.latitude.toFixed(4)}, ${location.coords.longitude.toFixed(4)}`
          : 'Namierzanie pozycji...'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 22,
    color: '#fff',
    marginBottom: 12,
  },
  coords: {
    fontSize: 16,
    color: '#aed6f1',
  },
});