Conhecendo sobre APIs React Native – Aula 4 | Curso React Native (aprendiz)

Parte 1

 


 

Parte 2

 


 

Parte 3

 


 

Api React Native

No React Native podemos usar funcionalidades nativas tanto no android como no IOS, através das Apis do RN. Podemos ver todas as APIs disponíveis na documentação. Tudo isso via javascript de uma forma bem simples conforme veremos no nosso app.

Vamos iniciar esta aula com um aviso ao usuário de que o campo é obrigatório, e depois vibrar quando ele persistir no erro.

1 – Implementando state ErroMessenger


2 – Criar um função que verifica erro ao calcular IMC


3 – Um vez que a gente calcular o imc e tudo correr como o esperado, devemos setar erroMessenger(null). Vamos fazer isso dentro de validatorImc().


4 – E então vamos então estilizar:


5 – Vamos então exibir o errormessenger. Para isso basta adicionar abaixo de Altura e peso os campos abaixo
 


Vibration – Interagindo com o usuário

Agora vejam que legal como a API do React Native facilita muito para que consigamos interagir com o usuário. Quando algo estiver incompleto vamos vibrar para que o usuário possa dar uma atenção e perceber que algo não esta como deveria.


1 – Vamos importar o Vibration do react-native no topo do nosso código


2 – Para implementar, olha que fácil ficou de usarmos a vibração para alertar o usuário. Vamos aproveitar nossa validação que fizemos anteriormente e agora além de adicionar uma mensagem, o aparelho irá vibrar conforme o bloco abaixo:


Share – Compartilhando seu imc

Para implementar o botão Compartilhar vamos fazer algumas alterações no nosso app.
A primeira delas é separar os resultados do form, assim tendo eles independente vamos melhorar a forma de trabalhar a lógica do nosso app.


1 – Então vamos levar a lógica de compartilhar para o resultImc já que só poderá ser compartilhado quando calcular imc.


2 – Agora podemos montar nosso componente dentro de result IMC


3 – e atualizar nosso estilo do resultImc:


4 – Melhorando a experiência do Form trabalhando com Teclad, v
amos utilizar o Passable que permite que uma área se torne clicável


5 – Em nosso index.js do Form vamos fazer alguns ajustes:


6 – Melhorando o cálculo do IMC adicionando tratamento dentro de ImcCalculator():


7 – Por fim, ajustar alguns styles do nosso Form em styles.js, o nosso código então ficará assim:


Nesta aula implementamos algumas APIs do React Native que interage com os sensores nativos do nosso app como “Vibration”, também aprendemos como compartilhar o resultado do nosso cálculo do imc utilizando o “Share”.

Trabalhamos com o “Pressable” que é novo no React Native e que permite que uma área ao ser clicada execute uma ação, o que nos ajudou a melhorar a experiência do usuário usando mais uma API do React Native, o “keyboard”.

Vamos seguir melhorando nosso app e na próxima aula vamos adicionar mais features para deixar nosso app ainda mais interessante!

5 2 votes
Article Rating
maio 5, 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