1
00:00:02,120 --> 00:00:07,100
Así que iré a la pantalla de descripción general del producto porque antes de

2
00:00:07,100 --> 00:00:09,590
agregar un navegador, quiero poder ver

3
00:00:09,590 --> 00:00:18,380
al menos algo en esa pantalla y, por lo tanto, aquí, ahora tenemos que importar el selector de uso de React Redux porque eso nos

4
00:00:18,380 --> 00:00:22,630
permitirá acceda a la tienda Redux y obtenga nuestros productos desde allí.

5
00:00:22,640 --> 00:00:28,790
Entonces, al final, lo que podemos hacer es obtener nuestros productos y almacenarlos en productos constantes llamando al

6
00:00:28,790 --> 00:00:30,800
selector de uso y, como aprendió

7
00:00:30,800 --> 00:00:36,950
en el módulo anterior sobre la administración de estado en Redux, el selector de uso toma una función

8
00:00:36,950 --> 00:00:44,060
que recibe automáticamente el estado , el estado de Redux como entrada y que luego devuelve los datos que desea obtener

9
00:00:44,060 --> 00:00:45,470
de allí y

10
00:00:45,770 --> 00:00:47,360
allá en el estado de

11
00:00:47,360 --> 00:00:53,780
Redux, quiero aprovechar mi segmento de productos y debe usar el nombre que usa aquí en reductores combinados para

12
00:00:53,990 --> 00:00:57,990
obtener esto estado, los datos gestionados con los productos para el usuario.

13
00:00:58,010 --> 00:01:05,180
Así que aquí diré productos estatales y ahora, en esa parte de nuestro estado, quiero obtener productos

14
00:01:06,220 --> 00:01:10,270
disponibles, así que vamos. productos disponibles aquí y esta es

15
00:01:10,270 --> 00:01:15,460
esta sintaxis de función de flecha corta donde la parte en el lado derecho de la

16
00:01:15,460 --> 00:01:17,020
flecha se devuelve automáticamente.

17
00:01:17,020 --> 00:01:21,870
Entonces, eso es lo que ahora se almacena en los productos y, por lo tanto, aquí

18
00:01:21,880 --> 00:01:28,870
en la lista plana, por supuesto, podemos establecer el apoyo de datos igual a nuestros productos aquí que seleccionamos porque será una matriz

19
00:01:28,870 --> 00:01:31,790
y eso es exactamente lo que necesitan los datos.

20
00:01:31,810 --> 00:01:36,730
También agregaré el extractor de claves aquí, dependiendo de la versión de React Native que esté usando, no necesitará

21
00:01:36,790 --> 00:01:43,450
esto porque cada producto en nuestra aplicación tiene una ID y las versiones más nuevas de la lista plana también buscan ID y no solo

22
00:01:43,450 --> 00:01:49,900
una tecla, pero en caso de que esté trabajando con una versión anterior, entonces necesita configurar esta función de extracción de teclas y esto

23
00:01:49,900 --> 00:01:51,940
toma una función que le da el elemento

24
00:01:51,940 --> 00:01:56,230
que está mirando y necesita decirle cuál debería ser su clave única en ese artículo y,

25
00:01:56,230 --> 00:02:00,100
por supuesto, ese es el artículo. id, de nuevo, las

26
00:02:00,160 --> 00:02:07,410
versiones más nuevas de React Native no necesitan eso. Ahora con eso, también necesitamos proporcionar el elemento de

27
00:02:07,410 --> 00:02:14,720
renderizado que apunta a una función que renderiza nuestros diferentes elementos de lista y aquí, comenzaré de manera simple y

28
00:02:14,720 --> 00:02:21,650
lo refinaremos más tarde y por el momento, solo importaré el componente de texto de React Native y

29
00:02:21,650 --> 00:02:25,590
genera el título del producto en un componente de texto.

30
00:02:25,610 --> 00:02:31,580
Entonces, aquí obtenemos los datos de nuestro elemento y el valor de retorno de esa función que tenemos que

31
00:02:31,580 --> 00:02:33,580
proporcionar para representar el elemento debe devolver

32
00:02:33,900 --> 00:02:35,780
un elemento jsx al final.

33
00:02:35,810 --> 00:02:42,890
Entonces aquí devolveré un elemento de texto y allí, salida itemData. articulo. título y puedo hacer esto porque React Native

34
00:02:42,890 --> 00:02:48,680
recibe los datos del artículo, esto tiene un accesorio de artículo, eso también es algo que React Native te da

35
00:02:48,680 --> 00:02:53,000
y cada artículo aquí, por supuesto, es solo un artículo en nuestros productos, por lo

36
00:02:53,000 --> 00:02:58,640
tanto, es de este tipo de datos y, por lo tanto, tiene un título de apoyo, por supuesto, porque eso

37
00:02:58,640 --> 00:02:59,830
es lo que

38
00:02:59,960 --> 00:03:05,300
estoy asignando aquí, por lo que tendremos un apoyo de título aquí que puedo generar y, por supuesto, esta

39
00:03:05,300 --> 00:03:10,100
no es la forma final de cómo debería verse un producto en la lista pero es lo

40
00:03:10,100 --> 00:03:16,900
que uso para comenzar para que veamos algo en la pantalla. Con eso, hablando de la pantalla, por supuesto, es hora de configurar

41
00:03:16,900 --> 00:03:20,920
el navegador para que realmente podamos ver algo en la pantalla y que tengamos pantallas.

42
00:03:21,160 --> 00:03:28,240
Por lo tanto, aquí en la carpeta de navegación, agregaré mi ShopNavigator. js y allí, agregaremos un montón de navegación a

43
00:03:28,240 --> 00:03:36,020
lo largo de este módulo, por lo que definitivamente tendremos que importar desde React navigation y, por supuesto, comenzaré de manera

44
00:03:36,050 --> 00:03:42,470
simple con un navegador de pila normal que podemos crear con la ayuda de cree la función

45
00:03:42,470 --> 00:03:48,740
de navegador de pila y luego simplemente lo crearemos aquí y lo nombraré navegador de productos, eso

46
00:03:48,860 --> 00:03:50,280
es lo que almaceno

47
00:03:50,420 --> 00:03:51,700
aquí, el

48
00:03:51,710 --> 00:03:57,320
resultado de crear navegador de pila y el resultado es un componente Reaccionar si lo

49
00:03:57,320 --> 00:04:03,800
recuerda y si también lo recuerda , crear navegador de pila toma un objeto Javascript como primer argumento

50
00:04:03,860 --> 00:04:08,710
donde asignamos identificadores de pantalla a Reaccionar componentes que deben cargarse como pantallas.

51
00:04:08,810 --> 00:04:16,040
Así que aquí, por supuesto, comenzaré con la pantalla de descripción general de los productos e importé eso desde la carpeta de

52
00:04:16,040 --> 00:04:23,930
pantallas y allí desde la parte de la tienda y desde el archivo de pantalla de descripción general de los productos y, por lo tanto,

53
00:04:24,020 --> 00:04:26,120
lo primero que quiero asignar en

54
00:04:26,120 --> 00:04:33,630
este navegador de pila aquí son los productos descripción general o como quiera nombrar esto, que se asigna a la pantalla de descripción

55
00:04:33,640 --> 00:04:34,800
general de productos.

56
00:04:34,790 --> 00:04:41,510
Ahora, por supuesto, para este navegador de pila que eventualmente tendrá múltiples pantallas, también pasaré un segundo argumento para

57
00:04:41,510 --> 00:04:46,790
crear un navegador de pila que es un objeto que nos permite configurar todo el

58
00:04:47,180 --> 00:04:52,550
navegador y allí, por ejemplo, podemos configurar opciones de navegación predeterminadas para cada pantalla y

59
00:04:52,550 --> 00:04:56,660
allí, quiero configurar el color de fondo de mi encabezado, etc.

60
00:04:57,350 --> 00:05:05,060
Así que aquí configuraré un objeto Javascript donde puedo configurar el estilo del encabezado a otro objeto Javascript donde podamos configurar el color

61
00:05:05,060 --> 00:05:09,620
de fondo a cualquier color de su elección y ahora es donde entrará en

62
00:05:09,620 --> 00:05:16,000
juego la carpeta de constantes, donde agregaré Un colores. archivo js, donde simplemente quiero exportar un objeto

63
00:05:16,010 --> 00:05:23,330
Javascript predeterminado con un color primario y un color de acento y puedes nombrar estas teclas como quieras

64
00:05:23,330 --> 00:05:25,760
y ahora seleccioné algunos colores

65
00:05:25,760 --> 00:05:30,730
agradables que quiero usar aquí, pero puedes usar el color que quieras desear.

66
00:05:30,920 --> 00:05:42,890
Mi color primario será tener un código hexadecimal de # c2185b y el color de acento tiene un

67
00:05:42,890 --> 00:05:46,940
código hexadecimal de # ffc107.

68
00:05:47,130 --> 00:05:52,920
Ahora, por lo tanto, de vuelta en el navegador de la tienda, podemos importar desde esa carpeta de constantes, aún desde

69
00:05:54,020 --> 00:06:00,230
los colores que encontramos en la carpeta de constantes como este y luego aquí, el color de fondo que configuraré para un

70
00:06:00,230 --> 00:06:04,240
estilo de encabezado aquí es colores. primario.

71
00:06:04,250 --> 00:06:07,470
Ahora con eso agregado, también agregaré un

72
00:06:07,530 --> 00:06:15,630
color de tinte de encabezado que colorea el texto del título, por ejemplo, y lo configuraré en blanco porque

73
00:06:16,470 --> 00:06:24,900
este color primario que configuré es como un color rosado-rojizo bastante fuerte y, por lo tanto, el blanco es el color

74
00:06:24,900 --> 00:06:33,080
que deberíamos usar para que sea claramente legible y realmente quiero diferir con respecto a cómo se ve el encabezado

75
00:06:33,080 --> 00:06:37,110
según la plataforma en la que nos estamos ejecutando.

76
00:06:37,160 --> 00:06:44,450
Así que es hora de importar la plataforma de React Native y una nota al margen aquí, en esta aplicación práctica, en

77
00:06:44,450 --> 00:06:49,700
realidad no me enfocaré demasiado en las diferencias de plataforma y el diseño receptivo, lo haré

78
00:06:49,700 --> 00:06:55,160
hasta cierto punto para que haya alguna diferencia básica entre las diferentes plataformas y que la aplicación

79
00:06:55,190 --> 00:06:58,580
se ve bien en diferentes tamaños de dispositivo, pero

80
00:06:58,790 --> 00:07:02,630
no la probaré en una amplia variedad de tamaños de dispositivo.

81
00:07:02,660 --> 00:07:06,910
Aprendiste todo lo que necesitas para hacerlo lo más receptivo posible, así que

82
00:07:06,980 --> 00:07:12,230
definitivamente siéntete libre de modificar siempre esto más de lo que lo hago aquí en este módulo.

83
00:07:12,230 --> 00:07:16,710
Al final solo quiero asegurarme de que este módulo no tome cientos de horas,

84
00:07:16,730 --> 00:07:19,250
por lo que lo mantendré al mínimo.

85
00:07:19,250 --> 00:07:24,080
Con ese conjunto, la plataforma aquí parece ser importante para mí porque realmente quiero tener un aspecto

86
00:07:24,440 --> 00:07:28,790
diferente en el encabezado en función de si estamos ejecutando en iOS o Android.

87
00:07:28,790 --> 00:07:34,940
Por lo tanto, el color de fondo no siempre es el color primario, sino que solo estableceré esto si el

88
00:07:34,940 --> 00:07:38,320
sistema operativo en el que estamos ejecutando es Android, de lo

89
00:07:38,360 --> 00:07:43,820
contrario, estableceré el color de fondo en una cadena vacía, lo que significa que se tomará el valor

90
00:07:43,820 --> 00:07:45,540
predeterminado y, por lo

91
00:07:45,570 --> 00:07:47,420
tanto, para el color de tinte

92
00:07:47,450 --> 00:07:54,780
del encabezado, esto también debería ser blanco si estamos en Android, de lo contrario, no lo estableceré en una cadena vacía, pero en su

93
00:07:54,780 --> 00:07:57,720
lugar, quiero usar el color primario como color de

94
00:07:57,720 --> 00:08:04,150
texto en iOS, así que si No estamos en Android. Con eso, se configura el navegador de productos.

95
00:08:04,200 --> 00:08:09,240
Ahora, como aprendió en el módulo de navegación, no exporta este navegador, sino que

96
00:08:09,240 --> 00:08:14,940
lo envuelve en un contenedor de aplicaciones que crea con la función Crear contenedor de aplicaciones

97
00:08:14,940 --> 00:08:16,970
que obtiene de React navigation.

98
00:08:16,980 --> 00:08:24,510
Así que aquí ahora podemos exportar el contenedor de la aplicación de creación predeterminada y pasar el navegador de productos, de esta manera.

99
00:08:24,510 --> 00:08:27,510
Esta es ahora la configuración de navegación de exportación y esto es lo que

100
00:08:27,630 --> 00:08:30,240
ahora podemos usar en la aplicación. js.

101
00:08:30,510 --> 00:08:37,260
Entonces en la aplicación. js, ahora podemos importar nuestro navegador de la tienda desde la

102
00:08:39,770 --> 00:08:46,700
navegación, el navegador de la tienda y eso es lo que uso ahora dentro de las etiquetas de mi proveedor aquí, así que

103
00:08:46,700 --> 00:08:52,670
el navegador de la tienda tiene gusto de esto. Esto también significa que podemos deshacernos de estas importaciones de React

104
00:08:52,700 --> 00:09:00,020
Native porque ya no usamos ninguno de estos componentes React Native en este componente. Con todo ese trabajo, ahora deberíamos poder

105
00:09:00,020 --> 00:09:07,130
ejecutar nuestra aplicación y, con suerte, aterrizar en la pantalla de descripción general de productos

106
00:09:07,130 --> 00:09:12,390
donde vemos una lista básica sin título de títulos de productos.

107
00:09:12,470 --> 00:09:17,840
Entonces, si guardo eso ahora, guarde todos estos cambios y se asegure de que npm comience a

108
00:09:17,840 --> 00:09:20,520
ejecutarse y tenga emuladores en funcionamiento donde cargó

109
00:09:20,870 --> 00:09:26,980
esto, obtengo un error de que el objeto no es un constructor, evaluando el nuevo valor predeterminado del producto.

110
00:09:26,980 --> 00:09:35,270
El problema debería ser que en la carpeta de mi modelo aquí, olvidé exportar mi clase de producto por defecto.

111
00:09:35,300 --> 00:09:36,970
Eso, por supuesto, debe agregarse

112
00:09:36,980 --> 00:09:39,250
aquí; de lo contrario, no puede importar desde

113
00:09:39,290 --> 00:09:40,640
este archivo, tiene sentido.

114
00:09:40,640 --> 00:09:42,670
Así que ahora esto funciona y ahora,

115
00:09:42,740 --> 00:09:44,780
de hecho, aquí veo los títulos de mis productos.

116
00:09:44,780 --> 00:09:46,420
También vemos los diferentes encabezados, lo que

117
00:09:46,430 --> 00:09:51,500
no vemos es un título de encabezado porque no he agregado ninguno. Por lo tanto, en la pantalla de

118
00:09:51,500 --> 00:09:57,770
resumen de productos, por supuesto, podemos agregar nuestras opciones especiales de navegación de pantalla única que se fusionarán

119
00:09:57,770 --> 00:10:04,490
con las opciones de navegación predeterminadas que configuramos directamente en el navegador mediante el uso de la pantalla de

120
00:10:04,490 --> 00:10:10,050
resumen de productos, nuestra constante aquí que contiene nuestro componente y agrega el propiedad de opciones

121
00:10:10,070 --> 00:10:17,870
de navegación y aquí podemos usar opciones de navegación estáticas por el momento, agregar un título de encabezado y establecerlo en todos

122
00:10:17,870 --> 00:10:19,630
los productos, por ejemplo,

123
00:10:19,810 --> 00:10:24,470
y si ahora guardamos esto, vemos todos los productos aquí en el encabezado.

124
00:10:24,680 --> 00:10:28,870
Así que esto ahora se ve realmente decente, podemos ver nuestros productos.

125
00:10:28,970 --> 00:10:32,720
Por supuesto, estos productos no se ven realmente como deberían verse,

126
00:10:32,720 --> 00:10:38,810
por lo que el siguiente paso será asegurarse de que aquí realmente obtengamos el aspecto que necesitamos en esta aplicación.