Principais Components do React Native – Aula 2 | Curso React Native (aprendiz)

Parte 1


Parte 2


Parte 3

 


 

O que é Components no React Native?

Os componentes no React Native são códigos Javascript que por trás chamam códigos java para android e object-C no IOS, que permite a construção de interfaces pra cada plataforma.

São eles os componentes básicos:


View

Esse componente representa o mesmo que uma div no html. Pense em uma área quadrada da sua interface que você vai inserir algum conteúdo dentro, esse conteúdo então deve ser colocado dentro de um component VIEW.


Text

Esse componente é utilizado para receber textos dentro de uma aplicação React Native. Na construção de sistemas web por exemplo ele representa o mesmo que uma tag html <p> ou <span> ou até um <h1> por exemplo.


Imagem

Esse componente é auto descritivo, ele representa o mesmo que uma tag <img> porém recebendo seus atributos como props no react.

Veja o exemplo abaixo:

Na documentação do react native podemos ver outras props que podem ser utilizadas para turbinar o use desse componente.


TextInput

Este é o componente responsável para inserção de dados do usuário.

Abaixo um exemplo de como implementar e algumas props que este componente pode receber:


ScrollView

Este componente apresenta uma lista que permite a rolagem dos dados quando atingido o limite da tela, possibilitando então o scroll automático do conteúdo interno deste componente.


StyleSheet

Este é o componente que permite estilizar nosso aplicativo por meio de um objeto json que recebe valores muito parecidos com css nos projetos web, porém com estilo camelCase. Vocês podem ver nos estilos padrões que temos ao criar o nosso primeiro projeto em app.js

 

Estes componentes nós conhecemos como ‘COMPONENTES BÁSICOS”‘ pois são usados em quase todo App.
Temos também os componentes que são considerados componentes de “INTERFACE DO USUÁRIO” que são responsáveis por imprimir na tela do nosso app botões de interação.

Sendo eles os seguintes componentes:


Button

Os botões por padrão tem a mesma funcionalidade da web e também aceitam props como os componentes anteriores, veja o exemplo abaixo:


Switch

O switch por sua vez é um botão mais moderno permitindo o usuário ativar ou desativar um serviço com uma excelente experiência.

Veja:

Esses são componentes básicos, porem já podemos construir muitas coisas utilizando eles.
Para isso, vamos começar nosso app e colocar eles em prática.

Criando o projeto

1 – Rode no console para criar o projeto:

2 – Selecione o tema blank


3 – Entre no projeto:

4 – Crie a estrutura de pastas:

5 – Coloque os seguintes conteúdos nos components:


App.js


Main – index.js


Title – index.js


Form – index.js

Implementando a lógica para fazer o cálculo do IMC

O IMC é calculado dividindo o peso (em kg) pela altura ao quadrado (em metros) -> IMC = Peso ÷ (Altura × Altura)

Tabela de resultado:

IMC CLASSIFICAÇÃO OBESIDADE (GRAU)
MENOR QUE 18,5 MAGREZA 0
ENTRE 18,5 E 24,9 NORMAL 0
ENTRE 25,0 E 29,9 SOBREPESO I
ENTRE 30,0 E 39,9 OBESIDADE II
MAIOR QUE 40,0 OBESIDADE GRAVE III

 

1 – No component Form coloque:

Agora podemos gerenciar os estados para poder fazer o cálculo do imc e exibir informações ao usuário de forma dinâmica.


2 – Vamos implementar também a função imcCalculator():

3 – Agora vamos criar a função validationImc() que vai verificar se os states e então fazer as alterações nos estados dando a interação ao nosso app:

Component de Resultado

1 – Com nosso useState implementado, vamos para a criação do último componente que irá exibir as informações que é o ResultImc:


2 – Agora podemos importar nosso componente ResultImc e passar as props necessárias para que ele exiba as informações corretamente. Para isso importe no topo do Form:

3 – E agora podemos, no return do nosso Form, importar o componente ResultImc setando as props esperadas:

4 – Pronto! Agora podemos realizar os teste e calcular nosso IMC.

Na próxima aula

Na próxima aula iremos estilizar o nosso app, isso vai melhorar muito a usabilidade dele deixando bem mais legível todas as informações.

Gostou dessa aula? Comenta o que você achou e como você se saiu no nosso exercício de cálculo de IMC.

Até a próxima aula!

5 1 vote
Article Rating
abril 21, 2021
Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Romir
Romir
3 meses atrás

Muito Bom o curso.

Anderson Jose Jardim
Anderson Jose Jardim
2 meses atrás

Estou gostando do curso. Poderia disponibilizar o github para eu ir comparando e identificando mais rápido meus erros no meu códigos? Acho que seria interressante.

Feito com s2 por OneBitCode
2
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: