1
00:00:02,530 --> 00:00:07,540
Bueno, para llegar a nuestras otras pantallas, necesitamos algo en lo que podamos hacer clic, que podamos tocar.

2
00:00:07,600 --> 00:00:12,130
Más tarde tendremos nuestra cuadrícula de categorías aquí y trabajaremos en esto también en este módulo,

3
00:00:12,220 --> 00:00:15,990
pero solo para comenzar con la navegación, agregaré un botón, así que

4
00:00:16,030 --> 00:00:21,850
en la pantalla de categorías donde tengo este texto, quiero agregar un botón que puedo tocar para ir a la

5
00:00:21,850 --> 00:00:23,510
pantalla de categoría de comidas.

6
00:00:23,980 --> 00:00:34,440
Así que aquí, agregaré este botón React Native, el que está incorporado y estableceré un título para ir a las comidas y cuando

7
00:00:34,600 --> 00:00:41,630
presionamos este botón, quiero activar una función que realmente me lleve a la pantalla de comidas

8
00:00:41,660 --> 00:00:42,890
de categoría.

9
00:00:42,890 --> 00:00:45,610
Ahora configuramos la pantalla de

10
00:00:45,620 --> 00:00:53,040
comidas de categoría aquí, pero ¿cómo podemos ir ahora? Bueno, para esto, es importante saber que cualquier componente que cargó con

11
00:00:53,040 --> 00:01:00,360
la ayuda de la navegación React obtiene un accesorio especial que se pasa automáticamente, por lo que cualquier componente asignado a uno de sus

12
00:01:00,360 --> 00:01:02,550
identificadores de pantalla aquí, por lo

13
00:01:02,550 --> 00:01:09,390
que en este caso estos tres componentes, obtendrán el apoyo especial Los componentes anidados allí no lo obtienen automáticamente,

14
00:01:09,390 --> 00:01:14,850
solo los componentes de nivel superior que asignó a los identificadores en sus navegadores.

15
00:01:14,850 --> 00:01:16,800
Así que es un accesorio especial del que estoy

16
00:01:16,800 --> 00:01:17,810
hablando, echemos un vistazo.

17
00:01:17,820 --> 00:01:23,790
Entonces, aquí en accesorios, podemos extraerlo y simplemente comencemos por los accesorios de registro de la consola aquí, para que

18
00:01:23,790 --> 00:01:27,510
podamos tener una idea y por ahora para que no tengamos un error,

19
00:01:27,510 --> 00:01:30,480
simplemente pasaré una función vacía aquí a onPress .

20
00:01:30,480 --> 00:01:33,600
Así que guardemos esto y veamos qué hay dentro de los accesorios.

21
00:01:33,690 --> 00:01:39,660
Esto se vuelve a cargar, tenemos el botón que no hace nada y aquí en la consola, de hecho, vemos que los accesorios

22
00:01:39,720 --> 00:01:40,800
no están vacíos.

23
00:01:40,800 --> 00:01:42,030
Este es nuestro

24
00:01:42,030 --> 00:01:48,400
objeto de accesorios y allí tenemos un accesorio de navegación que en sí mismo es un objeto

25
00:01:48,420 --> 00:01:58,980
que tiene algunas acciones, está bien, pero que también tiene, por ejemplo, pop, push, replace, reset y una función de navegación, por lo que hay un montón de

26
00:01:58,980 --> 00:02:03,090
funciones allí, funciones que nos ayudan a moverse en nuestra aplicación.

27
00:02:03,450 --> 00:02:09,670
También tiene un accesorio de pantalla, por lo que nuestro accesorio tiene accesorios de pantalla que podemos ignorar por ahora.

28
00:02:09,690 --> 00:02:17,160
Entonces, esto que hay dentro de los accesorios y este accesorio de navegación, esta parte de navegación que está

29
00:02:17,520 --> 00:02:18,680
allí, realmente

30
00:02:18,690 --> 00:02:25,350
nos ayuda, así que este accesorio de navegación. Nos ayuda aquí porque cuando presionamos este botón y lo hago

31
00:02:25,370 --> 00:02:30,270
con una función de flecha en línea aquí, por supuesto, podría tener una función separada que

32
00:02:30,270 --> 00:02:32,010
cree y que luego asigne

33
00:02:32,010 --> 00:02:35,430
a onPress, esto nos ayuda y esto puede usarse para navegar

34
00:02:35,490 --> 00:02:42,210
Entonces, en la navegación de accesorios, la navegación es este accesorio especial que estamos obteniendo por React navigation porque cargamos

35
00:02:42,210 --> 00:02:46,390
este componente de pantalla de categorías con la ayuda de nuestro navegador

36
00:02:46,740 --> 00:02:50,900
aquí, este accesorio de navegación especial tiene un método de navegación y

37
00:02:50,910 --> 00:02:53,040
este es su método principal,

38
00:02:53,040 --> 00:03:01,620
el más importante método para moverse con la ayuda de React navigation. ¿Cómo funciona navegar?

39
00:03:02,490 --> 00:03:12,040
Navegar toma un objeto como argumento y en este objeto, puede configurar el nombre de la ruta a la que

40
00:03:12,040 --> 00:03:13,150
desea navegar.

41
00:03:13,240 --> 00:03:19,720
Entonces, pasa una propiedad de nombre de ruta en este objeto que pasa para navegar y ahora es importante, el nombre

42
00:03:19,720 --> 00:03:25,540
de ruta que especifique aquí debe ser uno de los tres nombres de ruta que configuré aquí.

43
00:03:25,720 --> 00:03:31,450
Ahora los nombres de ruta son los identificadores que muestra que eligió delante de estos dos puntos, por lo que los nombres de propiedad

44
00:03:31,450 --> 00:03:34,420
en este objeto que pasó para crear el navegador de pila.

45
00:03:34,420 --> 00:03:36,660
Estos son sus nombres de ruta

46
00:03:36,670 --> 00:03:42,900
y esto es lo que ahora puede usar para navegar. Entonces, aquí quiero ir a la categoría de comidas,

47
00:03:42,900 --> 00:03:44,690
este es el nombre

48
00:03:44,690 --> 00:03:48,340
de ruta que quiero usar, por lo tanto, aquí, apunto a

49
00:03:48,410 --> 00:03:56,000
la categoría de comidas pero no de esta manera, esto en Javascript buscaría una variable de categoría de comidas, en lugar de una

50
00:03:56,180 --> 00:04:02,450
cadena llamada comidas de categoría porque esto básicamente le dirá a Javascript y React navigation al final que desea

51
00:04:02,450 --> 00:04:08,470
ir a la ruta que tiene el nombre de comidas de categoría y esa es esta ruta aquí.

52
00:04:08,470 --> 00:04:10,720
Entonces, así es como puedes ir allí.

53
00:04:13,730 --> 00:04:21,530
Si ahora guardamos esto y hacemos clic en ir a las comidas aquí, verá que vamos a la pantalla de comidas, sacamos esta

54
00:04:21,530 --> 00:04:27,020
bonita animación de la caja, obtenemos este botón de retroceso que se ve exactamente como esperamos

55
00:04:27,020 --> 00:04:33,650
que se vea iOS y todo eso funciona de inmediato sin ningún trabajo adicional, sin verificación, sin código de

56
00:04:33,650 --> 00:04:38,890
animación manual, lo sacamos de la caja gracias a la biblioteca de navegación React.

57
00:04:38,990 --> 00:04:45,800
Entonces, con esto, podemos ir y volver a nuestra pantalla de comida, a la pantalla de categoría de comida y luego a

58
00:04:45,800 --> 00:04:52,130
la pantalla de categoría y esto también funciona en Android. Allí obtenemos la navegación de enrutamiento específica de Android que

59
00:04:52,400 --> 00:04:57,620
se ve un poco diferente a la de iOS, es la animación de navegación que esperaría en Android,

60
00:04:57,620 --> 00:05:01,550
por supuesto, también puede usar el botón de retroceso del dispositivo para luego regresar.

61
00:05:01,550 --> 00:05:08,600
Así es como puede navegar a una pantalla diferente y tenga en cuenta que navegar, por supuesto, no

62
00:05:08,600 --> 00:05:15,530
dice nada sobre la dirección que queremos ir, no le dice a React navigation si debe reproducir

63
00:05:15,530 --> 00:05:22,490
esa animación hacia adelante o hacia atrás . React navigation detecta esto automáticamente porque, bajo el capó, gestiona

64
00:05:22,550 --> 00:05:29,120
esta pila de páginas de las que estaba hablando, esta pila de pantallas y en esta pila, en este

65
00:05:29,120 --> 00:05:35,060
momento cuando iniciamos la aplicación, solo tenemos la pantalla de categoría, pero cuando presiono este botón ,

66
00:05:35,420 --> 00:05:42,050
navegar al final le dice a React navigation que, dado que estamos haciendo esto dentro de un componente que

67
00:05:42,050 --> 00:05:47,570
se cargó con un navegador de pila, queremos navegar a una pantalla diferente que se debe

68
00:05:47,600 --> 00:05:53,810
presionar en la parte superior de la pila. Este es simplemente el comportamiento predeterminado y, por lo tanto, sabe

69
00:05:53,840 --> 00:05:59,690
que quiere avanzar porque se empujó una nueva ruta, lo que significa que se agrega a la pila, queremos avanzar y

70
00:05:59,690 --> 00:06:06,080
cuando hacemos clic en el botón Atrás que agrega automáticamente, saca esta pantalla de la pila y, dado que elimina algo de la

71
00:06:06,170 --> 00:06:10,700
pila, sabe que debería reproducir la animación posterior. Así que eso es lo que

72
00:06:10,700 --> 00:06:14,870
sucede detrás de escena, realmente no tienes que preocuparte por eso y eso

73
00:06:14,960 --> 00:06:20,330
es lo bueno, solo quiero que sepas que eso, que React navigation está haciendo el trabajo

74
00:06:20,330 --> 00:06:27,980
pesado por ti y maneja esta pila de pantalla y las animaciones correspondientes que necesita, por lo tanto, debajo del capó para usted.

75
00:06:28,120 --> 00:06:32,990
De acuerdo, eso nos permite ir y venir o avanzar y retroceder.

76
00:06:32,990 --> 00:06:39,260
Ahora su desafío para la próxima conferencia, donde lo haremos juntos, es que usted también hará lo mismo en la

77
00:06:39,260 --> 00:06:44,270
pantalla de la categoría de comida y se asegurará de que también podamos ir a

78
00:06:44,270 --> 00:06:47,990
la pantalla MealDetailScreen desde allí. No debería ser demasiado difícil, en la próxima conferencia, lo haremos juntos.