Así que quiero tener un botón de guardar en mi encabezado y para eso, por supuesto, necesitamos agregar opciones de navegación en la pantalla del mapa
y usar el formulario de función allí, para que tengamos acceso a este navegador, ese objeto con
el objeto de navegación y allí , Quiero devolver mi objeto de configuración.
Podría agregar un título de encabezado, pero en realidad estoy
contento sin uno, pero quiero establecer el encabezado aquí y ahora es importante, aquí puede usar los
botones de encabezado, por supuesto, y mostrar un buen icono, pero en realidad, mostraré un texto aquí. Entonces importaré el componente de texto o me aseguraré
de que lo haya importado. Renunciaré un texto aquí donde solo diré
guardar y, por supuesto, también podría agregar una verificación de plataforma para poner
esto en
mayúsculas en Android si lo desea, solo diré guardar así y luego agregaré un estilo aquí donde Agregué el estilo de texto de
mi botón de encabezado y, alrededor de eso, quiero tener una vista táctil, así que usaré
aquí la opacidad táctil, por lo que también debe importar, no desde allí, sino desde React Native,
por lo que se debe importar la opacidad táctil de React Native y con eso importado, podemos ajustar esto alrededor
de este texto para hacer nuestros propios botones, por así decirlo, y allí también, quiero agregar un estilo y
ese estilo tendrá un identificador de botón de encabezado, digamos. Ahora, al presionar esto, quiero guardar lo que agregamos o guardar nuestra ubicación que elegimos, pero eso
es algo que haré en un segundo, por ahora vamos a diseñar esto. Entonces, allí abajo, en la hoja de estilo, para el botón de
encabezado que es esa opacidad táctil, agregaré un margen horizontal de 20 para tener un espacio alrededor del botón a la izquierda y a la derecha
y en el texto del botón de encabezado aquí, por supuesto, está arriba a usted lo que desea
agregar allí, pero agregaré un tamaño de fuente de 16, digamos, e importante, el color. Para eso, necesito la API de la plataforma porque el color
debe diferir, ya que está en el encabezado que tiene un fondo sólido en Android pero no
en iOS, puedo configurar mi color aquí, mi color de texto en Plataforma. El sistema operativo es igual a Android, así que para verificar esto y en Android lo
estableceré en blanco y, de lo contrario, lo estableceré en Colores. primaria y para eso,
como siempre, asegúrese de importar sus colores constantes desde allí.
Así que ahora tenemos el botón Guardar, cuando presionamos el botón Guardar, quiero activar una función que debe definirse
en el componente y eso también es algo que hicimos varias veces en el curso, le mostré cómo
puede comunicarse entre su componente y también sus opciones de navegación aquí. Por lo tanto, esencialmente podemos agregar una nueva función
aquí, guardar el controlador de ubicación elegido, lo que quieras nombrar y esta función o una referencia a esta función debe pasarse a las opciones de navegación
y para eso, podemos usar el buen gancho de efecto de uso anterior
y use la devolución de llamada para evitar este bucle infinito si lo recuerda y, por lo tanto, podemos
envolver esto con la devolución de llamada de uso y luego usar el efecto aquí para indicar nuestras opciones de navegación sobre esto mediante el uso
de parámetros de conjunto de navegación de accesorios y luego quiero establecer mi parámetro de ubicación de guardado aquí al controlador de ubicación de selección guardada, así que pase una referencia
a esta función, a este parámetro o con este parámetro a mis encabezados y el efecto de uso
depende, por supuesto, de la función de controlador de ubicación de selección de guardado, por lo que lo agregaré como
una dependencia aquí y importante ahora, usar la devolución de llamada aquí también tiene una variedad de dependencias porque aquí, básicamente, quiero salir
de esta página y regresar, así que aquí puedo usar la navegación de
accesorios, retrocedo y modificaremos esto en un segundo, pero por ahora, nosotros puede hacer esto
Y por lo tanto, normalmente, por supuesto, esta función de retroceso sería mi dependencia, pero para evitar un bucle infinito, con este enfoque
que tenemos que usar mediante el uso de parámetros para actualizar el componente en el que
ya estamos, en realidad agregaré una matriz vacía aquí como una dependencia, para que esta función no se reconstruya efectivamente
en este momento.
Entonces, con eso, podemos extraer este parámetro de ubicación de guardado en nuestro encabezado.
Entonces, aquí, quiero señalar mi función de guardar que obtengo con navData. navegación. getParam apuntando al identificador de ubicación de
guardado y luego la función de guardado es la función que conecto al controlador onPress en
la opacidad táctil.
Por lo tanto, esto debería activar esta función de guardar, esta función de controlador de ubicación elegida para guardar aquí. Con eso guardado si volvemos, probémoslo, vamos a elegir
en el
mapa y si ahora hago clic en guardar, simplemente debería regresar y lo hace.
Eso funciona, pero por supuesto en este momento, no estoy guardando ninguna ubicación, no estoy usando ninguna ubicación, ese es
el siguiente paso y para eso
necesitamos pasar la ubicación que el usuario seleccionó a la pantalla anterior. Con retroceder, eso es relativamente difícil, pero en
su lugar podemos usar un patrón que realmente no había usado antes en
este curso, también puedo usar navegar aquí para luego regresar. Puedo navegar a mi nueva pantalla de lugar con el nuevo identificador de
lugar configurado aquí en mi navegador de lugares y dado que ya estoy en una pantalla delante de esa nueva pantalla de lugar, no olviden que esta
es una pila
de pantallas y yo Estoy en una pantalla en la parte superior de la nueva pantalla de lugar,
esto en realidad no empujará esta nueva pantalla de lugar en la parte superior de la pantalla
existente, podríamos forzar esto presionando pero no quiero, en
cambio, volverá pero ahora mediante el uso de navegar, puedo agregar algunos parámetros aquí. Puedo agregar mi ubicación elegida y allí, señalar el
accesorio de ubicación seleccionado que, con suerte, contiene mi ubicación elegida. Ahora, como uso la ubicación seleccionada aquí y como esto cambia, agregaré esto
como una dependencia para usar la devolución de llamada para que esta función se vuelva a
crear cuando tengamos una nueva ubicación seleccionada y quiero asegurarme de que tenemos una ubicación
aquí , así que comprobaré si la ubicación seleccionada o, para ser precisos, si no tenemos una, entonces si esto
no está definido,
lo que significa que el usuario aún no ha elegido una, entonces regresaré y no
continuaré y también podemos mostrar Una alerta aquí si queremos. Ahora no haré eso aquí, pero podrías mostrar
una alerta si quisieras.
Así que ahora solo podremos hacer clic en Guardar si tenemos una ubicación elegida, pero si
lo hacemos, la configuraremos en los parámetros de nuestra
acción de retroceso. Intentemos, vamos allí, haga
clic en picK en el mapa y ahora tenga en cuenta que aún no he elegido ninguna ubicación, no he hecho clic en
ningún lugar todavía, así que
si hago clic en guardar, no pasa nada. Sin embargo, si elijo una ubicación y hago clic en Guardar, vuelvo.
Así que ahora podemos usar los datos que estamos transfiriendo desde la pantalla del mapa en nuestro selector de ubicación para actualizar la vista previa del mapa
allí, así que eso
es lo siguiente que haré.