Para mostrar esto en un mapa, tenemos este componente de pantalla de mapa que actualmente solo tiene contenido ficticio y
ahora necesitamos poder representar un mapa interactivo y para esto, la exposición nuevamente nos tiene cubiertos.
Allí encontrará el paquete de
vista de mapa.
Ahora, esto detrás de escena usa un paquete llamado React Native maps que también puede usar en aplicaciones que
no son expo, por cierto muchos de estos paquetes pueden usarse en aplicaciones que no son
expo y eso es algo a lo que volveré en las aplicaciones de construcción
sin el módulo de exposición, pero por ahora simplemente podemos instalarlo convenientemente ejecutando este comando y esto
instalará el paquete de mapas React Native
y luego podemos usarlo como lo vemos aquí en este ejemplo.
Por cierto, también consulte la documentación oficial en este enlace para ver más ejemplos de uso allí, porque
allí puede aprender todo sobre cómo usar este paquete,
algunos ejemplos también se muestran aquí en este módulo, por supuesto.
Entonces, ejecutemos expo install react-native-maps para instalar este paquete aquí y esto
nos permitirá usar varios componentes que representan mapas interactivos.
Así que esperemos a que eso termine y con eso terminado, en el componente de pantalla del mapa, podemos comenzar a usar ese
mapa.
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
instalar y que nos permitirá representar un mapa en la pantalla.
Ahora, ¿cómo funciona eso?
Bueno, vamos a nuestra pantalla de mapa y en lugar de devolver esta vista aquí, devolveré una vista
de mapa como esa.
Ahora, la vista del mapa puede ser una etiqueta
de cierre automático por ahora, luego también podemos agregar algunos marcadores allí, pero por ahora solo preséntelo así y
ahora necesita configurar esta vista del mapa. Para ser precisos, necesita
un accesorio de región que le indique dónde debe enfocarse cuando se carga, de modo que en qué
parte del mapa o en qué parte del mundo debe enfocarse cuando se carga.
Así que necesitamos crear una región así y la almacenaré en una región de mapa con
nombre constante y una región es en realidad un objeto con cuatro propiedades y hay
que nombrarlas así: latitud y no
lat, pero realmente latitud escrita, longitud, latitudDelta y longitudDelta.
Los deltas básicamente establecen el factor de zoom porque esto describe cuánto espacio puede ver alrededor del
centro que describe con estos dos puntos.
Entonces, eso describe un punto, junto con los
dos deltas, describe una superficie.
Así que ahora aquí, podemos comenzar con algunos valores ficticios
antes de que luego nos aseguremos de que podamos rellenar previamente.
Así que aquí, estableceré esto en un valor ficticio de 37. 78 y -122. 43 que
está en el Área de la Bahía alrededor de la sede de Google y
aquí, latitudeDelta tomará 0. 0922 y luego 0. 0421, descubrí que
esto funciona bastante bien como región.
Por supuesto, puede experimentar con estos números, pero al final, pase esta región del mapa aquí.
Ahora, esto debería mostrar un mapa en la pantalla, ahora solo
necesitamos poder alcanzarlo y para eso me
permite volver al selector de ubicación y quiero llegar a él de dos maneras diferentes: una es
con la ayuda de un botón que aún no agregué. Además del botón para obtener la ubicación del
usuario, quiero tener un segundo botón que debería estar junto al primero, así que agregaré una vista para
envolver ambos y luego moveré este botón aquí y tendré un segundo botón allí
y este botón generalmente se configurará de la misma manera, pero diré elegir en el mapa y, por supuesto, activaré un método
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
aquí y
esa es una forma de seleccionar esto. La otra forma de seleccionar esto o ir
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.
Le daré un identificador de estilo de acciones y luego allí, las acciones se pueden configurar de una manera
relativamente sencilla.
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
espacio para distribuir el espacio libre disponible alrededor de ambos botones, tomaré un ancho del
100% para esta fila y eso es todo.
Ahora con eso, tengo mis botones
aquí, ahora necesitamos asegurarnos de que también podemos tocar la vista previa del mapa y para eso, déjenme
ir a la vista previa del mapa y en realidad envolver esto, no en una vista sino en un componente táctil y aquí
Solo usaré la opacidad táctil, por supuesto, también podría optar por otros componentes táctiles diferentes
según
la plataforma en la que se esté ejecutando, quiero mantener esto relativamente sencillo, así que reemplazaré esta vista aquí con
opacidad táctil, tengo
mi estilo aquí, está bien, pero por supuesto también tengo el controlador onPress y allí, quiero activar una
función que espero obtener desde el exterior a través de accesorios.
También lo llamaré en onPress, pero podrías darle a este accesorio el nombre que quieras.
Esto ahora nos permite agregar un accesorio onPress en la vista previa del
mapa, por lo que aquí, en el selector de ubicación, puedo escuchar onPress en la vista previa del mapa y, por supuesto,
quiero activar la misma función que cuando hago clic en el botón hacia abajo allí.
Quiero activar la selección en el controlador del mapa,
así que eso es lo que hago.
Ahora, el controlador de selección en el mapa simplemente debe ir a la pantalla del mapa
a la derecha, por lo que allí podemos decir accesorios. navegación. navegar por el mapa y eso es todo para el segundo.
Entonces, si ahora guardamos esto, deberíamos poder llegar a este mapa interactivo de pantalla completa donde todavía no podemos
seleccionar un lugar pero al menos podemos verlo.
Entonces, si hago clic en el signo más aquí y luego elijo en el mapa, aparece
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
está disponible en componentes que se cargan directamente como pantallas que, por supuesto, el selector de ubicación
no tiene. Ahora hay
varias soluciones alternativas, habría un
componente de orden superior que podemos usar, también
podemos instalar un paquete de ganchos específicos de navegación React, pero aquí tomaré un
enfoque simple y me aseguraré de tener un accesorio de navegación en el selector de ubicación por voy a
la nueva pantalla de lugar, que es donde uso el selector de ubicación y allí
configuraré este accesorio de navegación y los accesorios de avance. navegación que tengo disponible aquí porque este es
un componente cargado directamente a través de un navegador, así que ahora
solo estoy reenviando el acceso a mis accesorios de navegación. Y con eso, si ahora volvemos y hacemos clic
en esto, cargamos este mapa aquí o al menos una pantalla de mapa, pero
¿dónde está el mapa?
Bueno, el mapa es invisible porque, y eso es importante, para su mapa necesita agregar un
estilo y aquí, agregaré estilos. map y puede ser un estilo muy simple, pero solo necesita
definir qué tan grande debería ser porque, de forma predeterminada, no ocupará ningún espacio.
Entonces, simplemente estableciendo flex en uno aquí y diciéndole que debería ocupar todo el espacio que tiene, simplemente haciendo
eso, se asegurará de ver un mapa.
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
Maps, aunque también puedes usar Google Maps allí si lo deseas, los documentos
oficiales te dicen cómo, en Android siempre usas google maps.
Entonces, si hago clic en elegir en el
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
en nuestra vista previa aquí, eso
es lo que
configuramos correctamente, por lo que también funciona, por supuesto, también funciona en iOS.
Y, por cierto, la animación aquí no es súper suave, en un dispositivo real lo será, así que
eso no es un problema, solo está aquí en el emulador.
Entonces con eso tenemos nuestro mapa aquí y en este mapa, podemos desplazarnos. Nuevamente, en el simulador puede ser un
poco pequeño, en un dispositivo real no lo será.
Entonces, aquí puede desplazarse, también podrá pellizcar y hacer zoom más adelante, para que pueda hacer todo
eso y con eso, veremos el mapa.
Ahora el mapa es utilizable pero, por supuesto, no podemos elegir un lugar allí todavía, así que eso
es lo siguiente que tendremos que cambiar.