aula4 (1)

Prévia do material em texto

4ºAula
React Native III
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
• utilizar os elementos básicos do React Native;
• criar um componente funcional e reaproveitável;
• alterar o conteúdo de um componente através das Props.
Olá, 
 Na última aula foram definidos o JSX e o arquivo principal 
App.js dos projetos de React Native foram detalhados. Nesta 
aula, os elementos básicos do React Native serão apresentados, 
com eles será possível criar componentes que poderão ser 
utilizados em múltiplos projetos. As props que permitem a 
comunicação entre elementos também serão descritas.
Leia atentamente esta aula e se tiver alguma dúvida, use os 
recursos que estão na sua área do aluno.
Bons estudos!
22Programação para Dispositivos Móveis
Seções de estudo
1- Elementos do React Native
2- Criando componentes
3- Props
1- Elementos do React Native
Com o JSX explicado, agora podemos começar a 
acrescentar os elementos de interface com o usuário. Quando 
se está desenvolvendo com o React para web a chamada aos 
elementos HTML é a mesma (<div>, <p>, <span>, <a>), 
para o React Native como os elementos são convertidos para 
a plataforma específi ca eles terão nomes diferentes para suas 
tags. (EISENMAN, 2015).
Na Figura 1 é possível ver a comparação da defi nição dos 
elementos no React e React Native.
Figura 1 – Comparação entre os elementos básicos. Fonte: EISENMAN,2015.
Como os elementos que serão utilizados na interface 
com o usuário não são os básicos do HTML, conforme é 
utilizado no React, é preciso importar cada elemento que será 
utilizado no desenvolvimento, por isso no começo do código 
todos os imports necessários devem ser declarados.
import { StyleSheet, Text, View } 
from ‘react-native’;
No código acima pode-se observar que a partir da 
biblioteca `react-native` são importados os elementos View, 
Text e StyleSheet. 
Subseção A – View
Considerado o componente mais importante ao 
construir a interface com o usuário, a View é um container. 
Suporta layout com fl exbox, estilos e eventos de toque. Foi 
desenvolvido para conter outras Views e pode ter 0 ou mais 
fi lhos de qualquer tipo.
No exemplo abaixo, algumas situações novas são 
abordadas, por exemplo, o estilo de um elemento pode 
ser defi nido na composição do próprio elemento o, style é 
um atributo da view. Além do fl exbox, através do atributo 
fl exDirection, que é um componente que trabalha com o 
layout consistente para qualquer que seja o tamanho da sua 
tela, nesse caso o fl exDirection:”row” indica que os elementos 
dentro do componente com esse atributo vão ser exibidos em 
linha.
Mais detalhes sobre o layout com fl exbox podem ser 
encontrados em Flexbox (2020).
Fora esses detalhes o resultado pode ser visto na Figura 
2, uma View contém duas Views (uma com fundo de cor azul 
e tamanho ⅓ da tela, e outra com fundo vermelho e metade 
do tamanho da tela) e 1 texto.
import React from ‘react’;
import {Text, View } from ‘react-
native’;
export default function App() {
 return (
 <View style={{fl exDirection: 
“row”,height: 100,padding: 20}}>
 <View style={{ backgroundColor: 
“blue”, fl ex: 0.3 }} />
 <View style={{ backgroundColor: 
“red”, fl ex: 0.5 }} />
 <Text>Hello World!</Text>
 </View>
 );
}
Figura 2 – View. Fonte: Acervo pessoal.
Subseção B – Text
Componente utilizado para exibir texto, ele suporta 
outros texts aninhados a ele, além de estilo e eventos de toque.
No exemplo abaixo um Text tem por atributo o estilo 
de font a “sans-serif-medium” que é propagada para os 
outros dois Texts que estão aninhados ao primeiro. Os Texts 
mais internos podem ter seus próprios estilos adicionais. O 
resultado pode ser visto na Figura 3.
import React, { useState } from 
“react”;
import { Text } from ‘react-native’;
export default function App() {
 const titleText = useState(“Unigran 
NET”);
 const bodyText = 
useState(“Desenvolvimento Mobile”);
 return (
 <Text style={{ fontFamily: “sans-
serif-medium” }}>
 <Text style={{ fontSize: 20, 
fontWeight: “bold” }}>
 {titleText}
 {“\n”}
 {“\n”}
 </Text>
 <Text numberOfLines={5}>{bodyText}</
Text>
 </Text>
 );
}
23
Figura 3 – Text. Fonte: Acervo pessoal.
Subseção C – Image
Componente utilizado para exibir diferentes tipos de 
imagens, sejam elas da internet, recursos estáticos e imagens 
locais. 
No exemplo abaixo, três imagens são inseridas. A 
primeira é uma imagem local dentro da pasta assets na raiz do 
projeto, a segunda é uma imagem remota que busca no site 
ofi cial do React Native o seu logo, e a terceira é uma imagem 
em base 64. 
As imagens remotas e as que utilizam o ‘data:’ precisam 
que as dimensões sejam especifi cadas. Caso não sejam 
defi nidas as dimensões elas não serão exibidas.
Figura 4 – Image. Fonte: Acervo pessoal.
Subseção D – TextInput
Para melhorar a interação com o usuário muitas vezes 
é necessário que textos sejam introduzidos no aplicativo 
via teclado. O TextInput tem por função captar e exibir 
esse conteúdo. Além disso, possui propriedades como 
autocorreção, maiúsculas, placeholder e suporte a teclados 
como o numérico.
O exemplo de código abaixo, com resultado na Figura 
4, coloca um TextInput para que através do teclado uma 
informação possa ser digitada.
import React from ‘react’;
import { View, TextInput } from 
‘react-native’;
export default function App() {
 return (
 <View style={{ paddingTop: 50 }}>
 <TextInput
 style={{ height: 40, borderColor: 
‘gray’, borderWidth: 1 }}
 />
 </View>
 );
}
 
Figura 5 – TextInput. Fonte: Acervo pessoal.
24Programação para Dispositivos Móveis
Subseção E – StyleSheet
Similar à folha de estilos do CSS, você separa os elementos 
de seus estilos. Um objeto é criado com todos os estilos que 
serão utilizados, podendo dessa maneira reaproveitar estilos já 
defi nidos anteriormente. No exemplo abaixo, dois quadrados 
com o texto React Native compartilha o mesmo estilo.
O objeto do tipo StyleSheet criado no fi m do arquivo é 
então chamado no atributo style do elemento que você deseja 
atribuir o estilo.
import React from ‘react’;
import { StyleSheet, View, Text } 
from ‘react-native’;
export default function App() {
 return (
 <View style={styles.container}>
 <View>
 <Text style={styles.title}>React 
Native</Text>
 </View>
 <View>
 <Text style={styles.title}>React 
Native</Text>
 </View>
 </View>
 );
}
const styles = StyleSheet.create({
 container: {
 fl ex: 1,
 padding: 24,
 backgroundColor: “#eaeaea”
 },
 title: {
 marginTop: 16,
 paddingVertical: 8,
 borderWidth: 4,
 borderColor: “#20232a”,
 borderRadius: 6,
 backgroundColor: “#61dafb”,
 color: “#20232a”,
 textAlign: “center”,
 fontSize: 30,
 fontWeight: “bold”
 }
});
 Figura 6 – StyleSheet. Fonte: Acervo pessoal.
Subseção F – Button
Componente que permite a interação do usuário para 
pressionar e efetuar alguma operação. Ele suporta um nível 
baixo de customização.
No exemplo abaixo são criados três botões, o primeiro é 
o padrão do sistema com nenhuma customização, o segundo 
tem sua cor alterada e o terceiro é desabilitado não podendo 
ser clicado.
Ao clicar nos dois primeiros botões mais um componente 
é acionado, o Alert, que também precisa ser importado. E 
será chamado através da propriedade onPress do botão que 
executa uma função quando o botão é pressionado. 
import React from ‘react’;
import { View, Button, Alert } from 
‘react-native’;
export default function App() {
 return (
 <View style={{ paddingTop: 50 }}>
 <Button
 title=”Aperte-me”
 onPress={() => Alert.
alert(‘Botão pressionado’)}
 />
 <Button
 title=”Aperte-me”
 color=”#f194ff”
 onPress={() => Alert.alert(‘Botão 
com cor diferente pressionado’)}
 />
 <Button
 title=”Aperte-me”
 disabled
 onPress={() => Alert.alert(‘Não 
pode pressionar esse’)}/>
 </View>
 );
}
 
Figura 7 – Button. Fonte: Acervo pessoal.
25
2- Criando componentes
Criar componentes permite que você compartilhe 
elementos entre vários projetos. Os componentes reutilizados 
podem inclusive já incorporar elementos de estilo, facilitando 
e agilizando ainda mais o processo de desenvolvimento. 
(PINHO e ESCUDELARIO, 2020).
Para melhor organização é possível criar uma pasta 
dentro do projeto para que fi quem armazenados todos os 
componentes que forem utilizados. Criaremos então a pasta 
components.
Como exemplo será criado um novo arquivo que 
irá conter um texto e um botão que será importado então 
pelo arquivo principal o App.js. O arquivo Componente.js 
deve conter os imports necessários, e a estrutura do nosso 
componente deve estar dentro da função que será exportada.
import React from ‘react’;
import { Alert, Button, Text, View } 
from ‘react-native’;
export default function () {
 return (
 <View>
 <Text>Bem-vindo</Text>
 <Button
 title=”Aperte-me”
 onPress={() => Alert.
alert(‘Botão pressionado’)}
 />
 </View>
 )
}
Com o componente criado e com a função export 
default apontando para a função do componente pode-se 
então utilizar o import para importar o componente dentro 
do arquivo App.js. 
Para incluir o componente basta utilizar o padrão do JSX 
com o símbolo de maior e menor delimitando o componente, 
com a barra indicando o fi m do componente, nesse caso 
<Componente />. O nome na tag sempre é o mesmo nome 
que foi importado, independente do nome do arquivo que foi 
criado para o componente.
import React from ‘react’;
import { View } from ‘react-native’;
import Componente from ‘./components/
Componente’;
export default function App() {
 return (
 <View style={{paddingTop:50}}>
 <Componente />
 <Componente />
 </View>
 );
}
O resultado desse código é a exibição do componente 
criado em Componente.js duas vezes. 
 
Figura 8 – Component. Fonte: Acervo pessoal.
3- Props
As propriedades de um componente são atributos 
referentes a ele. É um conteúdo que pode ser passado através 
da hierarquia dos componentes (pai para fi lho). (PINHO e 
ESCUDELARIO, 2020).
Para entender na prática o comportamento das 
propriedades, utilizaremos o exemplo da seção anterior, 
passaremos então o conteúdo que será exibido ao clicar no 
botão APERTE-ME e também um nome que será exibido 
após o Bem-Vindo. 
Então o Componente criado receberá um atributo em 
sua construção, vamos colocar os atributos msg e name 
recebendo uma string cada.
import React from ‘react’;
import { View } from ‘react-native’;
import Componente from ‘./components/
Componente’;
export default function App() {
 return (
 <View style={{paddingTop:50}}>
 <Componente name=”Felipe Perez” 
msg=”O botão foi apertado com sucesso!” 
/>
 </View>
 );
}
Para poder acessar esses conteúdos no Componente 
que foi criado, basta fazer com que a default function receba 
o parâmetro props. Que é um objeto que possui os valores 
passados como parâmetros para ele no formato de chaves e 
valores. Como o atributo que foi defi nido no código anterior 
foi o msg e name, para acessar eles eles devem usar o props.
msg e props.name, respectivamente.
Esse valor será acessado dentro da função que é executada 
quando o botão é pressionado, ou em qualquer outro trecho 
encapsulando o valor dentro de chaves.
import React from ‘react’;
import { Alert, Button, Text, View } 
from ‘react-native’;
export default function (props) {
 return (
26Programação para Dispositivos Móveis
 <View>
 <Text>Bem-vindo {props.
name}</Text>
 <Button
 title=”Aperte-me”
 onPress={() => Alert.
alert(props.msg)}
 />
 </View>
 )
}
 
Figura 9 – Component com props. Fonte: Acervo pessoal.
Chegamos ao fi nal da quarta aula. Vamos recordar?
Retomando a aula
1 – Elementos do React Native
Na primeira seção alguns dos elementos que podem ser 
utilizados na construção da interface com o usuário foram 
apresentados. Tais como View, Text, Image, TextInput, 
StyleSheets Button.
2 – Criando componentes
Na seção seguinte foi exemplifi cado como criar um 
componente utilizando os elementos da seção anterior, 
esses componentes são criados para poder realizar o 
reaproveitamento de código entre projetos.
3 – Props
Por fi m, aprendemos como realizar a comunicação entre 
um elemento pai e elementos fi lhos através da utilização das 
props, que são os atributos que são defi nidos no elemento, 
que são passados por parâmetro para o componente, que 
podem ser utilizados tanto para algum processo lógico ou 
para exibição. 
ReactNative. In: Core Components and APIs, 2020. 
Disponível em: https://reactnative.dev/docs/components-
and-apis. Acesso em: 23 jun. 2020.
FlexBox. In: Layout with Flexbox, 2020. Disponível 
em: https://reactnative.dev/docs/flexbox. Acesso em: 23 
jun. 2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt Publishing, 
2017.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
Minhas anotações