Intégration des cartes et des fonctionnalités de géolocalisation dans les applications autochtones de réaction

Pour une comparaison détaillée, se reporter à la documentation officielle du react-native-maps et react-native-geolocation-service.

Mise en œuvre des cartes dans votre application

Installation et configuration

Commencez par installer la bibliothèque et configurer les dépendances spécifiques à la plate-forme.

npm install react-native-maps
cd ios && pod install

Si vous utilisez Google Maps sur Android, ajoutez votre clé API à la :

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

Pour iOS avec Google Maps, ajoutez la même clé à ou . Sinon, Apple Maps fonctionne hors de la boîte sans aucune clé API.

Composante de base de la carte

La composante centrale est , qui accepte un prop pour définir la zone visible initiale:

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

Les et contrôlent le niveau de zoom. Les valeurs plus grandes montrent une zone plus large.

Ajout de marqueurs et de rappels

Les marqueurs repèrent les emplacements sur la carte. Ils peuvent inclure un titre et une description, montrés comme un appel à la touche:

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

Marqueurs personnalisés et regroupement

Remplacer la broche de marqueur par défaut par une vue personnalisée en utilisant l'access :

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

Lorsque vous traitez avec des centaines ou des milliers de marqueurs, utilisez le cluster pour améliorer les performances. Les bibliothèques comme gèrent automatiquement le regroupement et la gestion du niveau de zoom.

Formes de dessin : Polylines et polygones

Pour les itinéraires ou les limites, utiliser et composants:

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

Animer la carte

Déplacez la caméra de façon programmatique en utilisant ou :

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

Accès à la localisation de l'utilisateur

Installation du service de géolocalisation-réaction-native

npm install react-native-geolocation-service
cd ios && pod install

Pour Android 6+, demandez les permissions d'exécution en utilisant ou une bibliothèque dédiée comme . Sur iOS, incluez la touche ou dans .

Obtenir une position unique

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

Suivi continu de l'emplacement

Pour les mouvements en temps réel (p. ex., suivi de la condition physique), utiliser :

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

Lieu général

Pour les applications qui ont besoin de mises à jour de localisation même en arrière-plan (p. ex. suivi de la livraison), des étapes supplémentaires sont nécessaires :

• iOS: Activer la fonctionnalité Modes de fond et vérifier les mises à jour de l'emplacement. Utilisez pour les mises à jour adaptées aux batteries.
• Android: Utilisez un service de premier plan avec une notification persistante. La bibliothèque fournit et des utilitaires.

Toujours obtenir la permission appropriée avant de permettre le suivi des antécédents et informer clairement les utilisateurs de se conformer aux lignes directrices de l'application store.

Autorisations de traiter les meilleures pratiques

Demander une autorisation d'appel après que l'utilisateur ait un contexte pour la raison pour laquelle l'emplacement est nécessaire. Utilisez une bibliothèque comme pour gérer les permissions multiplateforme :

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

Gérez gracieusement le déni – par exemple, montrez une alerte expliquant pourquoi l'emplacement est nécessaire et guidez l'utilisateur vers les paramètres du système.

Gestion des erreurs et des cas de bord

• Permission refusée:[ Retournez dans une région par défaut ou demandez à l'utilisateur d'activer l'emplacement depuis les paramètres.
• Lieu non disponible: Lorsque le signal GPS est perdu à l'intérieur, utilisez pour accepter les données mises en cache. Afficher un indicateur de localisation...
• Erreurs réseau:[ Le chargement de la carte peut échouer s'il n'y a pas d'Internet.
• Timeouts:[ Définissez un raisonnable (p. ex., 15 secondes) et informez l'utilisateur.

Optimisation des performances

Réduire les ré-relèvements inutiles

• Mémoniser les objets et pour empêcher la ré-exécution de chaque changement d'état.
• Utilisez pour les composants pour enfants comme les marqueurs personnalisés.
• Mises à jour de localisation de la poussée ou du débonflage dans les rappels .

Limiter les mises à jour de la carte

• Utilisez pour mettre à jour uniquement lorsque l'utilisateur déplace une distance minimale.
• Évitez de remettre la carte entière en mémoire en conservant les données de marqueur dans un lorsque le jeu de marqueur ne change pas.

Gérer le regroupement

Lorsque vous affichez de nombreux marqueurs, n'activez que les marqueurs visibles dans le port de vue actuel en utilisant .

Considérations spécifiques à la plate-forme

iOS

• Apple Maps ne nécessite pas de clé API, mais il manque certaines fonctionnalités Google Maps comme les bâtiments 3D et la navigation intérieure.
• Pour Google Maps sur iOS, vous devez ajouter la touche API à et lier le SDK Google Maps.
• N'oubliez pas de définir pour la localisation.

Android

• Google Maps nécessite une clé API valide dans manifeste. Obtenez-la de la console Google Cloud et activez le SDK --Maps pour Android.
• Sur certains appareils, les emplacements simulés peuvent interférer—utiliser pour détecter.
• Utilisez les services de premier plan pour l'emplacement du fond. L'application doit afficher une notification pour rester en vie.

Caractéristiques de l'emplacement des essais

• Utilisez des simulateurs pour tester les cartes et les emplacements de maquette. Dans Xcode, activez -Simula Location - pour définir n'importe quelle coordonnée.
• Pour Android Studio, utilisez le --Extended Controls pour envoyer des données GPS.
• Tester sur des appareils réels pour vérifier la précision GPS, les dialogues d'autorisation et le comportement de suivi de l'arrière-plan.
• Écrire des tests unitaires pour la logique de permission et des tests d'interface utilisateur avec des outils comme ou .

Ressources extérieures

• réaction-native-cartes du dépôt GitHub
• réaction-native-géolocalisation-service de dépôt GitHub
• Documentation de la plateforme Google Maps
• Pomme MapKit Documentation

Conclusion

En intégrant des cartes et géolocalisation dans les applications React Native, les développeurs peuvent ajouter des cartes riches en fonctionnalités, un suivi en temps réel des utilisateurs et une gestion transparente des autorisations. En prêtant attention aux différences de plate-forme, à l'optimisation des performances et à la confidentialité des utilisateurs, vous assurez une application polie et fiable. Avec les modèles et les meilleures pratiques décrits ici, vous êtes équipé pour construire des fonctionnalités de localisation prêtes à la production qui ravissent les utilisateurs.