1
00:00:02,710 --> 00:00:07,840
Ahora echamos un vistazo a la navegación básica con navegar y navegar es su herramienta más importante,

2
00:00:08,020 --> 00:00:13,720
pero en realidad al estar dentro de una pantalla, de un componente cargado con la ayuda de un navegador

3
00:00:13,870 --> 00:00:15,950
de pila, tiene alternativas para navegar.

4
00:00:15,970 --> 00:00:22,450
También puede usar push en lugar de navegar, aunque eso no toma un objeto Javascript, sino que toma solo el

5
00:00:22,450 --> 00:00:24,240
nombre de la ruta aquí,

6
00:00:24,250 --> 00:00:30,280
en este caso, las comidas de categoría como primer argumento y con eso, obtendrá el mismo comportamiento que antes.

7
00:00:30,610 --> 00:00:33,200
La pregunta, por supuesto, es por qué usarías esto.

8
00:00:33,250 --> 00:00:37,960
Número uno, es un poco más corto que navegar porque no estás pasando

9
00:00:37,960 --> 00:00:39,440
un objeto, pero

10
00:00:39,490 --> 00:00:47,880
esa no es la razón principal, sino que usar push aquí puede ser útil si quieres ir a una página donde ya estás.

11
00:00:47,960 --> 00:00:49,100
Ahora déjame mostrarte lo que quiero decir.

12
00:00:49,120 --> 00:00:53,560
Si revierto esto y navego a categorías aquí, entonces a la pantalla de categoría,

13
00:00:53,590 --> 00:00:59,650
que es la pantalla en la que ya estoy. Si hago eso con navegar, lo que verás es

14
00:00:59,800 --> 00:01:02,690
que no pasa nada si toco esto.

15
00:01:02,930 --> 00:01:10,760
Ahora, si uso push en su lugar y, por lo tanto, solo paso categorías como mi primer argumento porque así es como funciona push,

16
00:01:10,760 --> 00:01:16,490
verás que ahora esto funciona y puedo ir a la misma pantalla una y otra vez y se

17
00:01:16,490 --> 00:01:19,810
empuja a la misma pila sobre y otra vez

18
00:01:19,820 --> 00:01:26,030
Ahora, por supuesto, te preguntarás por qué querría presionar la pantalla en la que ya estoy de nuevo.

19
00:01:26,030 --> 00:01:32,150
Ahora, en muchas aplicaciones, es posible que no necesite esto, pero supongamos que está creando una aplicación como Dropbox donde

20
00:01:32,150 --> 00:01:33,370
tiene carpetas entre

21
00:01:33,380 --> 00:01:35,440
las que pueden navegar sus usuarios, si

22
00:01:35,570 --> 00:01:38,330
está en una carpeta, desea ir a otra carpeta.

23
00:01:38,330 --> 00:01:44,960
Ahora, cada carpeta es técnicamente la misma pantalla de carpeta, solo que con contenido diferente cargado. En tal caso, es posible que desee ir de la carpeta

24
00:01:44,960 --> 00:01:50,720
A a la B que usa el mismo componente, la misma pantalla al final pero con contenido diferente,

25
00:01:50,720 --> 00:01:56,540
en tal caso, puede usar la función push para poder seguir presionando esa nueva pantalla que es la

26
00:01:56,540 --> 00:02:02,580
misma pantalla en la pila y carga la misma pantalla con contenido diferente, este sería un escenario en el

27
00:02:02,600 --> 00:02:05,860
que podría necesitar esto. En esta aplicación, no

28
00:02:05,870 --> 00:02:11,720
lo necesitamos, por lo que no es necesario presionar, pero lo tiene en escenarios en los

29
00:02:11,720 --> 00:02:13,100
que la navegación

30
00:02:13,100 --> 00:02:15,830
no lo llevaría a esa pantalla, la presión

31
00:02:15,830 --> 00:02:23,630
siempre lo hará cuando esté dentro de un navegador de pila. Sin embargo, aquí revertiré esto para navegar, que toma un objeto con un nombre de

32
00:02:23,630 --> 00:02:31,800
ruta que luego apunta a categorías porque aquí, absolutamente no necesitamos empuje, eso es comidas de categoría. Esto servirá para esta aplicación, ahora también tiene otras

33
00:02:31,800 --> 00:02:33,330
opciones de

34
00:02:33,330 --> 00:02:36,370
navegación explícitas, digamos desde la pantalla

35
00:02:36,420 --> 00:02:39,600
de comida de categoría, desea poder regresar.

36
00:02:39,840 --> 00:02:45,330
Bueno, por supuesto, podemos regresar con la ayuda de este botón de retroceso, pero tampoco es tan

37
00:02:45,360 --> 00:02:51,140
atípico que en algunas aplicaciones, hay algo más que sus usuarios pueden hacer a donde quieran llevarlos, por

38
00:02:51,150 --> 00:02:55,890
ejemplo, digamos está en una página donde puede configurar algunas configuraciones y cuando hace

39
00:02:55,890 --> 00:03:01,180
clic en el botón Guardar, desea guardar esa configuración y también desea salir de la pantalla.

40
00:03:01,290 --> 00:03:07,410
Ahora, para este escenario, es posible que desee activar una navegación hacia atrás manualmente y no esperar a que

41
00:03:07,410 --> 00:03:13,260
el usuario presione el botón Atrás porque eso podría obligarlo a presionar primero un botón Guardar y luego

42
00:03:13,260 --> 00:03:17,040
regresar manualmente, lo que no La mejor experiencia de usuario.

43
00:03:17,070 --> 00:03:24,210
Así que aquí, simularé esto con solo tener un botón de retroceso aquí en nuestra pantalla, así que

44
00:03:24,210 --> 00:03:30,090
en nuestro código jsx y cuando presionamos esto, quiero poder regresar, quiero activar manualmente

45
00:03:30,090 --> 00:03:31,790
una navegación hacia atrás.

46
00:03:31,950 --> 00:03:37,740
Puede hacer esto con la ayuda del accesorio de navegación porque allí, tiene un método de retroceso al

47
00:03:37,740 --> 00:03:41,030
que puede llamar y esto hace exactamente lo que parece.

48
00:03:41,230 --> 00:03:46,380
Si guardamos esto y voy a las comidas, si hago clic en volver, reproducimos la navegación hacia atrás.

49
00:03:46,380 --> 00:03:51,960
Técnicamente, esto aparece en la pantalla en la que estamos y, por lo tanto,

50
00:03:51,960 --> 00:03:58,860
vuelve a la pantalla anterior en la pila. Como alternativa para volver, si está en un navegador de pila, también

51
00:03:58,860 --> 00:04:01,740
tiene pop que hace lo que su nombre indica, aparece

52
00:04:02,010 --> 00:04:08,730
en la pantalla actual de la pila y, como siempre ve la pantalla superior en su dispositivo, esto también reproduce la navegación hacia atrás,

53
00:04:08,730 --> 00:04:14,240
por lo que esta es una alternativa para regresar. La diferencia es que pop solo se puede usar si

54
00:04:14,240 --> 00:04:14,980
está en

55
00:04:15,090 --> 00:04:19,770
un navegador de pila, volver también está disponible en otros navegadores que usaremos más adelante en este módulo.

56
00:04:22,340 --> 00:04:27,000
A veces, también querrás volver a tu componente

57
00:04:27,140 --> 00:04:34,730
principal, digamos aquí en MealDetailScreen. Allí también podemos agregar un botón

58
00:04:34,730 --> 00:04:39,390
y en este botón aquí, quiero volver a mis

59
00:04:39,390 --> 00:04:49,090
categorías, digamos y, por lo tanto, agregaré onPress y en esta función aquí, puedo usar la navegación de accesorios,

60
00:04:49,090 --> 00:04:56,860
derecha, porque esto nos lleva de vuelta .

61
00:04:56,860 --> 00:04:59,230
Bueno, el problema con eso, por supuesto, es que me lleva de regreso, pero solo a la pantalla antes de esta pantalla, así que a la pantalla.

62
00:04:59,230 --> 00:05:03,250
Vine de. Sin embargo, quiero volver a la pantalla

63
00:05:03,250 --> 00:05:06,040
de categorías, por lo que quiero omitir dos pantallas al mismo tiempo.

64
00:05:06,250 --> 00:05:08,450
Para esto tiene pop to top, este es

65
00:05:08,560 --> 00:05:14,260
otro método al que puede llamar que simplemente emerge de todas las pantallas de la pila y lo lleva de vuelta

66
00:05:14,470 --> 00:05:15,970
a su pantalla raíz.

67
00:05:16,390 --> 00:05:21,100
Entonces, si hace clic en esto, obtenemos la animación de regreso y volvemos a nuestra pantalla raíz, que

68
00:05:21,220 --> 00:05:22,720
en este caso es la

69
00:05:22,720 --> 00:05:27,570
pantalla de categoría, por lo que es una alternativa aquí. Ahora con eso, solo hay una última

70
00:05:27,580 --> 00:05:33,780
acción de navegación posible que a veces pueda necesitar. Digamos que en la pantalla de categorías, desea ir a

71
00:05:34,050 --> 00:05:41,880
las comidas de categoría pero no desea agregarlo a la pila, sino que desea reemplazar su componente actual en la pila con él, de modo

72
00:05:41,940 --> 00:05:47,790
que todavía haya solo una pantalla en la pila, pero esa pantalla es una página nueva, eso también

73
00:05:47,790 --> 00:05:49,570
significa que no podrá

74
00:05:49,620 --> 00:05:54,630
volver a la página nueva porque la pila estaría vacía a partir de entonces, lo

75
00:05:54,630 --> 00:05:56,820
que significa que su aplicación se cierra.

76
00:05:56,820 --> 00:06:00,990
Entonces, en caso de que quiera hacer eso, puede usar replace. Reemplazar también al igual que

77
00:06:01,020 --> 00:06:09,150
la función de empuje toma solo un identificador como este y reemplazar también lo lleva a la nueva pantalla, sin embargo, no reproduce animación

78
00:06:09,150 --> 00:06:15,240
hacia adelante, en cambio, salta instantáneamente allí y no obtiene el botón de retroceso automáticamente porque la

79
00:06:15,240 --> 00:06:19,030
pila está vacía de lo contrario, este es el Solo pantalla.

80
00:06:19,200 --> 00:06:24,540
Esto podría usarse, por ejemplo, en una pantalla de inicio de sesión en la que un usuario inició sesión y una vez

81
00:06:24,540 --> 00:06:26,990
que inició sesión, el usuario no debería poder volver a la

82
00:06:27,030 --> 00:06:32,430
pantalla de inicio de sesión, así que simplemente podría reemplazar la pantalla de inicio de sesión con su sesión iniciada en pantalla con

83
00:06:32,430 --> 00:06:34,370
el perfil de usuario o algo así.

84
00:06:34,620 --> 00:06:39,930
Si aún intentas regresar, no pasa nada porque no puedes regresar, no hay

85
00:06:39,930 --> 00:06:44,390
nada más en la pila. Por lo tanto, por supuesto, reemplazar

86
00:06:44,430 --> 00:06:51,600
no es absolutamente lo que necesitamos en esta aplicación, solo quería presentar esto aquí, aunque veremos más patrones disponibles y cómo ir

87
00:06:51,630 --> 00:06:56,810
y venir entre páginas y cuándo es posible que desee reemplazar o cambiar entre pantallas así

88
00:06:56,830 --> 00:07:02,610
en todo este módulo, solo quería presentarlo ya en este punto, aún aquí, volveré a navegar con

89
00:07:02,910 --> 00:07:10,680
el nombre de la ruta apuntando a las comidas de categoría. Y con eso, tuvo una visión general de algunos de los métodos básicos de navegación

90
00:07:10,800 --> 00:07:16,230
que le permiten ir y venir entre sus pantallas. Como mencioné, por supuesto, veremos muchos patrones en

91
00:07:16,230 --> 00:07:22,500
acción a lo largo de este módulo, por ahora esto es todo y diría que con eso fuera

92
00:07:22,500 --> 00:07:30,180
del camino, es hora de agregar algo de carne a esta aplicación, asegúrese de que sea un aplicación más realista y no

93
00:07:30,330 --> 00:07:33,030
solo una aplicación ficticia como es actualmente.