1 00:00:02,100 --> 00:00:09,600 Para mostrar esto en un mapa, tenemos este componente de pantalla de mapa que actualmente solo tiene contenido ficticio y 2 00:00:09,600 --> 00:00:15,800 ahora necesitamos poder representar un mapa interactivo y para esto, la exposición nuevamente nos tiene cubiertos. 3 00:00:15,870 --> 00:00:17,880 Allí encontrará el paquete de 4 00:00:18,970 --> 00:00:20,810 vista de mapa. 5 00:00:20,850 --> 00:00:25,840 Ahora, esto detrás de escena usa un paquete llamado React Native maps que también puede usar en aplicaciones que 6 00:00:25,840 --> 00:00:30,220 no son expo, por cierto muchos de estos paquetes pueden usarse en aplicaciones que no son 7 00:00:30,220 --> 00:00:33,950 expo y eso es algo a lo que volveré en las aplicaciones de construcción 8 00:00:34,060 --> 00:00:38,480 sin el módulo de exposición, pero por ahora simplemente podemos instalarlo convenientemente ejecutando este comando y esto 9 00:00:38,500 --> 00:00:40,630 instalará el paquete de mapas React Native 10 00:00:40,640 --> 00:00:43,820 y luego podemos usarlo como lo vemos aquí en este ejemplo. 11 00:00:43,900 --> 00:00:49,660 Por cierto, también consulte la documentación oficial en este enlace para ver más ejemplos de uso allí, porque 12 00:00:49,660 --> 00:00:52,660 allí puede aprender todo sobre cómo usar este paquete, 13 00:00:52,660 --> 00:00:56,300 algunos ejemplos también se muestran aquí en este módulo, por supuesto. 14 00:00:56,410 --> 00:01:01,810 Entonces, ejecutemos expo install react-native-maps para instalar este paquete aquí y esto 15 00:01:01,810 --> 00:01:06,160 nos permitirá usar varios componentes que representan mapas interactivos. 16 00:01:06,160 --> 00:01:12,860 Así que esperemos a que eso termine y con eso terminado, en el componente de pantalla del mapa, podemos comenzar a usar ese 17 00:01:12,860 --> 00:01:13,300 mapa. 18 00:01:15,730 --> 00:01:26,160 Ahora, para usar el mapa, podemos importar la vista del mapa desde el mapa React Native, por lo que desde este paquete que acabamos de 19 00:01:26,160 --> 00:01:31,150 instalar y que nos permitirá representar un mapa en la pantalla. 20 00:01:31,200 --> 00:01:32,730 Ahora, ¿cómo funciona eso? 21 00:01:32,730 --> 00:01:38,880 Bueno, vamos a nuestra pantalla de mapa y en lugar de devolver esta vista aquí, devolveré una vista 22 00:01:39,630 --> 00:01:41,340 de mapa como esa. 23 00:01:41,370 --> 00:01:43,470 Ahora, la vista del mapa puede ser una etiqueta 24 00:01:43,470 --> 00:01:47,910 de cierre automático por ahora, luego también podemos agregar algunos marcadores allí, pero por ahora solo preséntelo así y 25 00:01:48,180 --> 00:01:51,530 ahora necesita configurar esta vista del mapa. Para ser precisos, necesita 26 00:01:51,540 --> 00:01:58,310 un accesorio de región que le indique dónde debe enfocarse cuando se carga, de modo que en qué 27 00:01:58,440 --> 00:02:03,990 parte del mapa o en qué parte del mundo debe enfocarse cuando se carga. 28 00:02:03,990 --> 00:02:12,770 Así que necesitamos crear una región así y la almacenaré en una región de mapa con 29 00:02:12,770 --> 00:02:20,810 nombre constante y una región es en realidad un objeto con cuatro propiedades y hay 30 00:02:20,840 --> 00:02:24,470 que nombrarlas así: latitud y no 31 00:02:27,360 --> 00:02:32,680 lat, pero realmente latitud escrita, longitud, latitudDelta y longitudDelta. 32 00:02:32,830 --> 00:02:41,430 Los deltas básicamente establecen el factor de zoom porque esto describe cuánto espacio puede ver alrededor del 33 00:02:41,490 --> 00:02:45,450 centro que describe con estos dos puntos. 34 00:02:45,480 --> 00:02:48,690 Entonces, eso describe un punto, junto con los 35 00:02:48,690 --> 00:02:51,030 dos deltas, describe una superficie. 36 00:02:51,080 --> 00:02:54,890 Así que ahora aquí, podemos comenzar con algunos valores ficticios 37 00:02:54,890 --> 00:02:58,820 antes de que luego nos aseguremos de que podamos rellenar previamente. 38 00:02:58,820 --> 00:03:03,980 Así que aquí, estableceré esto en un valor ficticio de 37. 78 y -122. 43 que 39 00:03:03,980 --> 00:03:11,900 está en el Área de la Bahía alrededor de la sede de Google y 40 00:03:11,900 --> 00:03:18,080 aquí, latitudeDelta tomará 0. 0922 y luego 0. 0421, descubrí que 41 00:03:18,080 --> 00:03:21,030 esto funciona bastante bien como región. 42 00:03:21,080 --> 00:03:27,120 Por supuesto, puede experimentar con estos números, pero al final, pase esta región del mapa aquí. 43 00:03:27,200 --> 00:03:30,020 Ahora, esto debería mostrar un mapa en la pantalla, ahora solo 44 00:03:30,110 --> 00:03:32,320 necesitamos poder alcanzarlo y para eso me 45 00:03:32,330 --> 00:03:37,000 permite volver al selector de ubicación y quiero llegar a él de dos maneras diferentes: una es 46 00:03:37,010 --> 00:03:42,380 con la ayuda de un botón que aún no agregué. Además del botón para obtener la ubicación del 47 00:03:42,390 --> 00:03:48,730 usuario, quiero tener un segundo botón que debería estar junto al primero, así que agregaré una vista para 48 00:03:48,730 --> 00:03:53,830 envolver ambos y luego moveré este botón aquí y tendré un segundo botón allí 49 00:03:53,830 --> 00:04:01,400 y este botón generalmente se configurará de la misma manera, pero diré elegir en el mapa y, por supuesto, activaré un método 50 00:04:01,400 --> 00:04:09,740 diferente, una función diferente, aquí quiero activar una función que es el controlador de selección en el mapa y, por lo tanto, usaré esto 51 00:04:09,740 --> 00:04:10,870 aquí y 52 00:04:10,940 --> 00:04:16,220 esa es una forma de seleccionar esto. La otra forma de seleccionar esto o ir 53 00:04:16,220 --> 00:04:22,900 al mapa es haciendo clic en la vista previa del mapa. Ahora, antes de implementar esto, permítanme diseñar rápidamente esta vista que contiene los dos botones. 54 00:04:22,900 --> 00:04:30,460 Le daré un identificador de estilo de acciones y luego allí, las acciones se pueden configurar de una manera 55 00:04:30,460 --> 00:04:31,620 relativamente sencilla. 56 00:04:32,930 --> 00:04:38,720 Quiero que el elemento se siente uno al lado del otro, por lo que la dirección de flexión será una fila, no una columna. Justifique que el contenido puede ser 57 00:04:38,720 --> 00:04:45,580 espacio para distribuir el espacio libre disponible alrededor de ambos botones, tomaré un ancho del 58 00:04:45,620 --> 00:04:49,400 100% para esta fila y eso es todo. 59 00:04:49,400 --> 00:04:51,170 Ahora con eso, tengo mis botones 60 00:04:51,170 --> 00:04:56,510 aquí, ahora necesitamos asegurarnos de que también podemos tocar la vista previa del mapa y para eso, déjenme 61 00:04:56,510 --> 00:05:03,090 ir a la vista previa del mapa y en realidad envolver esto, no en una vista sino en un componente táctil y aquí 62 00:05:03,110 --> 00:05:07,700 Solo usaré la opacidad táctil, por supuesto, también podría optar por otros componentes táctiles diferentes 63 00:05:07,700 --> 00:05:08,260 según 64 00:05:08,270 --> 00:05:14,000 la plataforma en la que se esté ejecutando, quiero mantener esto relativamente sencillo, así que reemplazaré esta vista aquí con 65 00:05:14,450 --> 00:05:15,430 opacidad táctil, tengo 66 00:05:15,440 --> 00:05:20,750 mi estilo aquí, está bien, pero por supuesto también tengo el controlador onPress y allí, quiero activar una 67 00:05:20,750 --> 00:05:23,950 función que espero obtener desde el exterior a través de accesorios. 68 00:05:24,020 --> 00:05:28,210 También lo llamaré en onPress, pero podrías darle a este accesorio el nombre que quieras. 69 00:05:28,250 --> 00:05:32,030 Esto ahora nos permite agregar un accesorio onPress en la vista previa del 70 00:05:32,030 --> 00:05:38,030 mapa, por lo que aquí, en el selector de ubicación, puedo escuchar onPress en la vista previa del mapa y, por supuesto, 71 00:05:38,030 --> 00:05:42,050 quiero activar la misma función que cuando hago clic en el botón hacia abajo allí. 72 00:05:42,140 --> 00:05:44,420 Quiero activar la selección en el controlador del mapa, 73 00:05:44,660 --> 00:05:46,490 así que eso es lo que hago. 74 00:05:46,520 --> 00:05:49,790 Ahora, el controlador de selección en el mapa simplemente debe ir a la pantalla del mapa 75 00:05:49,790 --> 00:05:56,700 a la derecha, por lo que allí podemos decir accesorios. navegación. navegar por el mapa y eso es todo para el segundo. 76 00:05:56,720 --> 00:06:01,760 Entonces, si ahora guardamos esto, deberíamos poder llegar a este mapa interactivo de pantalla completa donde todavía no podemos 77 00:06:01,760 --> 00:06:04,140 seleccionar un lugar pero al menos podemos verlo. 78 00:06:04,160 --> 00:06:09,500 Entonces, si hago clic en el signo más aquí y luego elijo en el mapa, aparece 79 00:06:09,600 --> 00:06:15,930 un error, ¿por qué es eso? Bueno, eso no tiene ninguna relación con los módulos nativos. Quizás recuerde que el accesorio de navegación solo 80 00:06:15,930 --> 00:06:20,700 está disponible en componentes que se cargan directamente como pantallas que, por supuesto, el selector de ubicación 81 00:06:20,700 --> 00:06:22,140 no tiene. Ahora hay 82 00:06:22,140 --> 00:06:23,750 varias soluciones alternativas, habría un 83 00:06:23,760 --> 00:06:26,070 componente de orden superior que podemos usar, también 84 00:06:26,080 --> 00:06:29,910 podemos instalar un paquete de ganchos específicos de navegación React, pero aquí tomaré un 85 00:06:30,360 --> 00:06:35,430 enfoque simple y me aseguraré de tener un accesorio de navegación en el selector de ubicación por voy a 86 00:06:35,760 --> 00:06:39,720 la nueva pantalla de lugar, que es donde uso el selector de ubicación y allí 87 00:06:39,960 --> 00:06:45,600 configuraré este accesorio de navegación y los accesorios de avance. navegación que tengo disponible aquí porque este es 88 00:06:45,600 --> 00:06:49,170 un componente cargado directamente a través de un navegador, así que ahora 89 00:06:49,170 --> 00:06:54,960 solo estoy reenviando el acceso a mis accesorios de navegación. Y con eso, si ahora volvemos y hacemos clic 90 00:06:55,680 --> 00:07:00,300 en esto, cargamos este mapa aquí o al menos una pantalla de mapa, pero 91 00:07:00,320 --> 00:07:01,740 ¿dónde está el mapa? 92 00:07:01,820 --> 00:07:09,290 Bueno, el mapa es invisible porque, y eso es importante, para su mapa necesita agregar un 93 00:07:09,290 --> 00:07:15,130 estilo y aquí, agregaré estilos. map y puede ser un estilo muy simple, pero solo necesita 94 00:07:15,140 --> 00:07:18,520 definir qué tan grande debería ser porque, de forma predeterminada, no ocupará ningún espacio. 95 00:07:18,560 --> 00:07:24,410 Entonces, simplemente estableciendo flex en uno aquí y diciéndole que debería ocupar todo el espacio que tiene, simplemente haciendo 96 00:07:24,410 --> 00:07:26,840 eso, se asegurará de ver un mapa. 97 00:07:26,840 --> 00:07:35,360 Ahora con eso, si haces clic en esto, aquí está nuestro mapa que se está cargando. Ahora también vale la pena señalar, en iOS usas automáticamente Apple 98 00:07:35,450 --> 00:07:40,490 Maps, aunque también puedes usar Google Maps allí si lo deseas, los documentos 99 00:07:40,490 --> 00:07:44,680 oficiales te dicen cómo, en Android siempre usas google maps. 100 00:07:44,690 --> 00:07:46,820 Entonces, si hago clic en elegir en el 101 00:07:46,910 --> 00:07:53,430 mapa, también veremos que una vez que cargamos esa nueva pantalla, aquí está. Ahora, por supuesto, también podemos ir a esa pantalla haciendo clic 102 00:07:53,430 --> 00:07:55,290 en nuestra vista previa aquí, eso 103 00:07:55,350 --> 00:07:56,580 es lo que 104 00:07:56,580 --> 00:08:00,500 configuramos correctamente, por lo que también funciona, por supuesto, también funciona en iOS. 105 00:08:00,540 --> 00:08:05,940 Y, por cierto, la animación aquí no es súper suave, en un dispositivo real lo será, así que 106 00:08:05,940 --> 00:08:09,300 eso no es un problema, solo está aquí en el emulador. 107 00:08:09,300 --> 00:08:14,040 Entonces con eso tenemos nuestro mapa aquí y en este mapa, podemos desplazarnos. Nuevamente, en el simulador puede ser un 108 00:08:14,040 --> 00:08:16,620 poco pequeño, en un dispositivo real no lo será. 109 00:08:16,620 --> 00:08:21,090 Entonces, aquí puede desplazarse, también podrá pellizcar y hacer zoom más adelante, para que pueda hacer todo 110 00:08:21,090 --> 00:08:23,150 eso y con eso, veremos el mapa. 111 00:08:23,220 --> 00:08:27,570 Ahora el mapa es utilizable pero, por supuesto, no podemos elegir un lugar allí todavía, así que eso 112 00:08:27,600 --> 00:08:29,430 es lo siguiente que tendremos que cambiar.