Listas (ScrollView, ListView, FlatList, SectionList) – Aula 5 | Curso React Native (aprendiz)

Parte 1


Parte 2


Parte 3


 

Refatorando

Form index.js – adicionar if e else na função validationImc()


Form index.js – no return do nosso componente vamos implementar a lógica que esta lá no result IMC.

Vamos inverter nosso Pressable com style form, com o view de style formContextpara para trocar somente o content onde ficam nossos inputs e manter os estilos que envolvem todo nosso form

 

Vamos adicionar no style.js dentro de Form o seguinte estilo:


Em ResultImc, no index.js vamos remover a validação do imc e trazer o Text de messageResult e result Imc acima da View com style boxSharebutton:

 


Implementando o FlatList

Para começar devemos importar o flatList do React Native:


Vamos criar uma const que irá receber o valor do imc calculado e guardaremos em um array de imcs:


Na Função imcCalculator vamos fazer alguns ajustes.

Vamos fazer as alterações abaixo no totalImc, ele irá armazenar o valor final do imc.

Depois, vamos setar o state no array de imc o resultado de imc, passando um id único, e usaremos newDate().getTime() que retorna os milissegundos desde 1970.

Por fim, vamos fazer o setimc, confome a função abaixo:


Vamos criar nosso FlatList e usaremos nosso array como data dentro do nosso Flatlist:
   


Agora para concluir nosso FlatList vamos criar o estilo da nossa list. D
entro de style.js do Form vamos adicionar os seguintes estilos:


E uma dica muito útil para nosso FlatList, que é a opção de desativar barra lateral de scroll que por padrão e true(Ativa).

Podemos fazer isso passando o comando abaixo no FlatLIst:


Após a refatoração e implementação do nosso FlatList, terminamos as features desta aula.

Aprendemos como e quando utilizar listas no React Native, dicas interessantes do componente e temos agora em nosso App o FlatList Implementado.

Curtiu a Aula? Deixe nos comentários, compartilhe com um(a) amigo(a), e se você ficou com alguma dúvida, acessa o grupo de React Native do Onebitcode, estamos aqui para dar o suporte necessário!

Espero você na próxima aula!

0 0 votes
Article Rating
maio 19, 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: