Projeto Final: OneBitCoin – Aula 9 | Curso React Native (aprendiz)

Parte 1

 


Parte 2

 


Parte 3

 


Parte 4

 


 

Implementando a lógica em App.js

1 – Function addZero – vamos utilizar essa função para formatar o zero a esquerda em datas menores ou igual a 9, deixando assim formatado corretamente conforme pede a api.


2 – Function url(qtdDias) – essa função vai receber uma quantidade de dias e vai subtrair dos dias atual até a data solicitada.
Exemplo: -10 dias hoje = 15/02/2021 data hoje – 10 dias = 05/02/2021

Porém se subtrairmos um pelo outro simplesmente, iremos ter um undefined. Para isso criaremos uma função que recebe o parâmetro de dias e subtrai corretamente.


Com a nossa função url(qtdDias) implementada vamos agora fazer as funções que irão fazer as buscas na api

A primeira função vai ser a getListCoins(url), ela irá receber nossa url como parâmetro e fazer fetch, buscando os dados da API de acordo com os dias passados, depois faremos um map gerando um novo array para tratarmos os dados que vieram da API e montarmos esse novo array da forma que iremos precisar para usar em nosso FLatList.

Nossa função ficará assim :

 

Na segunda função, iremos fazer o mesmo só que montaremos os dados conforme a documentação do gráfico nos pede, que é uma lista de dados somente de valores, veja que na função podemos aproveitar a mesma, vamos adicionar um G no final de cada variável criada para referenciarmos que se trata de um ” return dataG” ( dados do Gráfico).

O que muda de fato é nosso map() que irá retornar somente um array de valores.


Criando os States.


Vamos criar uma função que será responsável por alterar os dias que iremos passar para nossa chamada à api.


E por fim, nosso useEfect, para sempre que houver alteração ele recarregar nosso componente.


Props nos components

Em nosso HistoryGraphic vamos passar nosso state que está com os dados para nosso gráfico.


Vamos implementar as props no QuotationsList passando coinsList.


No compomente QuotationsList vamos fazer as seguintes alteraçõe:


Os Botões irão agora ter dentro do onpress nosso const daysQuery e irá receber um parâmetro, o número de dias.


No no final do nosso componente, vamos implementar nossa FlatList passando dentro do nosso renderItem o nosso component QuotationsItem, passando como props o valor e a data que foi gerado apartir do map() no retorno da nossa api e foi passado como props em app.js para nosso componente QuotationsList.


Vamos Adicionar um estilo no style.js do QuotationList.

 

Agora precisamos configurar nosso QuotationItem. Vamos passar as props para que os valores fiquem dinâmicos.


Configurando o Gráfico

Para utilizarmos o grafico em nosso app iremos utilizar o projeto react-native-chart-kit, você pode acompanhar detalhes acessando:
https://github.com/indiespirit/react-native-chart-kit

Se estiver rodando o app, pare o código e rode os seguintes comandos no seu terminal:


Dentro de App .js vamos passar os dados do gráfico como props.


O componente do gráfico fica assim:


Com isso nós finalizamos nosso app e implementamos todas as nossas features.

Na próxima aula vamos configurar o splash screen do nosso projeto e gerar o apk utilizando o expo.

0 0 votes
Article Rating
junho 9, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: