GPS-locatie lezen met expo-location
Vraag locatietoestemming op de voorgrond aan, haal de huidige coördinaten op met getCurrentPositionAsync en toon de latitude en longitude op het scherm.
GPS-locatie lezen met expo-location is een gratis React Native Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat is expo-location?
expo-location biedt een API om de geografische positie van het apparaat te lezen met behulp van GPS, wifi-triangulatie en gegevens van zendmasten. Het werkt op zowel iOS als Android zonder dat je native code hoeft te schrijven. Je kunt eenmalig een positie bepalen, de locatie volgen terwijl de gebruiker beweegt of een adres omzetten naar coördinaten en andersom.
expo-location installeren
Gebruik de installatieopdracht van Expo om de met de SDK compatibele versie van expo-location te verkrijgen. In beheerde Expo-projecten wordt de native module automatisch gekoppeld. Voor kale React Native-projecten moet je op iOS ook pod install uitvoeren en AndroidManifest.xml bijwerken met de verklaringen voor locatietoestemming.
npx expo install expo-locationToestemming voor locatie op de voorgrond aanvragen
Voor toegang tot de locatie is uitdrukkelijke toestemming van de gebruiker vereist. Roep Location.requestForegroundPermissionsAsync() aan om toestemming te vragen om de locatie te lezen terwijl de app op de voorgrond staat. Controleer het veld status van het geretourneerde object — ga alleen verder als dit gelijk is aan 'granted'. De hookversie Location.useForegroundPermissions() vereenvoudigt dit in functionele componenten.
import * as Location from 'expo-location';
const [permission, requestPermission] = Location.useForegroundPermissions();
if (!permission) return <ActivityIndicator />;
if (!permission.granted) {
return (
<View>
<Text>Location access is needed to show your position.</Text>
<Button title='Allow Location' onPress={requestPermission} />
</View>
);
}Eenmalig de huidige positie ophalen
Location.getCurrentPositionAsync() bepaalt eenmalig de GPS-positie en retourneert een LocationObject met coords.latitude, coords.longitude, coords.accuracy (in meters) en een timestamp. Gebruik dit voor eenmalige opvragingen, zoals 'restaurants in de buurt zoeken', wanneer je geen doorlopende tracking nodig hebt.
const [location, setLocation] = React.useState(null);
async function fetchLocation() {
const loc = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.Balanced,
});
setLocation(loc);
console.log('Lat:', loc.coords.latitude);
console.log('Lng:', loc.coords.longitude);
console.log('Accuracy:', loc.coords.accuracy, 'meters');
}Nauwkeurigheidsniveaus
expo-location biedt verschillende voorinstellingen voor nauwkeurigheid via Location.Accuracy. Gebruik Lowest of Low voor een globale locatie met minimaal batterijverbruik, Balanced voor algemeen gebruik en High of BestForNavigation wanneer je nauwkeurige GPS-coördinaten nodig hebt voor stapsgewijze navigatie. Een hogere nauwkeurigheid verbruikt de batterij sneller, dus kies een niveau dat past bij je toepassing.
// Coarse — fast, low battery, uses Wi-Fi/cell
Location.Accuracy.Lowest // ~3 km
Location.Accuracy.Low // ~1 km
Location.Accuracy.Balanced // ~100 m — good default
// Precise — uses GPS, more battery
Location.Accuracy.High // ~10 m
Location.Accuracy.Highest // ~1 m
Location.Accuracy.BestForNavigation // highest + sensorsDe locatie continu volgen
Location.watchPositionAsync start een abonnement dat een callback aanroept telkens wanneer de positie van het apparaat verandert met een opgegeven afstand of binnen een opgegeven tijdsinterval. Het retourneert een abonnementsobject met een methode remove(). Roep remove() altijd aan in een opruimfunctie van useEffect om het volgen te stoppen wanneer de component wordt ontkoppeld en batterij te besparen.
useEffect(() => {
let subscription: Location.LocationSubscription;
async function startWatching() {
subscription = await Location.watchPositionAsync(
{
accuracy: Location.Accuracy.High,
distanceInterval: 10, // update every 10 meters
timeInterval: 5000, // or every 5 seconds
},
(loc) => setLocation(loc)
);
}
startWatching();
return () => subscription?.remove(); // cleanup on unmount
}, []);Coördinaten op het scherm tonen
Toon de coördinaten in een voor mensen leesbaar formaat zodra je een locatieobject hebt. Rond de breedtegraad en lengtegraad af op 5-6 decimalen voor een betere leesbaarheid — dat komt overeen met een nauwkeurigheid van ongeveer 1 meter. Toon de nauwkeurigheidswaarde, zodat gebruikers begrijpen hoe nauwkeurig de meting is, vooral op apparaten die binnenshuis geen goede GPS-positie kunnen bepalen.
export default function LocationDisplay() {
const [location, setLocation] = React.useState(null);
// ... permission check and fetch ...
if (!location) return <Button title='Get Location' onPress={fetchLocation} />;
return (
<View>
<Text>Latitude: {location.coords.latitude.toFixed(6)}</Text>
<Text>Longitude: {location.coords.longitude.toFixed(6)}</Text>
<Text>Accuracy: {location.coords.accuracy?.toFixed(0)} m</Text>
</View>
);
}Omgekeerde geocodering: coördinaten naar adres
Location.reverseGeocodeAsync zet coördinaten voor breedtegraad en lengtegraad om in een voor mensen leesbaar adres. Het retourneert een array met objecten van het type LocationGeocodedAddress en velden zoals street, city, region, country en postalCode. Gebruik het eerste resultaat — dat is de meest waarschijnlijke overeenkomst voor de opgegeven coördinaten.
async function getAddress(latitude: number, longitude: number) {
const results = await Location.reverseGeocodeAsync({ latitude, longitude });
if (results.length > 0) {
const addr = results[0];
return [addr.street, addr.city, addr.region, addr.country]
.filter(Boolean)
.join(', ');
}
return 'Unknown location';
}Geocodering: adres naar coördinaten
Location.geocodeAsync zet een tekstueel adres om in een breedtegraad en lengtegraad. Dit is handig voor functies zoals 'zoeken in de buurt', waarbij gebruikers een locatienaam invoeren. De functie retourneert een array met resultaten (bij onduidelijke adressen zijn meerdere overeenkomsten mogelijk), die elk de breedtegraad, lengtegraad en hoogte bevatten.
async function searchAddress(address: string) {
const results = await Location.geocodeAsync(address);
if (results.length > 0) {
const { latitude, longitude } = results[0];
console.log('Coordinates:', latitude, longitude);
return { latitude, longitude };
}
return null;
}Locatiefouten afhandelen
Locatieverzoeken kunnen mislukken wanneer de gebruiker binnen is, wanneer de GPS van het apparaat is uitgeschakeld of op simulatoren waarvoor geen gesimuleerde locatie is ingesteld. Plaats locatieaanroepen in try-catch en toon een alternatieve UI. Controleer Location.hasServicesEnabledAsync() voordat je een positie opvraagt, zodat je kunt detecteren wanneer de locatieservices van het apparaat in de systeeminstellingen zijn uitgeschakeld.
async function fetchLocationSafe() {
const enabled = await Location.hasServicesEnabledAsync();
if (!enabled) {
Alert.alert('Location Off', 'Please enable Location Services in Settings.');
return;
}
try {
const loc = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.Balanced,
});
setLocation(loc);
} catch (err) {
Alert.alert('Error', 'Could not get your location. Please try again.');
}
}Locatie op de achtergrond volgen
Voor het volgen van de locatie terwijl de app op de achtergrond staat, zijn toestemming voor locatie op de achtergrond (requestBackgroundPermissionsAsync) en een achtergrondtaak met expo-task-manager vereist. Dit is alleen nodig voor apps zoals fitness-trackingapps of bezorgapps. Apple en Google stellen strenge beoordelingsvereisten aan apps die locatie op de achtergrond gebruiken, dus vraag deze toestemming alleen aan als de functie essentieel is voor je app.
Korte controle
Test je begrip van de concepten voor mobiele ontwikkeling met React Native uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat requestForegroundPermissionsAsync moet worden aangeroepen en toestemming moet hebben gekregen voordat je een locatie kunt lezen, dat getCurrentPositionAsync eenmalig de positie bepaalt terwijl watchPositionAsync voortdurende beweging volgt, en dat reverseGeocodeAsync coördinaten omzet in een voor mensen leesbaar adres. Hierna bekijken we hoe je lokale meldingen plant.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “GPS-locatie lezen met expo-location” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “GPS-locatie lezen met expo-location”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “GPS-locatie lezen met expo-location”?
Vraag locatietoestemming op de voorgrond aan, haal de huidige coördinaten op met getCurrentPositionAsync en toon de latitude en longitude op het scherm. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “GPS-locatie lezen met expo-location”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Cameratoegang met expo-camera
- GPS-locatie lezen met expo-location
- Lokale meldingen plannen
- Toestemmingen zorgvuldig verwerken