1 00:00:02,080 --> 00:00:06,910 Para la ubicación del usuario, tenemos otro paquete integrado en la exposición que podemos usar fácilmente y 2 00:00:06,910 --> 00:00:08,740 ese es el paquete de ubicación. 3 00:00:08,780 --> 00:00:14,230 Ahora, al igual que antes, lo instala siguiendo las instrucciones aquí y luego también ve un 4 00:00:14,230 --> 00:00:15,520 ejemplo de uso 5 00:00:15,520 --> 00:00:17,130 allí, así que hagámoslo rápidamente. 6 00:00:17,140 --> 00:00:24,580 Ejecutemos expo install expo-location en nuestro proyecto y con eso instalado, ahora también podemos agregar 7 00:00:24,570 --> 00:00:27,580 otro componente, además del componente selector 8 00:00:27,580 --> 00:00:33,340 de imágenes, agregaré el LocationPicker. archivo js porque eso es otra cosa que quiero poder 9 00:00:33,340 --> 00:00:38,920 hacer en esta aplicación, quiero poder elegir una ubicación. Para eso en el componente selector de 10 00:00:38,920 --> 00:00:45,490 ubicación, importaré React from React, por supuesto, porque al final será un componente React normal e importaré un 11 00:00:45,490 --> 00:00:54,040 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 12 00:00:54,040 --> 00:01:00,610 del usuario, algo de texto, también para mostrar un texto de reserva predeterminado mientras no se ha seleccionado 13 00:01:00,610 --> 00:01:06,640 ningún lugar, un indicador de actividad para mostrar una flecha giratoria mientras esperamos que se recupere la 14 00:01:07,300 --> 00:01:13,840 ubicación y tal vez también alerta para mostrar una alerta si algo sale mal y también la hoja 15 00:01:13,840 --> 00:01:16,840 de estilo, por supuesto, para diseñar este componente. 16 00:01:16,860 --> 00:01:24,390 Ahora aquí, tengo mi componente selector de ubicación que recibe accesorios y luego haremos 17 00:01:24,390 --> 00:01:33,390 algo, configuraremos el objeto de estilos con Stylesheet. crear y, al final, exportar el componente selector de 18 00:01:33,450 --> 00:01:40,870 ubicación aquí como predeterminado, de esa manera. Ahora para ese componente, ¿cómo debería ser su código jsx? 19 00:01:40,940 --> 00:01:47,540 En última instancia, eso es como siempre, pero comenzaré de manera muy simple aquí y solo tendré una vista 20 00:01:47,540 --> 00:01:48,460 con un 21 00:01:49,590 --> 00:01:56,580 botón allí que me permitirá comenzar a obtener la ubicación del usuario y también otra vista allí que muestra, por 22 00:01:56,580 --> 00:02:04,080 ejemplo, mi texto de reserva, no ubicación elegida, que luego será reemplazada por una pequeña vista previa del lugar en un 23 00:02:04,110 --> 00:02:05,890 mapa, así que eso 24 00:02:05,910 --> 00:02:10,010 es algo que agregaré más adelante. Ahora aquí en el botón, por lo 25 00:02:13,220 --> 00:02:20,990 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 26 00:02:20,990 --> 00:02:27,430 colores de manera constante y presionando esto, como era de esperar, quiero comenzar a buscar la ubicación 27 00:02:27,430 --> 00:02:28,500 del usuario. 28 00:02:28,610 --> 00:02:38,180 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 29 00:02:38,210 --> 00:02:43,760 la ubicación del usuario y eso es lo que disparo cuando hago clic en este botón. 30 00:02:45,530 --> 00:02:57,040 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 31 00:02:57,190 --> 00:03:03,790 darle estilo a este texto, pero mantendré el valor predeterminado y ahora agregaré estos 32 00:03:03,790 --> 00:03:15,570 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 33 00:03:15,570 --> 00:03:27,820 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 34 00:03:27,820 --> 00:03:33,380 150 y también el color del borde de este color grisáceo con 35 00:03:33,570 --> 00:03:41,310 el código hexadecimal #ccc y un ancho del borde de uno, es un poco como el cuadro 36 00:03:41,540 --> 00:03:47,620 de vista previa de la imagen. Con eso, tenemos este componente configurado, ahora podemos incluirlo 37 00:03:47,620 --> 00:03:50,170 en la nueva pantalla de lugar. 38 00:03:50,200 --> 00:04:00,970 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 39 00:04:00,970 --> 00:04:05,750 código jsx debajo del selector de imagen, así como así. 40 00:04:05,900 --> 00:04:10,540 Si ahora guardamos eso y lo miramos, vemos este cuadro aquí. 41 00:04:10,560 --> 00:04:16,110 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. 42 00:04:18,460 --> 00:04:26,110 Para eso, en nuestro componente selector de ubicación, necesitaremos importar algunas cosas aquí: importaremos todo como ubicación desde el 43 00:04:26,200 --> 00:04:33,610 paquete de ubicación de exposición que acabamos de instalar. Además de la ubicación, al igual que 44 00:04:33,610 --> 00:04:40,030 para la cámara, tendremos que pedir permisos, por lo que importaremos todo como permisos 45 00:04:40,060 --> 00:04:47,970 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 46 00:04:48,090 --> 00:04:54,540 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 47 00:04:54,540 --> 00:04:59,010 supuesto, también podríamos externalizar y escribir de una manera más genérica para trabajar en 48 00:04:59,010 --> 00:05:04,800 diferentes componentes, aquí solo copiaré, verificaré los permisos. Por supuesto, aquí, no estoy pidiendo el 49 00:05:04,800 --> 00:05:12,750 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 50 00:05:12,750 --> 00:05:20,820 permisos se ejecuten aquí en el controlador de ubicación de obtención. Podemos usar async wait aquí nuevamente para esperar el resultado de 51 00:05:20,850 --> 00:05:28,870 esta verificación, por lo que tengo permiso es lo que quiero verificar aquí y si no, así que si no tenemos permisos, 52 00:05:29,020 --> 00:05:33,040 entonces simplemente regresaré aquí, no hay debe continuar porque no se 53 00:05:33,040 --> 00:05:39,790 nos permitirá obtener la ubicación de todos modos. Ahora, de lo contrario, podemos continuar y ahora podemos 54 00:05:39,970 --> 00:05:47,680 usar el paquete de ubicación para obtener la posición actual asíncrona y esto hace lo que el nombre implica, 55 00:05:47,680 --> 00:05:53,230 obtiene la posición actual del usuario. Ahora, localizar al usuario puede llevar un tiempo, por lo que 56 00:05:53,230 --> 00:05:58,150 esta es una tarea asincrónica y por qué devuelve una promesa, una promesa que se resolverá una vez que obtengamos la 57 00:05:58,180 --> 00:06:04,230 ubicación del usuario o que se rechazará si no se obtiene una. También podemos configurar esto con un 58 00:06:04,240 --> 00:06:09,400 objeto que le pase, nuevamente, como siempre en los documentos oficiales, aprendió 59 00:06:09,400 --> 00:06:16,550 todo sobre todas las opciones que puede configurar allí. Por ejemplo, una opción que puede establecer es el tiempo de 60 00:06:16,550 --> 00:06:22,670 espera y establecerlo en cinco segundos para asegurarse de que si no pudiéramos obtener una ubicación durante cinco segundos, 61 00:06:22,670 --> 00:06:23,870 dejamos de intentarlo 62 00:06:23,870 --> 00:06:27,260 y arrojamos un error, por lo que la promesa sería rechazada. 63 00:06:27,310 --> 00:06:34,930 Ahora podemos esperar esto y, por supuesto, envolverlo en un bloque try catch, eso es importante para asegurarnos de que 64 00:06:35,590 --> 00:06:42,610 manejamos los errores si no conseguimos una ubicación. Aquí simplemente usaré el componente de alerta 65 00:06:42,610 --> 00:06:52,410 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 66 00:06:52,840 --> 00:06:59,940 una ubicación en el mapa, que no es posible en este momento pero que nosotros ' 67 00:06:59,940 --> 00:07:07,920 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 68 00:07:08,880 --> 00:07:10,090 por alguna razón, 69 00:07:10,130 --> 00:07:12,470 de lo contrario aquí espero recuperar una ubicación, 70 00:07:12,500 --> 00:07:15,200 así que ese es el resultado de esta promesa al 71 00:07:15,200 --> 00:07:16,920 final, una ubicación que podemos usar. 72 00:07:17,120 --> 00:07:25,720 Ahora podemos utilizar esta ubicación con la ayuda del estado de uso para administrar algún estado interno aquí, esa es 73 00:07:26,830 --> 00:07:36,250 la ubicación elegida y establecer la ubicación elegida y allí, podemos llamar al estado de uso que no tiene un valor 74 00:07:36,250 --> 00:07:37,810 inicial aquí y 75 00:07:37,810 --> 00:07:45,550 luego aquí en el controlador de ubicación, podemos establecer la ubicación elegida en algo, tendremos que ver 76 00:07:45,600 --> 00:07:52,230 qué por ahora, a nulo, pero antes de establecer algo aquí, realmente consolamos la ubicación 77 00:07:52,290 --> 00:07:57,530 del registro para tener una idea de lo que hay dentro. 78 00:07:57,540 --> 00:08:03,740 Ahora también quiero mostrar una ruleta mientras estamos recuperando, así que manejaré otro estado aquí y 79 00:08:03,740 --> 00:08:10,190 ese es el estado de recuperación e inicialmente, eso es falso, pero inicialmente no estamos recuperando, pero 80 00:08:10,220 --> 00:08:12,260 luego aquí en la ubicación 81 00:08:12,650 --> 00:08:19,670 de obtención controlador, antes de comenzar a obtener la ubicación, estableceré que la recuperación sea verdadera y, una vez 82 00:08:19,670 --> 00:08:21,090 que hayamos terminado, 83 00:08:21,260 --> 00:08:24,410 eso también incluye si recibimos un error, por lo 84 00:08:24,410 --> 00:08:31,640 que luego volveré a configurarlo como falso y ahora podemos usar la recuperación. para mostrar una ruleta mientras buscamos. 85 00:08:31,640 --> 00:08:39,740 Entonces, si la recuperación es verdadera, mostraré el indicador de actividad y solo de lo contrario, mostraré este texto y luego, 86 00:08:39,950 --> 00:08:45,920 por supuesto, no solo mostraremos el texto sino que también mostraremos un fragmento de mapa. 87 00:08:45,920 --> 00:08:48,260 Ahora se puede configurar el indicador de actividad, podemos 88 00:08:48,260 --> 00:08:55,440 establecer el tamaño en grande y el color en Colores. primaria si quieres. Con todo eso, regresemos y probémoslo 89 00:08:55,440 --> 00:08:57,940 aquí en iOS porque aunque no puedo 90 00:08:57,960 --> 00:09:03,060 agregar una imagen aquí, al menos puedo verificar la ubicación y hacer clic en obtener 91 00:09:03,060 --> 00:09:07,980 la ubicación del usuario y ahora me preguntan si quiero otorgar permisos que sí quiero 92 00:09:08,040 --> 00:09:14,820 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 93 00:09:14,820 --> 00:09:19,270 la ubicación real de tu computadora donde estás ejecutando esto, en cambio es 94 00:09:19,480 --> 00:09:25,750 una ubicación ficticia predeterminada en San Francisco y aquí en Android, es lo mismo, si hago clic en obtener 95 00:09:25,780 --> 00:09:33,100 la ubicación del usuario aquí, necesito otorgar permisos y una vez que lo hice, ves la flecha aquí y luego no ves 96 00:09:33,100 --> 00:09:39,700 nada más que en los registros por supuesto, ves algo. Allí verá los objetos que se estaban 97 00:09:39,700 --> 00:09:45,670 registrando donde tiene un subobjeto de coords, por decirlo así, un campo llamado coords y 98 00:09:45,670 --> 00:09:53,230 el objeto que es otro objeto con la precisión y luego un par de latitud y longitud que describe 99 00:09:53,290 --> 00:10:00,170 esta ubicación falsa, ambos simuladores usan fake ubicaciones. También tienes una marca de tiempo. 100 00:10:00,210 --> 00:10:01,700 Entonces, ahora sabemos 101 00:10:01,740 --> 00:10:08,790 lo que hay allí, para poder establecer la ubicación elegida, ahora podemos configurar esto para decir un objeto donde 102 00:10:09,540 --> 00:10:17,330 almacena una latitud de ubicación. coords. latitud, eso es lo que hay allí, correcto y una longitud,. Lng de 103 00:10:17,330 --> 00:10:20,280 ubicación. coords. longitud. 104 00:10:20,320 --> 00:10:26,140 Así que ahora tenemos esa ubicación elegida disponible y esa ubicación elegida ahora puede usarse, por ejemplo, 105 00:10:26,440 --> 00:10:28,440 para mostrar un pequeño fragmento 106 00:10:28,480 --> 00:10:34,420 de mapa aquí una vez que tengamos una ubicación. Antes de hacer eso solo una pequeña cosa, quiero asegurarme de 107 00:10:34,720 --> 00:10:41,920 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 108 00:10:42,280 --> 00:10:48,490 en el centro y alinearé los elementos al centro, para que todos el contenido allí está centrado horizontal y verticalmente, eso es solo 109 00:10:48,500 --> 00:10:50,310 una cosa pequeña, así que 110 00:10:50,320 --> 00:10:52,290 ahora lo ves todo en el centro. 111 00:10:52,300 --> 00:10:58,390 Pero con eso, ahora asegurémonos de mostrar un pequeño fragmento de mapa que muestre la ubicación elegida por el usuario.