Integrar los mapas y las características de geolocación en las aplicaciones nativas de reacción

Para una comparación detallada, consulte la documentación oficial de -mapas-nativas de reacción] y ] [servicio de reasignación-nativa .

Implementando Mapas en su App

Instalación y configuración

Comience por instalar la biblioteca y configurar dependencias específicas de plataforma.

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

Si está usando Google Maps en Android, agregue su clave de API a :

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

Para iOS con Google Maps, agregue la misma clave a o . Alternativamente, Apple Maps funciona fuera de la caja sin ninguna clave de API.

Componente de mapa básico

El componente central es , que acepta un prop para definir el área visible inicial:

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} />
 );
}

Los y controlan el nivel de zoom. Los valores más grandes muestran un área más amplia.

Añadiendo marcadores y callouts

Marcadores ubicaciones de punto en el mapa. Pueden incluir un título y descripción, mostrado como una llamada cuando se reproduce:

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>

Marcadores personalizados y encuadernación

Reemplaza el pin de marcar por defecto con una vista personalizada utilizando el prop:

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

Cuando se trata de cientos o miles de marcadores, utilice el agrupamiento para mejorar el rendimiento. Las bibliotecas como manejan automáticamente la agrupación y la gestión de zoom.

Formas de dibujo: Polilíneas y poligones

Para rutas o límites, utilice y componentes:

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>

Imágen del mapa

Movilizar la cámara mediante o :

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
};

Acceso a la ubicación del usuario

Instalación de servicio de reasignación-native-geolocation

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

Para Android 6+, solicite permisos de tiempo de ejecución usando o una biblioteca dedicada como . En iOS, incluya la clave o en ].

Conseguir una posición única

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 }
);

Seguimiento de localización continua

Para el movimiento en tiempo real (por ejemplo, seguimiento de la aptitud), use :

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);

Ubicación del fondo

Para aplicaciones que necesitan actualizaciones de ubicación incluso cuando en el fondo (por ejemplo, seguimiento de la entrega), se requieren pasos adicionales:

• iOS:] Permitir Modos de fondo] capacidad y comprobar “Actividades de localización”. Utilice para actualizaciones de batería.
• Android:] Usar un servicio de primer plano con una notificación persistente. La biblioteca proporciona y ] utilidades.

Obtenga siempre el permiso apropiado antes de permitir el seguimiento de antecedentes, e informe a los usuarios claramente a cumplir con las directrices de la tienda de aplicaciones.

Permisos que manejan las mejores prácticas

Solicitar permiso después de que el usuario tenga contexto para por qué la ubicación es necesaria. Utilice una biblioteca como para gestionar permisos multiplataforma:

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;
};

Maneja la negación con gracia — por ejemplo, muestre una alerta explicando por qué se necesita ubicación y guíe al usuario a la configuración del sistema.

Casos de manipulación y borde de errores

• Permisión denegada: Regrese a una región predeterminada o incite al usuario a habilitar la ubicación desde la configuración.
• Ubicación no disponible: Cuando la señal GPS se pierde en interiores, utilice para aceptar datos en caché. Mostrar un indicador “Locating...”.
• Errores de red: La carga de mapa puede fallar si no hay Internet. Render un marcador de posición o mensaje sin conexión.
• Tiempos:] Establece un razonable (por ejemplo, 15 segundos) e informa al usuario.

Optimización del rendimiento

Re-renders innecesarios

• Memoizar los y objetos para evitar la re-renderización de cada cambio estatal.
• Use para componentes infantiles como marcadores personalizados.
• Actualizaciones de ubicación de tracción o desbocado en callbacks.

Actualizaciones de mapas de límite

• Utilice para actualizar sólo cuando el usuario se mueve una distancia mínima.
• Evite re-rendering todo el mapa manteniendo los datos de marcadores en un cuando el conjunto de marcadores no cambia.

Manage Clustering

Al mostrar muchos marcadores, permite agrupar o cargar sólo los marcadores visibles en el puerto de visión actual utilizando .

Consideraciones de la plataforma y el espacio

iOS

• Apple Maps no requiere una clave de API, pero carece de algunas características de Google Maps como edificios 3D y navegación interior.
• Para Google Maps en iOS, debe agregar la clave de API a y vincular el SDK de Google Maps.
• Recuerden establecer para la localización.

Android

• Google Maps requiere una clave de API válida en manifiesto. Obtenga desde la Consola de Google Cloud y active el “Maps SDK para Android”.
• En ciertos dispositivos, los lugares de mock pueden interferir —utiliza para detectar.
• Utilice servicios de primer plano para la ubicación de fondo. La aplicación debe mostrar una notificación para permanecer vivo.

Características de la localización de pruebas

• Utilice simuladores para probar mapas y ubicaciones de mock. En Xcode, active “Simulate Location” para establecer cualquier coordenadas.
• Para Android Studio, utilice los “Controles de envío” para enviar datos de GPS.
• Prueba en dispositivos reales para verificar la exactitud del GPS, diálogos de permiso y comportamiento de seguimiento de antecedentes.
• Escribe pruebas de unidad para la lógica de permiso y pruebas de interfaz de usuario con herramientas como o .

Recursos externos

• Repositorio GitHub
• Repositorio GitHub de servicio de reacción-native-geolocation
• Google Maps Platform Documentation
• Apple MapKit Documentation

Conclusión

Integrando mapas y geolocalización en React Las aplicaciones nativas transforman las interfaces estáticas en experiencias dinámicas y de conocimiento de ubicación. Al aprovechar bibliotecas robustas como los métodos de reacción y el servicio de ubicación de reacción, los desarrolladores pueden añadir mapas ricos en funciones, seguimiento de usuarios en tiempo real y manejo de permisos sin problemas. Prestando atención a las diferencias de plataforma, optimización de rendimiento y privacidad de los usuarios garantizan una aplicación pulida y confiable.