Saltar al contenido

Vamos a construir: aplicación móvil nativa de criptomonedas con React Native + Redux – Capítulo IV

¡Saludos! Me alegra verte de vuelta.

Este es el cuarto y último capítulo de nuestra serie de aplicaciones de criptomonedas React Native y Redux.

Hasta ahora tenemos:

  • Configura nuestro proyecto
  • Redux cableado
  • Datos obtenidos con Redux

Lo único que podemos hacer es crear nuestras vistas con React. ¡La parte más divertida!

Donde dejamos

Cambio rápido: ¡establezca la propiedad de datos CryptoReducer.js intialState en una matriz vacía en lugar de nula! No funcionará si no haces esto¡disculpas!

Muy bien, esto es lo que queda por hacer:

Cree un componente sin estado llamado CoinCard.js y cree el elemento de la lista.

¿Recuerda el boceto llamado “pensar en React” de los viejos tiempos?

Fuente “Thinking in React”

Esto explica perfectamente cómo funciona nuestra aplicación. Dice así:

  • El borde amarillo es nuestro App.js – contenedor de aplicaciones
  • El borde azul es nuestro componente Header.js
  • El borde verde es nuestro CryptoContainer.js: contiene los elementos de nuestra lista
  • El rojo y el azul neón son nuestros CoinCard.js: enumera los elementos.

Tiene sentido, ¿verdad? Todo lo que tenemos que hacer es implementar los bordes rojo y azul neón.

Empiece por crear el componente sin estado.

¡Se ve bien!

Importar vista, texto, hoja de estilo de “react-native”: los necesitamos para crear nuestra vista.

A continuación, declaremos nuestros accesorios. Vamos a nombrarlos de la misma forma que los datos de nuestra API.

A continuación, agreguemos los íconos de monedas. Lamentablemente, la API no incluye iconos, por lo que tenemos que compensar. No te preocupes, ¡te cubro las espaldas!

Cree un archivo en Utils llamado CoinIcons.js y agregue estos enlaces. Subí los íconos y los alojé como activos estáticos. Si quieres ayudarme, ¡siéntete libre de agregar el resto y hacer un PR! Aquí está el conjunto de iconos.

¿Notó algo nuevo además de la carpeta CoinIcons? Sí, importamos la etiqueta de imagen de ‘react-native’

Un componente de React para mostrar diferentes tipos de imágenes, incluidas imágenes de red, recursos estáticos, imágenes locales temporales e imágenes del disco local, como el carrete de la cámara.

Fuente

Básicamente es la versión nativa de la etiqueta HTML5 . Pero tiene diferentes accesorios.

La propiedad que nos interesa se llama fuente

Usamos require si queremos un ícono de nuestra computadora, y uri si está fuera de nuestra computadora (en el interwebz).

También agregamos estos estilos a nuestros elementos. ¡No los olvide, de lo contrario la imagen no aparecerá!

¡Hora de probar! Importe la CoinCard a nuestro CryptoContainer y colóquela en el método render (). También necesitamos pasar los apoyos.

Comience creando un método llamado renderCoinCards dentro del contenedor.

Luego colóquelo en la función de renderizado:

A continuación, iteremos nuestra matriz crypto.data. Recuerde: es solo una matriz que contiene nuestros objetos.

Simplemente estamos llamando al método map () en nuestra matriz de datos e iterando todos los objetos dentro. Para cada objeto, devolvemos un componente CoinCard con los siguientes accesorios.

¡Casi llegamos!

Nos falta la ruleta y cuándo mostrar la lógica de la ruleta.

Instale un paquete llamado

$ npm i --save react-native-loading-spinner-overlay

e importarlo a nuestro contenedor:

importar Spinner desde ‘react-native-loading-spinner-overlay’;

Escribamos una condición if simple. Recuerde que tenemos una propiedad booleana isFetching debajo de la criptografía; intente implementar esto.

¡¿Estás listo?!

¡Guau! ¡Funciona! ¿Pero notó algo extraño?

Intente desplazarse por la aplicación: no pasa nada.

Eso es porque es una etiqueta , no tiene funciones táctiles. Necesitamos usar la etiqueta .

Componente que envuelve la plataforma ScrollView al tiempo que proporciona integración con el sistema de “respuesta” de bloqueo táctil.

Importe ScrollView y StyleSheet desde el paquete react-native.

Observe el nuevo accesorio llamado contentContainerStyle

Estos estilos se aplicarán al contenedor de contenido de la vista de desplazamiento que envuelve todas las vistas secundarias

Agregue relleno en la parte inferior y superior de nuestro ScrollView.

¡Haz que la aplicación sea bonita y brillante!

No queremos que nuestra aplicación sea tan grotesca, ¿verdad?

¡Auge!

Así es como nos gusta.

Dado que es un CSS bastante trivial, aquí está el componente final de CoinCard.js.

¡Muchas gracias por lograrlo! ¡Hágame saber sobre qué temas le gustaría que escribiera a continuación! RxJs – VueJS –MobxGraphQL?

Hasta la próxima, oh, y no olvides seguirme en Medium, protagonizar el repositorio de Github, seguirme en Twitter, aplaudir y, finalmente, ¡difundirlo entre tus amigos! ❤

¡Aquí está el código fuente como siempre!

Los mejores deseos,

Indrek


Let’s Build: Aplicación móvil nativa de criptomonedas con React Native + Redux – El Capítulo IV se publicó originalmente en freeCodeCamp en Medium, donde las personas continúan la conversación destacando y respondiendo a esta historia.