Para la ubicación del usuario, tenemos otro paquete integrado en la exposición que podemos usar fácilmente y
ese es el paquete de ubicación.
Ahora, al igual que antes, lo instala siguiendo las instrucciones aquí y luego también ve un
ejemplo de uso
allí, así que hagámoslo rápidamente.
Ejecutemos expo install expo-location en nuestro proyecto y con eso instalado, ahora también podemos agregar
otro componente, además del componente selector
de imágenes, agregaré el LocationPicker. archivo js porque eso es otra cosa que quiero poder
hacer en esta aplicación, quiero poder elegir una ubicación. Para eso en el componente selector de
ubicación, importaré React from React, por supuesto, porque al final será un componente React normal e importaré un
par de cosas de React Native y entre estas cosas está la vista, un botón que nos permite para comenzar a obtener la ubicación
del usuario, algo de texto, también para mostrar un texto de reserva predeterminado mientras no se ha seleccionado
ningún lugar, un indicador de actividad para mostrar una flecha giratoria mientras esperamos que se recupere la
ubicación y tal vez también alerta para mostrar una alerta si algo sale mal y también la hoja
de estilo, por supuesto, para diseñar este componente.
Ahora aquí, tengo mi componente selector de ubicación que recibe accesorios y luego haremos
algo, configuraremos el objeto de estilos con Stylesheet. crear y, al final, exportar el componente selector de
ubicación aquí como predeterminado, de esa manera. Ahora para ese componente, ¿cómo debería ser su código jsx?
En última instancia, eso es como siempre, pero comenzaré de manera muy simple aquí y solo tendré una vista
con un
botón allí que me permitirá comenzar a obtener la ubicación del usuario y también otra vista allí que muestra, por
ejemplo, mi texto de reserva, no ubicación elegida, que luego será reemplazada por una pequeña vista previa del lugar en un
mapa, así que eso
es algo que agregaré más adelante. Ahora aquí en el botón, por lo
tanto, diré que obtenga la ubicación del usuario, por ejemplo, configure el color en Colores. primaria y para eso, como siempre, asegúrese de importar los
colores de manera constante y presionando esto, como era de esperar, quiero comenzar a buscar la ubicación
del usuario.
Así que aquí agregaré una nueva constante, obtener el controlador de ubicación, que es una función que luego usará la API de ubicación que acabamos de instalar para obtener
la ubicación del usuario y eso es lo que disparo cuando hago clic en este botón.
Ahora, para el estilo aquí, agregaré un selector de ubicación de estilo, en esta vista aquí, agregaré otra vista previa del mapa de estilo, también podríamos
darle estilo a este texto, pero mantendré el valor predeterminado y ahora agregaré estos
dos estilos a la hoja de estilo, entonces el selector de ubicación aquí, allí agregaré un margen al final de digamos 15 y en la vista
previa del mapa, allí también agregaré un margen al final de digamos 10 y el ancho del 100% para tome todo el ancho disponible, una altura de quizás
150 y también el color del borde de este color grisáceo con
el código hexadecimal #ccc y un ancho del borde de uno, es un poco como el cuadro
de vista previa de la imagen. Con eso, tenemos este componente configurado, ahora podemos incluirlo
en la nueva pantalla de lugar.
Entonces, en ese componente de pantalla, importaré el selector de ubicación de los componentes, el selector de ubicación como este y lo agregaré en el
código jsx debajo del selector de imagen, así como así.
Si ahora guardamos eso y lo miramos, vemos este cuadro aquí.
Ahora, cuando hago clic en obtener la ubicación del usuario, como era de esperar, la idea es que empiece a obtener la ubicación del usuario.
Para eso, en nuestro componente selector de ubicación, necesitaremos importar algunas cosas aquí: importaremos todo como ubicación desde el
paquete de ubicación de exposición que acabamos de instalar. Además de la ubicación, al igual que
para la cámara, tendremos que pedir permisos, por lo que importaremos todo como permisos
de permisos de exposición, eso también es obligatorio. Con eso agregado aquí en el controlador de ubicación de obtención, antes que nada quiero verificar mis permisos
y para eso, puedo copiar el enfoque que uso en el selector de imágenes. Allí tenemos esta función de verificación de permisos que, por
supuesto, también podríamos externalizar y escribir de una manera más genérica para trabajar en
diferentes componentes, aquí solo copiaré, verificaré los permisos. Por supuesto, aquí, no estoy pidiendo el
carrete de la cámara, sino una ubicación, y debes otorgar permisos de ubicación para usar esta aplicación y ahora verificar que los
permisos se ejecuten aquí en el controlador de ubicación de obtención. Podemos usar async wait aquí nuevamente para esperar el resultado de
esta verificación, por lo que tengo permiso es lo que quiero verificar aquí y si no, así que si no tenemos permisos,
entonces simplemente regresaré aquí, no hay debe continuar porque no se
nos permitirá obtener la ubicación de todos modos. Ahora, de lo contrario, podemos continuar y ahora podemos
usar el paquete de ubicación para obtener la posición actual asíncrona y esto hace lo que el nombre implica,
obtiene la posición actual del usuario. Ahora, localizar al usuario puede llevar un tiempo, por lo que
esta es una tarea asincrónica y por qué devuelve una promesa, una promesa que se resolverá una vez que obtengamos la
ubicación del usuario o que se rechazará si no se obtiene una. También podemos configurar esto con un
objeto que le pase, nuevamente, como siempre en los documentos oficiales, aprendió
todo sobre todas las opciones que puede configurar allí. Por ejemplo, una opción que puede establecer es el tiempo de
espera y establecerlo en cinco segundos para asegurarse de que si no pudiéramos obtener una ubicación durante cinco segundos,
dejamos de intentarlo
y arrojamos un error, por lo que la promesa sería rechazada.
Ahora podemos esperar esto y, por supuesto, envolverlo en un bloque try catch, eso es importante para asegurarnos de que
manejamos los errores si no conseguimos una ubicación. Aquí simplemente usaré el componente de alerta
que ya estoy importando para lanzar una alerta, no se pudo recuperar la ubicación y luego aquí, intente nuevamente más tarde o elija
una ubicación en el mapa, que no es posible en este momento pero que nosotros '
Pronto agregaré y aquí un botón donde decimos OK. Entonces, esa es una alerta que muestro si la búsqueda de la ubicación falla
por alguna razón,
de lo contrario aquí espero recuperar una ubicación,
así que ese es el resultado de esta promesa al
final, una ubicación que podemos usar.
Ahora podemos utilizar esta ubicación con la ayuda del estado de uso para administrar algún estado interno aquí, esa es
la ubicación elegida y establecer la ubicación elegida y allí, podemos llamar al estado de uso que no tiene un valor
inicial aquí y
luego aquí en el controlador de ubicación, podemos establecer la ubicación elegida en algo, tendremos que ver
qué por ahora, a nulo, pero antes de establecer algo aquí, realmente consolamos la ubicación
del registro para tener una idea de lo que hay dentro.
Ahora también quiero mostrar una ruleta mientras estamos recuperando, así que manejaré otro estado aquí y
ese es el estado de recuperación e inicialmente, eso es falso, pero inicialmente no estamos recuperando, pero
luego aquí en la ubicación
de obtención controlador, antes de comenzar a obtener la ubicación, estableceré que la recuperación sea verdadera y, una vez
que hayamos terminado,
eso también incluye si recibimos un error, por lo
que luego volveré a configurarlo como falso y ahora podemos usar la recuperación. para mostrar una ruleta mientras buscamos.
Entonces, si la recuperación es verdadera, mostraré el indicador de actividad y solo de lo contrario, mostraré este texto y luego,
por supuesto, no solo mostraremos el texto sino que también mostraremos un fragmento de mapa.
Ahora se puede configurar el indicador de actividad, podemos
establecer el tamaño en grande y el color en Colores. primaria si quieres. Con todo eso, regresemos y probémoslo
aquí en iOS porque aunque no puedo
agregar una imagen aquí, al menos puedo verificar la ubicación y hacer clic en obtener
la ubicación del usuario y ahora me preguntan si quiero otorgar permisos que sí quiero
permitir, siempre permiten y ves esa rueda giratoria, es súper rápido porque es un simulador, también simula la ubicación, no es
la ubicación real de tu computadora donde estás ejecutando esto, en cambio es
una ubicación ficticia predeterminada en San Francisco y aquí en Android, es lo mismo, si hago clic en obtener
la ubicación del usuario aquí, necesito otorgar permisos y una vez que lo hice, ves la flecha aquí y luego no ves
nada más que en los registros por supuesto, ves algo. Allí verá los objetos que se estaban
registrando donde tiene un subobjeto de coords, por decirlo así, un campo llamado coords y
el objeto que es otro objeto con la precisión y luego un par de latitud y longitud que describe
esta ubicación falsa, ambos simuladores usan fake ubicaciones. También tienes una marca de tiempo.
Entonces, ahora sabemos
lo que hay allí, para poder establecer la ubicación elegida, ahora podemos configurar esto para decir un objeto donde
almacena una latitud de ubicación. coords. latitud, eso es lo que hay allí, correcto y una longitud,. Lng de
ubicación. coords. longitud.
Así que ahora tenemos esa ubicación elegida disponible y esa ubicación elegida ahora puede usarse, por ejemplo,
para mostrar un pequeño fragmento
de mapa aquí una vez que tengamos una ubicación. Antes de hacer eso solo una pequeña cosa, quiero asegurarme de
que tanto el texto como la flecha aquí estén centrados, por lo que en la vista previa del mapa, en realidad también estableceré el contenido de justificación
en el centro y alinearé los elementos al centro, para que todos el contenido allí está centrado horizontal y verticalmente, eso es solo
una cosa pequeña, así que
ahora lo ves todo en el centro.
Pero con eso, ahora asegurémonos de mostrar un pequeño fragmento de mapa que muestre la ubicación elegida por el usuario.