1
00:00:02,230 --> 00:00:12,550
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

2
00:00:12,550 --> 00:00:19,620
y usar el formulario de función allí, para que tengamos acceso a este navegador, ese objeto con

3
00:00:20,070 --> 00:00:25,500
el objeto de navegación y allí , Quiero devolver mi objeto de configuración.

4
00:00:25,500 --> 00:00:28,070
Podría agregar un título de encabezado, pero en realidad estoy

5
00:00:28,200 --> 00:00:32,040
contento sin uno, pero quiero establecer el encabezado aquí y ahora es importante, aquí puede usar los

6
00:00:32,190 --> 00:00:39,960
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é

7
00:00:40,350 --> 00:00:46,080
de que lo haya importado. Renunciaré un texto aquí donde solo diré

8
00:00:46,330 --> 00:00:51,720
guardar y, por supuesto, también podría agregar una verificación de plataforma para poner

9
00:00:51,720 --> 00:00:53,050
esto en

10
00:00:53,130 --> 00:01:02,510
mayúsculas en Android si lo desea, solo diré guardar así y luego agregaré un estilo aquí donde Agregué el estilo de texto de

11
00:01:02,510 --> 00:01:09,050
mi botón de encabezado y, alrededor de eso, quiero tener una vista táctil, así que usaré

12
00:01:09,050 --> 00:01:15,770
aquí la opacidad táctil, por lo que también debe importar, no desde allí, sino desde React Native,

13
00:01:15,770 --> 00:01:24,050
por lo que se debe importar la opacidad táctil de React Native y con eso importado, podemos ajustar esto alrededor

14
00:01:24,050 --> 00:01:31,770
de este texto para hacer nuestros propios botones, por así decirlo, y allí también, quiero agregar un estilo y

15
00:01:31,770 --> 00:01:40,270
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

16
00:01:40,270 --> 00:01:46,780
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

17
00:01:46,780 --> 00:01:53,440
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

18
00:01:53,440 --> 00:01:58,060
y en el texto del botón de encabezado aquí, por supuesto, está arriba a usted lo que desea

19
00:01:58,060 --> 00:02:05,920
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

20
00:02:05,920 --> 00:02:11,440
debe diferir, ya que está en el encabezado que tiene un fondo sólido en Android pero no

21
00:02:11,500 --> 00:02:19,960
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

22
00:02:19,960 --> 00:02:26,550
estableceré en blanco y, de lo contrario, lo estableceré en Colores. primaria y para eso,

23
00:02:26,620 --> 00:02:32,610
como siempre, asegúrese de importar sus colores constantes desde allí.

24
00:02:32,690 --> 00:02:38,180
Así que ahora tenemos el botón Guardar, cuando presionamos el botón Guardar, quiero activar una función que debe definirse

25
00:02:38,180 --> 00:02:43,370
en el componente y eso también es algo que hicimos varias veces en el curso, le mostré cómo

26
00:02:43,370 --> 00:02:50,360
puede comunicarse entre su componente y también sus opciones de navegación aquí. Por lo tanto, esencialmente podemos agregar una nueva función

27
00:02:50,390 --> 00:03:00,090
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

28
00:03:00,110 --> 00:03:05,100
y para eso, podemos usar el buen gancho de efecto de uso anterior

29
00:03:05,100 --> 00:03:12,150
y use la devolución de llamada para evitar este bucle infinito si lo recuerda y, por lo tanto, podemos

30
00:03:12,150 --> 00:03:21,520
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

31
00:03:21,520 --> 00:03:32,600
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

32
00:03:32,610 --> 00:03:39,390
a esta función, a este parámetro o con este parámetro a mis encabezados y el efecto de uso

33
00:03:39,390 --> 00:03:46,590
depende, por supuesto, de la función de controlador de ubicación de selección de guardado, por lo que lo agregaré como

34
00:03:46,590 --> 00:03:55,040
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

35
00:03:55,160 --> 00:04:00,130
de esta página y regresar, así que aquí puedo usar la navegación de

36
00:04:00,230 --> 00:04:05,630
accesorios, retrocedo y modificaremos esto en un segundo, pero por ahora, nosotros puede hacer esto

37
00:04:06,940 --> 00:04:13,420
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

38
00:04:13,450 --> 00:04:18,180
que tenemos que usar mediante el uso de parámetros para actualizar el componente en el que

39
00:04:18,370 --> 00:04:24,280
ya estamos, en realidad agregaré una matriz vacía aquí como una dependencia, para que esta función no se reconstruya efectivamente

40
00:04:24,310 --> 00:04:25,420
en este momento.

41
00:04:25,480 --> 00:04:30,790
Entonces, con eso, podemos extraer este parámetro de ubicación de guardado en nuestro encabezado.

42
00:04:30,790 --> 00:04:41,190
Entonces, aquí, quiero señalar mi función de guardar que obtengo con navData. navegación. getParam apuntando al identificador de ubicación de

43
00:04:41,190 --> 00:04:48,480
guardado y luego la función de guardado es la función que conecto al controlador onPress en

44
00:04:48,480 --> 00:04:50,050
la opacidad táctil.

45
00:04:50,070 --> 00:04:59,030
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

46
00:04:59,060 --> 00:05:00,710
en el

47
00:05:00,740 --> 00:05:08,210
mapa y si ahora hago clic en guardar, simplemente debería regresar y lo hace.

48
00:05:08,240 --> 00:05:13,280
Eso funciona, pero por supuesto en este momento, no estoy guardando ninguna ubicación, no estoy usando ninguna ubicación, ese es

49
00:05:13,280 --> 00:05:15,080
el siguiente paso y para eso

50
00:05:15,080 --> 00:05:21,110
necesitamos pasar la ubicación que el usuario seleccionó a la pantalla anterior. Con retroceder, eso es relativamente difícil, pero en

51
00:05:21,110 --> 00:05:25,970
su lugar podemos usar un patrón que realmente no había usado antes en

52
00:05:26,540 --> 00:05:34,010
este curso, también puedo usar navegar aquí para luego regresar. Puedo navegar a mi nueva pantalla de lugar con el nuevo identificador de

53
00:05:34,070 --> 00:05:41,810
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

54
00:05:41,810 --> 00:05:42,990
es una pila

55
00:05:43,070 --> 00:05:48,260
de pantallas y yo Estoy en una pantalla en la parte superior de la nueva pantalla de lugar,

56
00:05:48,290 --> 00:05:53,040
esto en realidad no empujará esta nueva pantalla de lugar en la parte superior de la pantalla

57
00:05:53,270 --> 00:05:56,020
existente, podríamos forzar esto presionando pero no quiero, en

58
00:05:56,030 --> 00:06:03,890
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

59
00:06:04,040 --> 00:06:12,980
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

60
00:06:12,980 --> 00:06:18,320
como una dependencia para usar la devolución de llamada para que esta función se vuelva a

61
00:06:18,650 --> 00:06:23,900
crear cuando tengamos una nueva ubicación seleccionada y quiero asegurarme de que tenemos una ubicación

62
00:06:23,900 --> 00:06:30,800
aquí , así que comprobaré si la ubicación seleccionada o, para ser precisos, si no tenemos una, entonces si esto

63
00:06:30,830 --> 00:06:32,300
no está definido,

64
00:06:32,330 --> 00:06:37,580
lo que significa que el usuario aún no ha elegido una, entonces regresaré y no

65
00:06:37,820 --> 00:06:44,750
continuaré y también podemos mostrar Una alerta aquí si queremos. Ahora no haré eso aquí, pero podrías mostrar

66
00:06:44,780 --> 00:06:46,780
una alerta si quisieras.

67
00:06:46,950 --> 00:06:52,110
Así que ahora solo podremos hacer clic en Guardar si tenemos una ubicación elegida, pero si

68
00:06:52,110 --> 00:06:54,740
lo hacemos, la configuraremos en los parámetros de nuestra

69
00:06:54,750 --> 00:06:57,250
acción de retroceso. Intentemos, vamos allí, haga

70
00:06:57,250 --> 00:07:03,250
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

71
00:07:03,280 --> 00:07:04,630
ningún lugar todavía, así que

72
00:07:04,630 --> 00:07:09,160
si hago clic en guardar, no pasa nada. Sin embargo, si elijo una ubicación y hago clic en Guardar, vuelvo.

73
00:07:09,970 --> 00:07:17,560
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

74
00:07:17,590 --> 00:07:18,890
allí, así que eso

75
00:07:18,910 --> 00:07:20,290
es lo siguiente que haré.