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>
|
1 2 3 4 5 6 |
<Image style={styles.tinyLogo} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png', }} /> |
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:
|
1 2 3 4 5 6 7 8 |
const [number, onChangeNumber] = React.useState(null); <TextInput style={styles.input} onChangeText={onChangeNumber} value={number} placeholder="useless placeholder" keyboardType="numeric" /> |
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:
|
1 2 3 4 5 6 |
<Button onPress={onPressLearnMore} title="Learn More" color="#841584" accessibilityLabel="Learn more about this purple button" /> |
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:
|
1 2 3 4 5 6 7 |
<Switch trackColor={{ false: "#767577", true: "#81b0ff" }} thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"} ios_backgroundColor="#3e3e3e" onValueChange={toggleSwitch} value={isEnabled} /> |
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:
|
1 |
expo init OneBitHealth |
2 – Selecione o tema blank
3 – Entre no projeto:
|
1 |
cd oneBitHealth |
4 – Crie a estrutura de pastas:
|
1 2 3 4 5 6 7 8 9 10 11 |
src --componentes ----Title ------index.js ----Form ------ResultImc --------index.js ------index.js ----Main ------index.js App.js |
5 – Coloque os seguintes conteúdos nos components:
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from "react"; import { StyleSheet, View } from "react-native"; import Title from "./src/components/Title"; import Form from "./src/components/Form"; export default function App() { return ( <View style={styles.container}> <Title /> <Form /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems:"center", justifyContent:"center", backgroundColor: "#ffffff", }, }); |
Main – index.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from "react"; import { View } from "react-native"; import Form from "../Form"; export default function ContextIMC() { return ( <View> <Form /> </View> ); } |
Title – index.js
|
1 2 3 4 5 6 7 8 9 10 |
import React from "react"; import { View, Text } from "react-native"; export default function Title() { return ( <View > <Text>ONEBITHEALTH</Text> </View> ); } |
Form – index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, { useState } from "react"; import { Button, Text, TextInput, View } from "react-native"; export default function Form(props) { return ( <View> <View> <Text>Altura</Text> <TextInput onChangeText={setHeight} value={height} placeholder="Ex: 1.75" keyboardType="numeric" /> <Text>Peso</Text> <TextInput onChangeText={setWeight} value={weight} placeholder="Ex: 86.300" keyboardType="numeric" /> <Button title={textButton} onPress={() => imcCalc()} /> </View> <ResultImc messageResultIMc={messageImc} resultImc={imc} /> </View> ); } |
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:
|
1 2 3 4 5 |
const [height, setHeight] = React.useState(null); const [weight, setWeight] = React.useState(null); const [messageImc, setMessageImc] = useState("preencha o peso e altura"); const [imc, setImc] = useState(null); const [textButton, setTextButton] = useState("Calcular"); |
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():
|
1 2 3 |
function imcCalculator(){ return setImc((weight / (height * height)).toFixed(2)); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function validationImc() { if (weight != null && height != null) { imcCalculator() setHeight(null) setWeight(null) setMessageImc("Seu imc é igual:") setTextButton("Calcular Novamente") return } setImc(null) setTextButton("Calcular") setMessageImc("preencha o peso e altura") } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from "react"; import { Text, View } from "react-native"; export default function ResultImc(props) { return ( <View> <Text> {props.messageResultIMc} </Text> <Text> {props.resultImc} </Text> </View> ); } |
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:
|
1 |
import ResultImc from "./ResultImc/"; |
3 – E agora podemos, no return do nosso Form, importar o componente ResultImc setando as props esperadas:
|
1 |
<ResultImc messageResultIMc={messageImc} resultImc={imc} /> |
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!
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.
Muito Bom o curso.