Lo que intento hacer es implementar una función de mapa en mi aplicación. Para hacer eso, uso react-native-maps y expo-location . El mapa no tiene ningún error, pero cuando lo abro, me muestra una parte del mapa y después de 2-3 segundos me muestra el marcador de ubicación actual.
import React,{ useState, useEffect, useRef} from 'react'; import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps'; import { StyleSheet, Image , Text, View} from 'react-native'; import * as Location from 'expo-location'; import { LocationView , LocationBtn, } from '../components/styles'; import { MaterialIcons } from '@expo/vector-icons'; const Map = (props) =>{ const [mapRegion, setMapRegion] = useState(null); const _map = useRef(null) useEffect(() => { (async () => { let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setErrorMsg('Permission to access location was denied'); return; } console.log('status', status) let location = await Location.getCurrentPositionAsync({}); setMapRegion({ longitude: location.coords.longitude, latitude: location.coords.latitude, longitudeDelta: 0.0922, latitudeDelta: 0.0421 }); // mapRef.current.animateToRegion(mapRegion, 3 * 1000); })(); }, []) console.log(mapRegion) return( <View style={{ flex: 1}}> <MapView region={mapRegion} provider={PROVIDER_GOOGLE} style={styles.map} mapType={props.mapType} loadingEnabled={false} initialRegion={mapRegion} userInterfaceStyle='light' showsTraffic={true} ref={_map} // zoomEnabled={true} // onMapReady={mapRegion} > {mapRegion != null && <Marker coordinate={mapRegion} > <Image source={require('../assets/marker.png')} style={{height: 90, width: 90}} /> </Marker> } </MapView> <LocationView> <LocationBtn > <MaterialIcons name="my-location" size={30} color="black" style={{alignSelf: 'center', marginTop: 13}} /> </LocationBtn> </LocationView> </View> ) } const styles = StyleSheet.create({ map: { height: '100%', }, }) export default Map;¿Cómo puedo hacer que cuando el usuario abra el mapa, muestre el creador de ubicación actual de inmediato, sin demora?
El método Location.getCurrentPositionAsync({}) es asíncrono y, según el dispositivo, puede llevar un tiempo obtener la ubicación del usuario.
Puede obtener la ubicación del usuario en la pantalla antes y pasar la ubicación usando accesorios o parámetros de navegación.