Text Material Preview
5ºAula
React Native IV
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
• entender o que são os estados dos componentes e o ciclo de vida de renderização;
• construir uma aplicação com uma lista de nomes.
Olá,
Na aula anterior foram apresentados os elementos
básicos do React Native, também foi demonstrado como criar
componentes que podem ser reaproveitados e como trocar
informações entre componentes através das propriedades.
Nesta aula, veremos os estados dos componentes e
como eles se comportam quando são alterados, além do
desenvolvimento de uma aplicação utilizando os estados.
Leia atentamente esta aula e se tiver alguma dúvida, use os
recursos que estão na sua área do aluno.
Bons estudos!
28Programação para Dispositivos Móveis
Seções de estudo
1– State
2– Aplicação Prática
1- State
O State (Estado) é a parte dinâmica de um componente
do React Native. Nele será declarado o estado inicial do
componente, e todas as mudanças que podem acontecer
durante o tempo. (BODUCH, 2017).
Um exemplo de funcionamento do State se dá quando
iniciamos o estado do componente com um array vazio,
esse seria o estado inicial (Initial State). Com a utilização da
aplicação esse array vai recebendo dados, nesse caso há uma
troca de estado (setState), tanto no estado inicial quanto a
cada alteração do estado do componente ele automaticamente
se renderiza novamente.
O exemplo acima é descrito grafi camente na Figura 1.
Figura 1 – Ciclo de renderização. Fonte: BODUCH,2017.
Na aula anterior foi apresentado o conceito das
propriedades (Props) de um componente, que são responsáveis
por passar informação entre componentes. As propriedades
se diferem dos estados porque elas não são alteradas após a
renderização inicial do componente.
Enquanto os estados podem ser alterados dentro do
próprio componente somente o componente pai pode decidir
quando alterar a propriedade e renderizar novamente o JSX
com a nova propriedade.
Col (2019) defi ne o State como valores que são utilizados
em componentes que quando alterados causam o efeito de
renderização instantânea, permitindo maior dinâmica e
reatividade para aplicações.
Para manipular os estados foi introduzido no React
Native o Hook useState. Com essa função é mais fácil declarar
uma variável no State do componente.
Para utilizar o Hook useState primeiro se faz necessário
importá-lo da biblioteca React.
import React, { useState } from
“react”;
A declaração do State se dá no código abaixo, onde
counter é o nome da variável que estamos criando,
setCounter é a função que deverá ser chamada quando for
necessário alterar o estado e dentro de useState é defi nido o
valor inicial do estado no caso 0.
const [counter, setCounter] =
useState(0);
O contador criado pode ser utilizado para, por exemplo,
incrementar e exibir o número de vezes que um botão é
clicado. Então no evento onPress do botão é realizada
a chamada ao setCounter. A cada clique então o estado é
alterado e o componente é renderizado novamente, e o novo
valor do contador é exibido em um Text.
O código abaixo, cujo resultado pode ser visualizado na
Figura 2, tem dois botões um que incrementa o contador e
outro que zera o contador. Ambos ao serem pressionados
atualizam o valor do State e o componente é então renderizado
para exibir o novo valor no Text.
import React, { useState } from
“react”;
import { View, Text, Button } from
‘react-native’;
export default function App() {
const [counter, setCounter] =
useState(0);
return (
<View style={{ paddingTop: 50
}}>
<Text>{counter}</Text>
<View style={{ fl exDirection:
‘row’ }}>
<Button
title=”Contar”
onPress={() =>
setCounter(counter + 1)}
/>
<Button
title=”Zerar”
color=”#f194ff”
onPress={() =>
setCounter(0)}
/>
</View>
</View>
);
}
Figura 2 – Contador com State. Fonte: Acervo pessoal.
Pode ser interessante em determinadas situações criar
um Hook personalizado que irá isolar a lógica do Hook
29
em um lugar diferente permitindo, inclusive, ser reutilizado
para outros componentes, essa técnica é conhecida como
LogicHooks.
No caso do contador deve-se criar uma função, que por
padrão deve usar o prefi xo use, e dentro dela criar a constante
com o useState e criar também a função que irá conter a lógica
do Hook. Ambas serão retornadas na função.
const useCounter = (initValue) => {
const [value, setValue] =
useState(initValue);
const setCounter = () => {
setValue(value + 1);
};
return [value, setCounter];
};
Dentro do componente para utilizar essa versão basta
fazer como no Hook normal, modifi cando agora o nome para
o useCounter.
const [counter, setCounter] =
useCounter(0);
E no botão basta chamar o setCounter que ele já irá
incrementar e exibir como esperado.
2- Aplicação Prática
Nesse momento você já é capaz de criar um componente
próprio, passar informação para ele utilizando as propriedades
e renderizá-lo novamente utilizando os estados. Nesta seção,
vamos fazer então a primeira aplicação prática desta disciplina,
criar uma lista de pessoas.
O primeiro passo é criar o componente que irá conter os
itens da lista. Cada item terá uma View que delimita o espaço
que o texto de quantidade do primeiro nome e o segundo
nome da pessoa irá ocupar. Através das propriedades esse
componente irá receber essas informações.
import React from ‘react’;
import { StyleSheet, Text, View} from
‘react-native’;
export default function AppItem(props)
{
return (
<View style={styles.container}>
<Text style={styles.
textItem}>{props.nome} - </Text>
<Text style={styles.
textItem}>{props.sobrenome}</Text>
</View>
);
}
Para deixar uma interface mais amigável os estilos para a
View e os Texts serão criados separadamente, com um detalhe,
o conteúdo da View será exibido em linha (fl exDirection:
‘row’) e terá uma borda na base com a cor cinza.
const styles = StyleSheet.create({
container: {
fl exDirection: ‘row’,
backgroundColor: ‘#fff’,
borderBottomWidth: 1,
borderBottomColor: ‘#CCC’,
paddingBottom: 10,
marginTop: 30,
width: ‘100%’
},
textItem: {
fontSize: 20,
}
});
Esse código é colocado dentro do arquivo AppItem.js
que está dentro da pasta components e será importado dentro
do arquivo principal para exibir os itens da lista de compras.
import AppItem from ‘./components/
AppItem’;
Utilizando o useState vamos criar um estado que irá
receber um array de itens que serão exibidos na aplicação.
Inicialmente esse array estará vazio.
const [items, setItems] =
useState([]);
E um botão será incluído para adicionar um nome
aleatório sempre que for pressionado. Esse nome aleatório
será obtido a partir de uma API disponível em: https://
gerador-nomes.herokuapp.com/ nela quando passados na url
/nome/aleatorio retorna um array com o nome completo de
uma pessoa Ex: [“Davide”,”Miranda”,”Damasceno”].
Para receber as informações da API utilizamos a
função fetch, que recebe como parâmetro a url que deve ser
‘acessada’. Quando essa função termina, ela executa o then
que é disparado quando tem uma resposta correta da url
chamada, em seguida o método json é chamado que converte
a resposta do fetch para um objeto que o JavaScript vai
entender.
Quando o objeto é recebido corretamente, ele é
concatenado junto com os itens que já estão no estado, que
então renderiza a tela novamente incluindo o item na lista.
<Button
title=”Adicionar Item”
color=”#f194ff”
onPress={() => {
fetch(‘https://gerador-nomes.
herokuapp.com/nome/aleatorio’)
.then(response => response.
json())
30Programação para Dispositivos Móveis
.then(json => {
setItems(items.concat({id:items.
length+1, nome:json[0],
sobrenome:json[1]}));
});
}}
/>
A exibição da lista de nomesé feita utilizando a função
map do JavaScript, ela é responsável por ‘percorrer’ o array
de items e para cada um dos itens fazer a construção do
AppItem, o componente que foi criado. São passados para o
componente uma key, que deve ser única para cada elemento
da lista, o nome e o sobrenome.
items.map(item => {
return <AppItem key={item.id}
nome={item.nome} sobrenome={item.
sobrenome} />
})
É possível ainda colocar um botão para zerar a lista de
nomes que foi carregada, começando ela do zero.
O arquivo App.js completo e o resultado a ser exibido na
interface para o usuário podem ser analisados abaixo.
import React, { useState } from
“react”;
import { View, Button } from ‘react-
native’;
import AppItem from ‘./components/
AppItem’;
export default function App() {
const [items, setItems] =
useState([]);
return (
<View style={{ paddingTop: 40 }}>
<Button
title=’Limpar Lista’
onPress={() => setItems([])}
/>
<Button
title=”Adicionar Item”
color=”#f194ff”
onPress={() => {
fetch(‘https://gerador-
nomes.herokuapp.com/nome/aleatorio’)
.then(response => response.
json())
.then(json => {
setItems(items.concat({id:items.
h+1,nome:json[0],sobrenome:json[1]}));
});
}}
/>
{items.map(item => {
return <AppItem key={item.
id} nome={item.nome} sobrenome={item.
sobrenome} />
})}
</View>
);
}
Figura 3 – Lista de Nomes. Fonte: Acervo pessoal.
Chegamos ao fi nal da quinta aula. Vamos recordar?
Retomando a aula
1– State
Na primeira seção foi demonstrada a utilização de estados
que possibilitam a renderização do componente sempre que
o estado dele é alterado. Foi feito também uma diferenciação
com as propriedades.
2– Aplicação Prática
Na segunda seção foi exemplifi cada a criação de uma
aplicação que funciona como uma lista de nomes, cada vez
que um botão é pressionado um nome é incluído no estado
do componente da lista que é chamado para ser renderizado
novamente.
Col, A. D. In: React Native Basics: Props & States,
2019. Disponível em: https://devsamurai.com.br/react-
native-basics-props-states/. Acesso em: 24 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