Para este módulo y para esta aplicación que
estamos construyendo, nuevamente encontrará un proyecto inicial adjunto a esta conferencia que puede usar para comenzar con esto o
puede crear una nueva aplicación de exposición por su cuenta, por supuesto.
Ahora, esta es la aplicación que adjunté, una aplicación muy básica con la que soy tu aplicación, que apenas podemos ver, lo que no
importa porque de todos modos no conservaremos este texto y
solo tenemos esa aplicación. archivo js.
Ahora, muchas de las cosas que hago en este módulo serán cosas que viste en los módulos anteriores porque obviamente esa
es la idea central aquí.
Practicaremos lo que hemos aprendido hasta ahora y habrá algunas cosas nuevas o algunos patrones que
podrían ser interesantes para usted también.
Ahora, por supuesto, en esta aplicación que esbocé en la última conferencia, tendremos un par de pantallas, por lo que
definitivamente necesitaremos navegación y, por lo tanto, agregaré una carpeta de navegación para poder almacenar mi configuración de
navegación allí. y esa es, por supuesto,
solo una posible configuración, como mencioné antes, puede trabajar con
cualquier estructura de carpetas que desee y que funcione para usted. Además de la carpeta de navegación, también quiero
tener una
carpeta de pantallas aquí, en esa carpeta de pantallas también quiero almacenar
las pantallas entre las que podemos navegar y agregaré una carpeta de componentes para todos
mis componentes regulares, por supuesto, las
pantallas también son React componentes, pero los componentes normales que quiero decir aquí son los
componentes que no cargamos directamente como pantallas, pero que incorporamos en las pantallas o en otros
componentes, así que eso es lo que tendremos aquí. También agregaré una carpeta de constantes porque de nuevo,
trabajaré con mis constantes de color aquí para poder usar mis colores preseleccionados en toda la aplicación.
Ahora que hay muchas maneras diferentes de comenzar, lo que me gusta hacer primero en mis
aplicaciones es que empiezo
con las pantallas, aunque si todavía no agrego el contenido a todas, me gusta agregar este general estructura
para que siempre pueda ver en qué todavía necesito trabajar, qué características aún faltan.
Por lo tanto, agregaré las pantallas que tendré en esta
aplicación y aquí haré algo que no he hecho antes y que es totalmente opcional, pero
organizaré mis pantallas en subcarpetas separadas.
Tendré una carpeta con las pantallas relacionadas con mi tienda y,
por supuesto, dado que crearemos una aplicación de compras, todas las pantallas están relacionadas con la
tienda, pero aquí quiero tener las pantallas que nos ayudan directamente a ver nuestros productos, y agregarlos. al
carrito
y así sucesivamente y luego quiero tener una carpeta separada y esa es mi carpeta de usuario, podría decir, allí quiero tener
las pantallas relacionadas con el usuario,
por lo que serían mis productos de usuario y los productos de administración.
Así es como dividiré
esto, pero, por supuesto, puedes organizarlo como quieras.
Entonces, en la carpeta de la tienda aquí, por ejemplo, quiero tener la pantalla de vista general de mis productos y esa
será la pantalla que veremos cuando se cargue la aplicación donde tengamos todos los productos para trabajar y
donde podamos seleccionar un producto o agregarlo directamente al carro Por lo tanto, también necesitaremos una pantalla de detalles del producto,
esa es la pantalla que vemos cuando seleccionamos un producto y queremos obtener más información al respecto, luego podemos hacer
clic o tocarlo y acceder a esa pantalla de detalles. También necesitaremos una pantalla de carrito, como era de esperar la pantalla
que vemos cuando agregamos un artículo al carrito o no, que luego vemos pero que podemos visitar para ver el
artículo
allí, así que eso es
algo que podemos hacer allí y yo ' También agregaremos una pantalla de pedidos donde podemos ver nuestros pedidos.
Ahora, por cierto, podría argumentar que la pantalla del carrito y la pantalla del pedido pertenecen a la carpeta
del usuario porque son exclusivas para el usuario, cada usuario tiene sus propios pedidos
y su propio carrito y, por lo tanto, puede ir en cualquier dirección, Creo que están un poco
más en el lado relacionado con el producto de la tienda, pero de
nuevo, eso depende totalmente de usted. En la carpeta de
usuario, quiero tener la pantalla de mis productos de usuario, de modo que sea la pantalla donde vea una lista
de todos los productos que pertenecen a ese usuario y la pantalla de edición de productos, que es la pantalla que usaremos
para agregar nuevos productos o para
editar productos existentes, podremos reutilizar eso.
Estas son las pantallas en las que
trabajaremos a lo largo de este módulo y no las llenaremos de vida inmediatamente ahora, sino que trabajaremos paso
a
paso, pero es lo que necesitaremos.
Ahora, por supuesto, también hay otra carpeta que podemos agregar y esa es la carpeta
de la tienda donde administraremos nuestra tienda Redux y nuestro estado Redux, por lo tanto, cuál es nuestro sistema
de administración de estado con el que quiero trabajar, que por supuesto necesitamos porque tenemos muchos pantallas que tienen
que funcionar en el tipo de datos relacionados y, por lo tanto, necesitamos administrar esos datos, nuestros productos y lo que hay
en el
carrito, etc. a nivel global y Redux es realmente genial
para eso, por lo que definitivamente necesitaremos eso . En la misma nota, también necesitamos instalar algunos paquetes,
por lo que ejecutaré npm install --save e instalar Redux y también React Redux. También necesitaremos React -navigation porque, por
supuesto, agregaremos navegación nuevamente, por lo que ya podemos incluir eso.
También agregaré botones React-header-header porque agregaré botones de encabezado aquí y quiero tener estos botones bien diseñados y
posicionados sin tener que hacer todo ese posicionamiento de estilo por mi
cuenta y eso debería ser todo por ahora.
Así que ya instalaré todos estos paquetes, los necesitaremos en todo este
módulo y con estos paquetes instalados y estos archivos básicos creados, tenemos una configuración base sólida para comenzar.
Ahora, además de estos paquetes, también tenemos que instalar otros dos paquetes con
la ayuda del comando de instalación expo y que es el controlador react-native-Gesture, por lo que expo install
React-native-gest-handler y también el paquete react-native-reanimated . Ambos paquetes también deben instalarse con
el comando de instalación expo.
Ahora, por supuesto, se trata de poblar eso con vida y allí
quiero comenzar con la primera pantalla, veremos cuál es la pantalla de descripción general de los productos.