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:

 <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

<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:

const [number, onChangeNumber] = React.useState(null);  
<TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />

const [number, onChangeNumber] = React.useState(null);

<TextInput

style={styles.input}

onChangeText={onChangeNumber}

value={number}

placeholder="useless placeholder"

keyboardType="numeric"

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:

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

<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:

<Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />

<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:

expo init OneBitHealth

1	expo init OneBitHealth

2 – Selecione o tema blank

3 – Entre no projeto:

cd oneBitHealth

1	cd oneBitHealth

4 – Crie a estrutura de pastas:

src
--componentes
----Title
------index.js
----Form
------ResultImc
--------index.js
------index.js
----Main
------index.js
App.js

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

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",
  },
});

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>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

alignItems:"center",

justifyContent:"center",

backgroundColor: "#ffffff",

});

Main – index.js

import React from "react";
import {  View } from "react-native";
import Form from "../Form";

export default function ContextIMC() {
  return (
    <View>
      <Form />
    </View>
  );
}

import React from "react";

import { View } from "react-native";

import Form from "../Form";

export default function ContextIMC() {

return (

<View>

</View>

);

}

Title – index.js

import React from "react";
import { View, Text } from "react-native";

export default function Title() {
  return (
    <View >
      <Text>ONEBITHEALTH</Text>
    </View>
  );
}

import React from "react";

import { View, Text } from "react-native";

export default function Title() {

return (

<View >

<Text>ONEBITHEALTH</Text>

</View>

);

}

Form – index.js

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>
  );
}

import React, { useState } from "react";

import { Button, Text, TextInput, View } from "react-native";

export default function Form(props) {

return (

<View>

<Text>Altura</Text>

<TextInput

onChangeText={setHeight}

value={height}

placeholder="Ex: 1.75"

keyboardType="numeric"

<TextInput

onChangeText={setWeight}

value={weight}

placeholder="Ex: 86.300"

keyboardType="numeric"

<Button title={textButton} onPress={() => imcCalc()} />

</View>

</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:

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");

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():

function imcCalculator(){
   return setImc((weight / (height * height)).toFixed(2));
}

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:

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")
   }

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:

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>
  );
}

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:

import ResultImc from "./ResultImc/";

1	import ResultImc from "./ResultImc/";

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

<ResultImc messageResultIMc={messageImc} resultImc={imc} />

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!

5 3 votes

Article Rating

abril 21, 2021

4 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Romir

1 ano atrás

Muito Bom o curso.

Responder

Anderson Jose Jardim

1 ano 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.

Responder

Test

9 meses atrás

Last edited 9 meses atrás by a

Responder

Test

9 meses atrás

Aasd

Responder

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

Parte 1

Parte 2

Parte 3

O que é Components no React Native?

View

Text

Imagem

TextInput

ScrollView

StyleSheet

Button

Switch

App.js

Main – index.js

Title – index.js

Form – index.js

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

Component de Resultado

Na próxima aula