Así que iré a la pantalla de descripción general del producto porque antes de
agregar un navegador, quiero poder ver
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
permitirá acceda a la tienda Redux y obtenga nuestros productos desde allí.
Entonces, al final, lo que podemos hacer es obtener nuestros productos y almacenarlos en productos constantes llamando al
selector de uso y, como aprendió
en el módulo anterior sobre la administración de estado en Redux, el selector de uso toma una función
que recibe automáticamente el estado , el estado de Redux como entrada y que luego devuelve los datos que desea obtener
de allí y
allá en el estado de
Redux, quiero aprovechar mi segmento de productos y debe usar el nombre que usa aquí en reductores combinados para
obtener esto estado, los datos gestionados con los productos para el usuario.
Así que aquí diré productos estatales y ahora, en esa parte de nuestro estado, quiero obtener productos
disponibles, así que vamos. productos disponibles aquí y esta es
esta sintaxis de función de flecha corta donde la parte en el lado derecho de la
flecha se devuelve automáticamente.
Entonces, eso es lo que ahora se almacena en los productos y, por lo tanto, aquí
en la lista plana, por supuesto, podemos establecer el apoyo de datos igual a nuestros productos aquí que seleccionamos porque será una matriz
y eso es exactamente lo que necesitan los datos.
También agregaré el extractor de claves aquí, dependiendo de la versión de React Native que esté usando, no necesitará
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
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
toma una función que le da el elemento
que está mirando y necesita decirle cuál debería ser su clave única en ese artículo y,
por supuesto, ese es el artículo. id, de nuevo, las
versiones más nuevas de React Native no necesitan eso. Ahora con eso, también necesitamos proporcionar el elemento de
renderizado que apunta a una función que renderiza nuestros diferentes elementos de lista y aquí, comenzaré de manera simple y
lo refinaremos más tarde y por el momento, solo importaré el componente de texto de React Native y
genera el título del producto en un componente de texto.
Entonces, aquí obtenemos los datos de nuestro elemento y el valor de retorno de esa función que tenemos que
proporcionar para representar el elemento debe devolver
un elemento jsx al final.
Entonces aquí devolveré un elemento de texto y allí, salida itemData. articulo. título y puedo hacer esto porque React Native
recibe los datos del artículo, esto tiene un accesorio de artículo, eso también es algo que React Native te da
y cada artículo aquí, por supuesto, es solo un artículo en nuestros productos, por lo
tanto, es de este tipo de datos y, por lo tanto, tiene un título de apoyo, por supuesto, porque eso
es lo que
estoy asignando aquí, por lo que tendremos un apoyo de título aquí que puedo generar y, por supuesto, esta
no es la forma final de cómo debería verse un producto en la lista pero es lo
que uso para comenzar para que veamos algo en la pantalla. Con eso, hablando de la pantalla, por supuesto, es hora de configurar
el navegador para que realmente podamos ver algo en la pantalla y que tengamos pantallas.
Por lo tanto, aquí en la carpeta de navegación, agregaré mi ShopNavigator. js y allí, agregaremos un montón de navegación a
lo largo de este módulo, por lo que definitivamente tendremos que importar desde React navigation y, por supuesto, comenzaré de manera
simple con un navegador de pila normal que podemos crear con la ayuda de cree la función
de navegador de pila y luego simplemente lo crearemos aquí y lo nombraré navegador de productos, eso
es lo que almaceno
aquí, el
resultado de crear navegador de pila y el resultado es un componente Reaccionar si lo
recuerda y si también lo recuerda , crear navegador de pila toma un objeto Javascript como primer argumento
donde asignamos identificadores de pantalla a Reaccionar componentes que deben cargarse como pantallas.
Así que aquí, por supuesto, comenzaré con la pantalla de descripción general de los productos e importé eso desde la carpeta de
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,
lo primero que quiero asignar en
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
general de productos.
Ahora, por supuesto, para este navegador de pila que eventualmente tendrá múltiples pantallas, también pasaré un segundo argumento para
crear un navegador de pila que es un objeto que nos permite configurar todo el
navegador y allí, por ejemplo, podemos configurar opciones de navegación predeterminadas para cada pantalla y
allí, quiero configurar el color de fondo de mi encabezado, etc.
Así que aquí configuraré un objeto Javascript donde puedo configurar el estilo del encabezado a otro objeto Javascript donde podamos configurar el color
de fondo a cualquier color de su elección y ahora es donde entrará en
juego la carpeta de constantes, donde agregaré Un colores. archivo js, donde simplemente quiero exportar un objeto
Javascript predeterminado con un color primario y un color de acento y puedes nombrar estas teclas como quieras
y ahora seleccioné algunos colores
agradables que quiero usar aquí, pero puedes usar el color que quieras desear.
Mi color primario será tener un código hexadecimal de # c2185b y el color de acento tiene un
código hexadecimal de # ffc107.
Ahora, por lo tanto, de vuelta en el navegador de la tienda, podemos importar desde esa carpeta de constantes, aún desde
los colores que encontramos en la carpeta de constantes como este y luego aquí, el color de fondo que configuraré para un
estilo de encabezado aquí es colores. primario.
Ahora con eso agregado, también agregaré un
color de tinte de encabezado que colorea el texto del título, por ejemplo, y lo configuraré en blanco porque
este color primario que configuré es como un color rosado-rojizo bastante fuerte y, por lo tanto, el blanco es el color
que deberíamos usar para que sea claramente legible y realmente quiero diferir con respecto a cómo se ve el encabezado
según la plataforma en la que nos estamos ejecutando.
Así que es hora de importar la plataforma de React Native y una nota al margen aquí, en esta aplicación práctica, en
realidad no me enfocaré demasiado en las diferencias de plataforma y el diseño receptivo, lo haré
hasta cierto punto para que haya alguna diferencia básica entre las diferentes plataformas y que la aplicación
se ve bien en diferentes tamaños de dispositivo, pero
no la probaré en una amplia variedad de tamaños de dispositivo.
Aprendiste todo lo que necesitas para hacerlo lo más receptivo posible, así que
definitivamente siéntete libre de modificar siempre esto más de lo que lo hago aquí en este módulo.
Al final solo quiero asegurarme de que este módulo no tome cientos de horas,
por lo que lo mantendré al mínimo.
Con ese conjunto, la plataforma aquí parece ser importante para mí porque realmente quiero tener un aspecto
diferente en el encabezado en función de si estamos ejecutando en iOS o Android.
Por lo tanto, el color de fondo no siempre es el color primario, sino que solo estableceré esto si el
sistema operativo en el que estamos ejecutando es Android, de lo
contrario, estableceré el color de fondo en una cadena vacía, lo que significa que se tomará el valor
predeterminado y, por lo
tanto, para el color de tinte
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
lugar, quiero usar el color primario como color de
texto en iOS, así que si No estamos en Android. Con eso, se configura el navegador de productos.
Ahora, como aprendió en el módulo de navegación, no exporta este navegador, sino que
lo envuelve en un contenedor de aplicaciones que crea con la función Crear contenedor de aplicaciones
que obtiene de React navigation.
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.
Esta es ahora la configuración de navegación de exportación y esto es lo que
ahora podemos usar en la aplicación. js.
Entonces en la aplicación. js, ahora podemos importar nuestro navegador de la tienda desde la
navegación, el navegador de la tienda y eso es lo que uso ahora dentro de las etiquetas de mi proveedor aquí, así que
el navegador de la tienda tiene gusto de esto. Esto también significa que podemos deshacernos de estas importaciones de React
Native porque ya no usamos ninguno de estos componentes React Native en este componente. Con todo ese trabajo, ahora deberíamos poder
ejecutar nuestra aplicación y, con suerte, aterrizar en la pantalla de descripción general de productos
donde vemos una lista básica sin título de títulos de productos.
Entonces, si guardo eso ahora, guarde todos estos cambios y se asegure de que npm comience a
ejecutarse y tenga emuladores en funcionamiento donde cargó
esto, obtengo un error de que el objeto no es un constructor, evaluando el nuevo valor predeterminado del producto.
El problema debería ser que en la carpeta de mi modelo aquí, olvidé exportar mi clase de producto por defecto.
Eso, por supuesto, debe agregarse
aquí; de lo contrario, no puede importar desde
este archivo, tiene sentido.
Así que ahora esto funciona y ahora,
de hecho, aquí veo los títulos de mis productos.
También vemos los diferentes encabezados, lo que
no vemos es un título de encabezado porque no he agregado ninguno. Por lo tanto, en la pantalla de
resumen de productos, por supuesto, podemos agregar nuestras opciones especiales de navegación de pantalla única que se fusionarán
con las opciones de navegación predeterminadas que configuramos directamente en el navegador mediante el uso de la pantalla de
resumen de productos, nuestra constante aquí que contiene nuestro componente y agrega el propiedad de opciones
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
los productos, por ejemplo,
y si ahora guardamos esto, vemos todos los productos aquí en el encabezado.
Así que esto ahora se ve realmente decente, podemos ver nuestros productos.
Por supuesto, estos productos no se ven realmente como deberían verse,
por lo que el siguiente paso será asegurarse de que aquí realmente obtengamos el aspecto que necesitamos en esta aplicación.