1
00:00:02,380 --> 00:00:07,300
Así que trabajemos en portar toda nuestra lógica aquí en el navegador de aplicaciones.

2
00:00:07,300 --> 00:00:13,870
Comenzamos con esta pila ficticia aquí y eso es bueno, pero en última instancia no es lo que necesitamos.

3
00:00:13,900 --> 00:00:19,390
Ahora depende de usted hacer esa configuración, pero ya que lo hicimos básicamente en el archivo del navegador de

4
00:00:19,390 --> 00:00:20,560
la tienda antes.

5
00:00:20,560 --> 00:00:22,330
También lo seguiré haciendo allí.

6
00:00:22,360 --> 00:00:24,370
Incluso con esa nueva lógica.

7
00:00:24,370 --> 00:00:26,560
Entonces, lo que haré es un navegador de aplicaciones.

8
00:00:26,560 --> 00:00:34,190
De hecho, eliminaré mi pila aquí y eliminaré esta importación y eliminaré esto aquí. Sin

9
00:00:34,190 --> 00:00:41,290
embargo, dejaré el contenedor de navegación y restableceré esta importación, aunque finalmente cambiará esto

10
00:00:41,290 --> 00:00:42,760
un poco.

11
00:00:42,760 --> 00:00:49,420
Pero ahora pasemos al navegador de la tienda, en primer lugar, podemos eliminar esta importación de la navegación de

12
00:00:49,540 --> 00:00:50,990
reacción, no la necesitará.

13
00:00:51,100 --> 00:00:59,140
Dejemos el resto por ahora, sin embargo, en lugar de esa importación eliminada, podemos importar desde la pila de navegación

14
00:00:59,350 --> 00:01:08,870
de reacción y todo ya es desde el sorteo y desde la pila de anuncios importamos crear el navegador de pila desde el dibujo

15
00:01:08,870 --> 00:01:12,600
de barra, importamos crear el navegador de dibujo.

16
00:01:12,760 --> 00:01:17,050
Ahora podemos desplazarnos hacia abajo y podemos dejar las opciones de navegación predeterminadas aquí en realidad.

17
00:01:17,080 --> 00:01:24,070
Afortunadamente, el nombre suena y cómo generalmente configuras las cosas y lo que puedes configurar realmente no

18
00:01:24,070 --> 00:01:30,490
cambió, solo cómo aplicas la configuración cambiada y, por lo tanto, lo que definitivamente necesita

19
00:01:30,880 --> 00:01:40,770
cambiar es esta parte aquí, nuestro primer navegador de pila, por ahora duplicado y luego eliminado comenté para tener una comparación lado a lado.

20
00:01:40,770 --> 00:01:47,940
Crearé una nueva constante que nombraré el navegador de pila de productos solo para que no tengamos

21
00:01:48,420 --> 00:01:53,130
un choque de nombres y que sea realmente obvio que esto

22
00:01:53,130 --> 00:02:00,780
mantendrá una pila de páginas. pantallas y lo hacemos con crear un navegador de pila con esta función,

23
00:02:00,780 --> 00:02:09,770
lo que le mostré antes de que esta función ya no tome parámetros, en su lugar crearé una nueva constante aquí productos

24
00:02:09,890 --> 00:02:10,670
Navigator.

25
00:02:10,670 --> 00:02:14,750
Así que ahora tenemos un choque de nombres, pero esto se eliminará de todos modos.

26
00:02:14,870 --> 00:02:20,420
Y este es ahora un componente de reacción del componente funcional y podríamos bajar todo

27
00:02:20,420 --> 00:02:26,210
lo almacenado en un archivo separado solo para esta comparación lado a lado y porque teníamos

28
00:02:26,420 --> 00:02:32,390
todo en este archivo antes, ahora configuraré todos estos componentes del navegador con nuestra navegación configuración aquí

29
00:02:32,390 --> 00:02:36,480
en este único archivo dividirlo definitivamente es algo que podría considerar.

30
00:02:36,590 --> 00:02:44,450
Así que aquí está nuestro navegador de productos y ahora devolveré los productos stack navigator dot Navigator

31
00:02:44,450 --> 00:02:52,910
como aprendieron y en sus productos stack navigator dot screen y teníamos tres pantallas antes, así que replicaré

32
00:02:52,910 --> 00:02:54,860
esto dos veces.

33
00:02:54,860 --> 00:02:57,580
Entonces, ¿teníamos tres pantallas allí?

34
00:02:57,710 --> 00:03:03,730
Ahora podemos configurarlos, asignemos un nombre a la primera pantalla y será una descripción general de los productos.

35
00:03:03,980 --> 00:03:09,180
Ahora el componente que debe cargarse es nuestro componente de pantalla de resumen de productos.

36
00:03:09,200 --> 00:03:19,130
Básicamente, lo que mapeamos antes también ahora para la segunda pantalla, el nombre es el detalle del producto.

37
00:03:19,130 --> 00:03:24,530
Entonces, lo que teníamos aquí y asegúrate de mantener esos nombres para que

38
00:03:24,530 --> 00:03:31,400
toda la lógica de navegación que tienes en tu aplicación no tenga que cambiarse para que esto todavía

39
00:03:31,670 --> 00:03:37,660
funcione y aquí el componente que debe cargarse cuando queremos llegar esa pantalla es el componente

40
00:03:37,660 --> 00:03:45,770
detallado de la pantalla del producto, así como teníamos allí abajo, reformulemos eso y para la última pantalla el nombre es carrito.

41
00:03:45,860 --> 00:03:52,630
Lo que teníamos aquí y queremos ir a la pantalla del corazón así como así.

42
00:03:52,670 --> 00:03:57,920
Así que ahora configuramos esta pila de navegación con esta nueva lógica basada en componentes.

43
00:03:58,010 --> 00:04:03,620
Ahora podemos importar en el navegador de aplicaciones y para papá solo tenemos que

44
00:04:03,620 --> 00:04:11,510
agregar una palabra clave de exportación delante para que esta constante este componente se exporte aquí en este archivo y

45
00:04:11,510 --> 00:04:21,980
en el navegador de aplicaciones que ahora no importamos el navegador de la tienda, pero importamos importamos el navegador de productos recién exportados que aquí y en

46
00:04:22,310 --> 00:04:29,910
nuestro contenedor de navegación ahora podemos agregar el navegador de productos de esta manera y podemos deshacernos de la

47
00:04:29,910 --> 00:04:33,720
importación de la pantalla de información general del producto.

48
00:04:33,840 --> 00:04:35,790
Ahora de vuelta al navegador de la tienda.

49
00:04:36,030 --> 00:04:38,840
Echemos un vistazo a esas opciones.

50
00:04:38,840 --> 00:04:42,360
A continuación, las opciones de navegación que teníamos aquí en esta pila.

51
00:04:42,360 --> 00:04:45,160
Que hacemos con eso.

52
00:04:45,160 --> 00:04:52,600
Bueno, en realidad tenemos dos opciones aquí en nuestro navegador de productos en el navegador antiguo con la lógica

53
00:04:53,230 --> 00:04:55,370
anterior: el icono de hecho.

54
00:04:55,480 --> 00:05:02,800
Esta pila debe tener en el cajón que agregaremos más tarde, el segundo son nuestras opciones de navegación predeterminadas que

55
00:05:03,010 --> 00:05:07,660
deben aplicarse a todas las pantallas que forman parte de este navegador.

56
00:05:07,660 --> 00:05:12,250
Y, de hecho, también hay un tercer lugar donde configuramos cosas en el pasado.

57
00:05:12,280 --> 00:05:14,150
Y eso fue en algunas de las pantallas.

58
00:05:14,320 --> 00:05:21,680
Echemos un vistazo a nuestra pantalla de resumen del producto que hay en la carpeta de la tienda allí si nos desplazamos hacia abajo.

59
00:05:21,760 --> 00:05:28,870
Teníamos esta propiedad de opciones de navegación que agregamos al objeto funcional de la pantalla de vista general de productos y esa era una función

60
00:05:28,870 --> 00:05:33,850
en la que configuramos cosas como el título del encabezado, pero también lo que está a la

61
00:05:33,850 --> 00:05:37,630
izquierda y al conjunto derecho del encabezado ahora con esta nueva lógica.

62
00:05:37,670 --> 00:05:40,650
Ya no haces eso así.

63
00:05:40,650 --> 00:05:46,940
En cambio, podemos copiar todo este conjunto aquí.

64
00:05:47,170 --> 00:05:48,740
Entonces, todo eso podemos copiarlo.

65
00:05:48,820 --> 00:05:54,680
Podemos comentarlo aquí en el componente de pantalla e ir al componente del navegador de aplicaciones.

66
00:05:54,820 --> 00:06:00,640
Disculpe por comprar el componente del navegador donde configuramos nuestra navegación de pila y ahora

67
00:06:00,640 --> 00:06:08,830
en la pantalla donde queremos tener esas opciones podemos agregar un tercer accesorio y esa es la propiedad de opciones y dos opciones.

68
00:06:08,830 --> 00:06:16,360
Puede analizar exactamente lo que tenía en el componente antes, por lo que pasar de función hace es una función

69
00:06:16,440 --> 00:06:16,990
correcta.

70
00:06:17,050 --> 00:06:18,640
El cual recibe el

71
00:06:21,330 --> 00:06:27,900
parámetro de datos NAF que luego devuelve un objeto de configuración, el valor concreto para este parámetro será alimentado

72
00:06:27,900 --> 00:06:34,950
por la navegación de reacción y los nombres de configuración que podemos establecer aquí, las cosas que podemos configurar no han

73
00:06:34,950 --> 00:06:35,540
cambiado.

74
00:06:35,670 --> 00:06:38,550
Entonces todavía podemos configurar un título de encabezado adelante o izquierda.

75
00:06:38,550 --> 00:06:41,330
Entonces todo esto es exactamente lo mismo que aprendiste.

76
00:06:41,340 --> 00:06:43,290
Funciona exactamente de la misma manera.

77
00:06:43,350 --> 00:06:47,760
Afortunadamente ahora podríamos hacer eso aquí y comprar navegador.

78
00:06:47,760 --> 00:06:55,200
Pero, por supuesto, esto rápidamente se volvería muy grande si tuviéramos todas las configuraciones específicas

79
00:06:55,440 --> 00:06:57,630
de pantalla diferentes aquí.

80
00:06:57,630 --> 00:07:00,390
Entonces, en realidad no es lo que haré aquí.

81
00:07:00,450 --> 00:07:03,150
En cambio, veo dos opciones.

82
00:07:03,150 --> 00:07:10,170
Una es que realmente hacemos nuestra configuración desde la pantalla del navegador de la pila de productos en el componente de pantalla.

83
00:07:10,170 --> 00:07:14,250
El segundo es que simplemente mantenemos nuestras opciones allí y ese es el enfoque que seguiré.

84
00:07:14,730 --> 00:07:23,850
Entonces, en la descripción general del producto, comentaré esto nuevamente, pero ahora aquí ya no establecemos que funcione como un valor

85
00:07:23,900 --> 00:07:33,110
para el accesorio de opciones de navegación, sino que simplemente lo exportamos como una constante, una constante a la que tenemos que

86
00:07:33,110 --> 00:07:42,360
dar un nombre y yo ' Nombraré estas opciones de pantalla. Ninguna opción de pantalla contiene esta función y la exportamos por

87
00:07:42,360 --> 00:07:43,670
su nombre.

88
00:07:43,850 --> 00:07:49,360
No choca con la exportación del componente porque lo hacemos con el valor predeterminado aquí.

89
00:07:49,390 --> 00:07:57,340
Entonces, ahora exportamos su función de configuración y luego el navegador de la tienda, por lo tanto, podemos importarla, así que

90
00:07:57,340 --> 00:08:03,940
además de importar la pantalla de resumen de productos desde ese archivo, ahora también podemos combinar

91
00:08:03,970 --> 00:08:12,940
eso con una importación con nombre donde importamos a la función de opciones de pantalla y luego aquí dos opciones en esta pantalla

92
00:08:13,020 --> 00:08:17,840
Acabo de pasar un puntero a esta función, no lo ejecuto, solo lo apunté.

93
00:08:17,910 --> 00:08:24,580
Reaccionemos la navegación ejecutada por usted para que pueda encajar en el valor

94
00:08:24,610 --> 00:08:32,780
concreto de esta función de parámetros de datos NAF una vez y con esto se configura esta pantalla.

95
00:08:32,890 --> 00:08:36,490
Ahora, si guardamos ese conflicto de anuncios porque tenemos este nombre de conflicto ahí abajo.

96
00:08:36,910 --> 00:08:41,470
Entonces, para resolver esto, asegurémonos de que todos admitamos las otras opciones.

97
00:08:41,470 --> 00:08:47,560
Ahora, la opción específica de dibujar es algo que veré más adelante una vez que agreguemos un dibujo para las

98
00:08:47,560 --> 00:08:48,850
opciones de navegación predeterminadas.

99
00:08:48,850 --> 00:08:54,220
La buena noticia es que aún podemos aplicar aquellos que no tenemos que configurar todo en un nivel de pantalla.

100
00:08:54,220 --> 00:08:58,980
Si tenemos una configuración compartida que afecta a todas las pantallas de un navegador.

101
00:08:59,080 --> 00:09:05,320
¿Y cómo crees que podemos configurar opciones generales para todas estas pantallas gratuitas aquí?

102
00:09:05,320 --> 00:09:09,200
Bueno, los configuramos directamente en el navegador allí.

103
00:09:09,310 --> 00:09:15,520
También tenemos una pequeña propiedad de opciones de pantalla, por lo que no son opciones con nombre, sino opciones de pantalla.

104
00:09:15,610 --> 00:09:21,280
Pero estas son las opciones que se aplicarán a cada pantalla aquí y las opciones específicas de la

105
00:09:21,310 --> 00:09:25,820
pantalla se fusionarán con estas opciones generales al igual que antes en el curso.

106
00:09:25,830 --> 00:09:29,740
Ahora aquí pasamos nuestro objeto de opciones de navegación predeterminado.

107
00:09:29,850 --> 00:09:36,360
Entonces, este objeto allí arriba solo lo introduzco como un valor para las opciones de pantalla y eso es todo.

108
00:09:36,360 --> 00:09:41,280
Ahora podemos comentar como navegador de productos aquí y guardar todo.

109
00:09:41,360 --> 00:09:48,440
Ahora, una vez que hacemos eso, todavía no podemos ver el resultado porque en este archivo de navegador de la tienda todavía tenemos

110
00:09:48,440 --> 00:09:55,370
un montón de código que usa el navegador antiguo o la lógica del navegador anterior y eso está causando un problema aquí.

111
00:09:55,400 --> 00:10:03,710
Ahora para ver un resultado, comentaré temporalmente todo esto temporalmente y guardaré nuevamente.

112
00:10:03,750 --> 00:10:08,660
Para que esto se reconstruya y vea, ahora tenemos un error.

113
00:10:08,720 --> 00:10:14,300
Bueno, hay una cosa que realmente necesitamos ajustar y el componente de descripción general del producto en nuestro encabezado de

114
00:10:14,300 --> 00:10:16,800
dirección de opción de pantalla a la izquierda.

115
00:10:16,880 --> 00:10:25,060
Esto ahora debe ser una función aquí que devuelva nuestro marcado JSA X y lo mismo para el encabezado derecho.

116
00:10:25,070 --> 00:10:30,260
Por lo tanto, debemos convertir ambas en funciones y simplemente puede hacerlo agregando una lista de parámetros vacía y

117
00:10:30,410 --> 00:10:31,580
luego la flecha aquí.

118
00:10:31,670 --> 00:10:38,090
Nota al margen: podría aceptar el parámetro aquí si lo deseara, y eso serían accesorios porque en realidad

119
00:10:38,090 --> 00:10:43,910
ahora es un componente de reacción que encuentra aquí un valor concreto para los accesorios

120
00:10:43,910 --> 00:10:50,240
y se alimenta mediante la navegación de reacción y los valores que puede obtener desde allí pueden

121
00:10:50,240 --> 00:10:58,660
ser encontrado en los documentos oficiales con este ajuste realizado si ahora estamos seguros, ahora se reinicia aquí y ahora vemos esa pantalla nuevamente.

122
00:10:58,660 --> 00:11:01,830
Ahora definitivamente retoma nuestra configuración.

123
00:11:01,840 --> 00:11:09,360
Tenga en cuenta que el sorteo no funcionará porque aún no hemos agregado sorteo y navegación, así

124
00:11:09,360 --> 00:11:17,140
que con todo eso aprendimos cómo podemos configurar nuestros componentes en nuestras pantallas y el navegador general de

125
00:11:17,140 --> 00:11:19,930
la pila con esa nueva lógica.

126
00:11:19,930 --> 00:11:26,020
Es hora de seguir portando Definitivamente, siéntase libre de hacer los siguientes pasos por su cuenta y un puerto

127
00:11:26,020 --> 00:11:32,620
para seleccionar opciones específicas para el detalle del producto y la pantalla de la tarjeta y luego pasaremos a la siguiente

128
00:11:32,620 --> 00:11:33,090
pila.

129
00:11:33,190 --> 00:11:35,230
Y luego, por supuesto, también demandar en el sorteo.