Interface gráfica com React Native

Prévia do material em texto

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 1/49
Objetivos
Módulo 1
Interface interativa de um aplicativo mobile
Esquematizar os passos para a definição da interface interativa de um aplicativo mobile.
Acessar módulo
Módulo 2
Componentes de lista e multivalorados
Descrever os componentes de lista e multivalorados disponíveis no React Native.
Acessar módulo
Interface grá�ca com React Native
Profª. Alexandre PaixãoDescrição
Apresentação dos componentes de interface gráfica disponíveis no framework de desenvolvimento mobile React Native.
Propósito
Conhecer os componentes de interface gráfica disponíveis no framework React Native para o desenvolvimento de
aplicativos mobile.
Preparação
Para o acompanhamento do conteúdo e a codificação dos exemplos a serem apresentados ao longo deste conteúdo,
será necessária a utilização de uma IDE (sigla de integrated development environment). Recomenda-se o Visual Studio
Code, que é um software gratuito. Além disso, será preciso configurar o ambiente de desenvolvimento e testes no qual
diferentes configurações e ferramentas poderão ser usadas. Para mais detalhes a respeito dessa etapa, o site oficial do
React Native deverá ser consultado. Os códigos dos exemplos em React Native estarão disponibilizados ao longo do
conteúdo em formato texto. Desse modo, eles poderão ser facilmente copiados e colados na interface do ambiente de
desenvolvimento para sua execução e validação.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 2/49
Módulo 3
Principais modelos de navegação
Descrever os três principais modelos de navegação do React Native.
Acessar módulo
Módulo 4
Recursos de estilização e animação
Listar os recursos de estilização e animação.
Acessar módulo
1
Interface interativa de um aplicativo mobile
Ao final deste módulo, você será capaz de esquematizar os passos para a definição da interface interativa de um aplicativo mobile.
O processo de desenvolvimento de aplicativos envolve uma série de conhecimentos. Entre eles, destacam-se a organização do processo como
um todo e o conhecimento de ferramentas, bibliotecas e demais recursos a serem utilizados no projeto.
Este conteúdo tem como um de seus principais objetivos apresentar alguns dos recursos e componentes disponíveis no framework React
Native que estão voltados para a construção da interface gráfica: os elementos de interatividade, navegação e estilização. Ao final deste texto,
teremos visto os conceitos necessários para a construção da interface – normalmente composta por telas e componentes reutilizáveis – de
um aplicativo mobile.
Introdução
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 3/49
Primeiras palavras
Um importante passo antes de se iniciar, de fato, a codificação de um aplicativo (e o mesmo pensamento também deve valer para qualquer tipo de
software) é estruturar como o aplicativo funcionará.
Para isso, é preciso ter em mente não só os requisitos de software, ou seja, as funcionalidades do aplicativo, mas também como tais
funcionalidades devem estar dispostas, como são acessadas por meio da navegação pelo aplicativo e, por fim, mas não somente, como se dispõe
cada elemento da interface gráfica de modo a criar a melhor experiência possível para o usuário.
Interface de aplicações.
Tendo em mente a disposição dos elementos da interface gráfica citada, destacaremos adiante algumas técnicas para a definição da interface de
um aplicativo mobile.
Requisitos ou funcionalidades
Como primeiro passo para a esquematização da interface e interatividade de nosso aplicativo mobile, devemos ter em mãos as suas
funcionalidades, ou seja, precisamos conhecer tudo o que o aplicativo deverá fazer e tudo o que poderá ser feito por meio dele. Essa lista de
funcionalidades pode ser:
Simples
Como uma mera lista.
Elaborada

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 4/49
Incluindo protótipos e requisitos, como paleta de cores e restrições visuais ou estruturais, além de outros aspectos.
Como exercício, confeccionaremos juntos a lista de funcionalidades de um aplicativo bancário. Por meio desse app, deve ser possível, graças ao
fluxo básico, realizar as seguintes atividades:
Já no fluxo alternativo, que acontece quando o usuário não se loga, tem de ser possível:
Logar com as credenciais (usuário e senha) previamente fornecidas pela instituição bancária.
Após o login, o usuário deverá visualizar, de imediato, um resumo de seu saldo e os últimos lançamentos realizados em sua conta.
Na primeira tela após o login, deverá ser possível exibir banners publicitários rotativos para o usuário.
As demais ações ou opções disponíveis, após o usuário se logar, são:
Consulta de extrato detalhado.
Pagamento de contas.
Transferência bancária.
Consulta de fatura e lançamentos de cartão de crédito.
Consulta de investimento financeiro.
Exibir os canais de contato.
Exibir banners rotativos de publicidade.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 5/49
As funcionalidades descritas, embora bastante reduzidas na comparação com um aplicativo real, nos ajudam a começar o planejamento da
interface de nosso aplicativo. Graças a tais requisitos é possível, por exemplo, entender quantas telas existirão no aplicativo, assim como identificar
os elementos de interação, desde botões simples até elementos visuais com função de publicidade.
Telas e elementos visuais
Continuando nosso exercício e considerando os requisitos descritos, podemos fazer um primeiro esboço dos sete elementos que comporão a
interface de nossa aplicação:
Nº Tela Elementos visuais Elementos de interação
1 Inicial / login
Logomarca da instituição; banner
publicitário rotativo; canais de
comunicação.
Input de dados; botão de ação.
2 Home (após login)
Logomarca da instituição; textos; títulos
(label); banner publicitário rotativo.
Botão de ação; menu de navegação.
3 Consulta de extrato Logomarca; textos; títulos (label). Botão de ação; menu de navegação.
4 Pagamento de contas Logomarca; texto; títulos (label).
Botão de ação; menu de navegação; input de
dados; acesso à câmera do dispositivo móvel.
5 Transferência bancária
Logomarca; texto; títulos (label); listagem
de texto.
Botão de ação; menu de navegação; input de
dados; seleção de dados.
6
Consulta de fatura de
lançamentos de cartão de
crédito
Logomarca; texto; títulos (label); listagem
de texto.
Botão de ação; menu de navegação; input de
dados; seleção de dados.
7
Consulta de investimento
financeiro
Logomarca; texto; títulos(label); listagem
de texto.
Botão de ação; menu de navegação; input de
dados; seleção de dados.
Quadro: Esboço dos elementos da interface. 
Elaborado por: Alexandre Paixão.
Após o preenchimento inicial do quadro contendo as telas e os elementos visuais com base nos requisitos – e tendo em mente que tal exercício
está bastante simplificado se comparado a exemplos reais –, identificamos a presença de, pelo menos, sete telas em nosso aplicativo.
Além disso, é possível verificar que alguns desses elementos visuais aparecerão em mais de uma tela. Esse fator é importante!
Elementos que aparecem em mais de uma tela podem ser “componentizados”, o que permite
que sejam reaproveitados ao longo da aplicação.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 6/49
De�nição de componentes
Escolha dos componentes
Dando seguimento à esquematização da interface e dos elementos de interatividade de nosso app, agora cumpriremos dois passos:
m
Confecção de protótipos navegáveis
O primeiro passo, embora seja muito indicado, nãoserá tratado aqui, já que foge à proposta de nosso conteúdo.
m
Escolha dos componentes nativos ou de terceiros a serem utilizados
O segundo passo deve levar em conta alguns aspectos que vão além de preferências visuais ou estéticas.
Partiremos então do segundo passo. Como dito, é preciso tomar alguns cuidados com a organização, a fim de “conteinerizar” os elementos
utilizados, e a compatibilidade ou as restrições, em que questões – como a dos elementos que não podem ser aninhados dentro de outros ou as
diferenças de tamanho de tela e espaço útil disponível nos diferentes dispositivos móveis – devem ser consideradas.
Alguns fragmentos de código com diferentes organizações dos componentes na tela, assim como comentários sobre cada um deles, podem ser
vistos a seguir:
React Native 

Saiba mais
Há várias ferramentas disponíveis para a confecção de protótipos navegáveis – inclusive gratuitas.

 return (
<View
1
2
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 7/49
O primeiro fragmento possui uma “View” como container principal, dentro da qual os demais componentes ficam aninhados. Em termos de
semântica, embora o código em questão funcione sem erros, é recomendado não aninhar componentes de imagem dentro de componentes de
texto como está apresentado anteriormente.
Observemos outro fragmento:
React Native 
Dica
Utilize o componente View como container de outros componentes, inclusive de outras Views. Isso ajudará a organizar o código e a
estilizá-lo.

 style={{
 flexDirection: 'row',
 height: 100,
 padding: 20
 }}
>
 <View>
 <Image />
 </View>
 
 <View>
T t H ll W ld! /T t
return (
<SafeAreaView>
 <ScrollView>
 <Text>
 Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit, sed do
 eiusmod tempor incididunt ut labore et 
 dolore magna aliqua. Ut enim ad
 minim veniam, quis nostrud exercitation ullamco 
 laboris nisi ut
 aliquip ex ea commodo consequat. Duis aute irure 
 dolor in reprehenderit in voluptate velit esse 
 cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non 
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 8/49
Os pontos de atenção desse novo fragmento estão na utilização dos seguintes componentes:
O ScrollView insere um scroll próprio para o conteúdo nele inserido. Ele deve ser utilizado quando houver muito texto a ser exibido na tela.
Considerando as limitações de tamanho em um dispositivo móvel, a utilização desse componente melhora a experiência do usuário,
permitindo a organização das informações mais importantes que queremos exibir em uma única tela.
Você pode utilizar tal componente para a plataforma iOS e implementar, por meio de estilos condicionais, uma “área de conteúdo segura” para a
plataforma Android.
Ainda na área de conteúdo seguro, cabe destacar um último componente: o KeyboardAvoidingView. Ele resolve problemas comuns existentes entre
os componentes visuais e o teclado virtual, ajustando automaticamente a altura e a posição de acordo com a altura do teclado.
Componentes de interface e interação
Veremos agora alguns elementos de interface, além dos vistos anteriormente, e de interação que nos ajudarão a esquematizar as telas de nosso
aplicativo.
Modal
Este componente é uma boa estratégia para apresentar mais conteúdo sem que seja necessário levar o usuário para outra página ou mesmo criar
um scroll vertical muito grande. O acesso à janela Modal pode ser feito por meio do clique em um botão, por exemplo. Veja o fragmento a seguir:

ScrollView SafeAreaView
Saiba mais
Leia mais sobre o SafeAreaView na documentação oficial do React Native.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 9/49
React Native 
Botões
O fragmento de código anterior contém um elemento de interação, o Pressable, cujo funcionamento equivale ao de um botão. O React Native possui
alguns componentes com essa mesma função, como, por exemplo:

Button

TouchableHighlight

TouchableOpacity

TouchableWithoutFeedback
return (
<View>
 <Modal
 animationType='slide'
 transparent={true}
 visible={modalVisible}
 onRequestClose={() => {
 setModalVisible(!modalVisible);
 }}
 >
 <View>
 <View>
 <Text>Texto dentro da modal</Text>
 <Pressable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 10/49
Tais componentes compartilham entre si algumas semelhanças e diferenças, sendo a diferença mais importante a menor possibilidade de
estilização presente no Button.
A principal característica do Button é reagir a eventos de interação por parte do usuário, como
o toque, leve ou demorado, sobre eles.
Quando estivermos montando nossas telas, deveremos definir claramente seu título a fim de indicar qual ação será disparada no toque. Outra dica é
utilizar, além de um título, um ícone. Isso vale, por exemplo, quando tais elementos são usados tanto individualmente quanto em barras de
navegação.
Exemplo de button.
ActivyIndicator
Este componente exibe elementos visuais que comumente chamamos de “loading”. Embora bastante negligenciado, trata-se de um dos mais
importantes elementos em termos de interatividade, pois seu uso permite informar ao usuário que uma tarefa está sendo processada.
Loading.
Recomendação
Conforme a orientação constante na documentação oficial do React Native, devemos dar preferência à implementação do componente
Pressable.

Recomendação
A sugestão em relação a esse componente é utilizá-lo sempre que uma requisição a um recurso externo seja realizada. Com isso, mesmo
que haja demora na resposta, o usuário é informado de que algo está acontecendo. Do contrário, a espera pela conclusão de uma tarefa
demorada sem nenhuma indicação visual pode dar a ele a sensação de que o aplicativo travou, por exemplo.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 11/49
Outros componentes
Além dos componentes vistos até aqui, há vários outros disponíveis para a organização das telas de nosso aplicativo. Eles possuem, além de
organizar visualmente os elementos ou fornecer interatividade, diferentes funções, como permitir a navegação entre telas e a apresentação
otimizada de recursos específicos, como listas e cards.
Processo de de�nição da interface de um aplicativo mobile
Neste vídeo, falaremos sobre os pontos relevantes e de atenção ao realizarmos uma esquematização do passo a passo para definição da interface
interativa de um aplicativo mobile.
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
Modal
4:03 min.
ActivyIndicator



01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 12/49
3:41 min.

Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
Questão 1
Em relação aos passos para a construção de uma interface interativa que possibilite ao usuário uma boa experiência de utilização de
aplicativos, selecione a opção verdadeira.
A
As cores devem ter destaque na construção de uma interface, sendo sempre sugerido utilizar a maior gama possível de
combinações a fim de agradar à maioria dos usuários.
B
As etapas para a criação de uma interface interativa são altamente subjetivas. Logo, o melhor a se fazer é seguir as
preferências do próprio desenvolvedor.
C
Duranteo processo de definição de uma interface, é indispensável ter na equipe vários profissionais para garantir que seja
coletada a maior quantidade possível de opiniões e feedbacks.
D
O processo de esquematização da interface interativa de um aplicativo precisa levar em conta aspectos, como os requisitos
de software e os recursos disponíveis na linguagem a ser utilizada em sua construção. Além disso, outros aspectos, como
um design em sintonia com os demais supracitados, tendem a garantir uma boa experiência para os usuários.
E
Ao utilizar o framework React Native, é possível implementar qualquer interface interativa a partir de um design elaborado em
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 13/49
2
Componentes de lista e multivalorados
protótipos navegáveis independentemente de sua complexidade.
Responder
Questão 2
O React Native possui vários componentes para a confecção de interfaces interativas. Em relação aos componentes estudados, é correto
afirmar que:
A
O React Native é bastante flexível, exceto em relação à conteinerização ou ao aninhamento de componentes, que deve
obedecer algumas restrições bastante rígidas de conteinirização.
B
Em termos de componentes de interface, estão disponíveis as mesmas opções tanto para a plataforma Android quanto para
a iOS, sem exceções.
C
Além de contar com vários componentes nativos, o React Native permite que outros sejam criados a partir de novas tags e de
elementos implementados pelos próprios desenvolvedores.
D
O React Native conta com vários componentes de interface e interação: alguns, específicos para a plataforma Android; outros,
para a iOS. Além disso, há vários componentes de terceiros desenvolvidos a partir dos componentes nativos. Trata-se de uma
framework bastante flexível, permitindo a combinação e o aninhamento entre diferentes tipos de componentes.
E Todos os componentes de interface do React Native têm como base o elemento View.
Responder

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 14/49
Ao final deste módulo, você será capaz de descrever os componentes de lista e multivalorados disponíveis no React Native.
Componentes especí�cos para tarefas especí�cas
Existem componentes para a construção de interfaces interativas que, além de serem utilizados com a finalidade de montagem da interface e de
interação, também podem ser empregados para outras funcionalidades.
O componente View é um ótimo exemplo: por meio dele, podemos tanto organizar nossas telas em bloco quanto exibir textos. Neste módulo,
abordaremos os componentes que possuem responsabilidades específicas: os de lista e multivalorados.
Componentes de lista
O React Native possui três principais componentes nativos de listas:

VirtualizedList

SectionList
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 15/49

FlatList
Estabeleceremos as definições e a utilidade desses três componentes, assim como suas implementações. Antes disso, no entanto, é importante
entender o comportamento geral deles.
Como os próprios nomes sugerem, trata-se de componentes voltados para a exibição de dados no formato de lista (listas, arrays, coleções, etc.).
Você verá inclusive que eles possuem algumas características semelhantes às das listas em geral, como o fato de possuir índice e a capacidade de
iteração em seu conteúdo.
VirtualizedList
Este componente constitui a implementação-base para os outros dois componentes de lista, que acabam sendo mais utilizados devido às suas
particularidades – o que, aliás, faz com que ambos também sejam mais bem documentados.
Segundo a documentação oficial, o VirtualizedList oferece mais flexibilidade que o FlatList, tendo melhor suporte a dados imutáveis contra as
matrizes simples normalmente usadas com o FlatList.
Exemplo de uso do VirtualizedList.
Das características do VirtualizedList, destacam-se:
Otimização
Otimização do consumo de memória e de desempenho no manuseio de grandes listas.
Manutenção de janela
Manutenção de janela finita de renderização de itens ativos e substituição daqueles que estejam fora da janela de renderização.
Adaptação da janela à rolagem de tela
A adaptação permite que os itens sejam renderizados de forma incremental, o que minimiza a ocorrência de espaços em branco.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 16/49
Observaremos a seguir um exemplo de implementação de lista utilizando o componente VirtualizedList:
React Native 
Lista com VirtualizedList.
O código do exemplo imprime 100 retângulos na tela contendo o texto “Item”, seguido de um número de 1 a 100. Embora simples, ele nos permite
observar o componente em funcionamento. Experimente rolar a tela, indo até o final e retornando ao início. Na prática, nossas listas são
alimentadas por conteúdo proveniente de fontes externas, como APIs, por exemplo.
É normal, nessas situações, ocorrer uma pequena demora no primeiro carregamento dos dados. Entretanto, após isso, o VirtualizedList cuidará para
que a visualização de todo o conteúdo seja feita de forma suave, sem quebras no layout ou interrupções. Ainda nos atendo ao código, precisamos
fazer alguns comentários sobre os atributos desse componente:
Recomendação
Antes de continuar, copie e execute o código para conseguir ver o componente em funcionamento.

Data 
getItem 
getItemCount 
import React from 'react';
import { View, VirtualizedList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [];
const getItems = (data, index) => ({
 id: Math.random().toString(12).substring(0),
 title: `Item ${index+1}`
});
const getItemsCount = (data) => 100;
const Item = ({ title }) => (
 <View style={styles.item}>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 17/49
SectionList
A SectionList é um componente para a exibição de dados em formato de lista que permite que eles sejam seccionados, ou seja, exibidos em seções.
Para ficar mais fácil de entender o funcionamento e a utilidade desse componente, imagine que você tenha uma lista de produtos para exibir e que
esses produtos pertencem a diferentes categorias de produtos.
Ao utilizar o SectionList, é possível agrupá-los por categoria, exibindo algum dado que a identifique, como seu nome, por exemplo, e aninhados a
cada diferente categoria seus respectivos produtos. Como frisamos, tal componente facilita esse trabalho de seccionamento dos dados, evitando a
necessidade de criar mais códigos para ter o mesmo resultado utilizando outros componentes de lista.
Exemplo de SectionList.
O código adiante mostra como a SectionList pode ser utilizada. Repare nos atributos, nos quais são definidos tanto os dados a serem listados
quanto o dado a ser utilizado como “agrupador” ou definidor de cada seção.
Outro detalhe: nesse exemplo, é utilizado uma string no formato JSON como fonte de dados. Na prática, você poderá consumir os dados de fontes
externas, tomando o cuidado de organizá-los para que eles tenham um elemento que identifique a seção e outro para os dados de cada seção.
Vamos ao exemplo:
React Native 
renderItem 
keyExtractor 
initialNumToRender 
Saiba mais
Além dos atributos e das funções descritas, há outros disponíveis para o VirtualizedList. Consulte a documentação oficial a respeito.

import React from 'react';
import { StyleSheet, Text, View, SectionList, StatusBar } from 'react-native';
const DADOS= [
 {
 titulo: 'Eletrônicos',
 data: ['TV', 'Caixa de Som', 'Toca-discos Retrô']
 },
 {
1
2
3
4
5
6
7
8
9
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir18/49
Lista com SectionList.
Analise o código anterior e repare que a SectionList possui alguns atributos semelhantes aos vistos na VirtualizedList. Sendo assim, devemos
mencionar outros atributos que lhe são característicos:
sections
Propriedade obrigatória e que define os dados a serem listados.
renderSectionHeader
Define o elemento a ser renderizado no início de cada seção.
Observe novamente o código do nosso exemplo onde utilizados o renderSectionHeader, e perceba que exibimos um componente Text contendo a
chave “título” da constante DADOS, que é usada para alimentar a lista.
FlatList
Conceitos e funcionalidades
O último componente de lista que veremos é o FlatList. Ele é otimizado, em termos de desempenho, para renderizar listas simples e básicas. Além
disso, possui suporte para vários recursos muito úteis. Conheça alguns deles a seguir:
Possui suporte a múltiplas
plataformas.
Permite exibir os itens de
forma horizontal.
Possui suporte a cabeçalho
e rodapé.
Permite a inclusão de
separadores (componentes
que podem ser usados para
separar os itens da lista).
 titulo: 'Vestuário',
 data: ['Camisas', 'Camisetas', 'Casacos']
 },
 {
titulo: 'Livros'
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 19/49
Vejamos um exemplo de implementação do FlatList:
React Native 
Lista com FlatList.
Recursos adicionais do FlatList
O componente FlatList, assim como os outros dois apresentados anteriormente, possui alguns recursos adicionais para tratar a exibição de dados
considerando aspectos mais avançados, como, por exemplo, a atualização dos dados.
No que tange à atualização dos dados, ou seja, quando quisermos fazer com que o componente “escute” e monitore os dados a fim de identificar
eventuais atualizações, teremos de incluir uma propriedade a mais: o “extraData”. Tal propriedade poderá receber um método ou um state.
Exemplo de FlatList.
Outro recurso muito interessante presente no FlatList – e nos demais componentes de lista – é o “onEndReached” (e, consequentemente, o
“onEndReachedThreshold). Com o uso dessa função, podemos informar ao nosso aplicativo que determinada ação deverá ser executada quando o
usuário chegar ou visualizar o final dos elementos da lista. Normalmente, ela é usada para carregar, mediante demanda, novos conteúdos.
Saiba mais
Alguns desses recursos também são suportados pelos demais componentes de lista, os quais, aliás, também podem possuir recursos
específicos. Para mais detalhes, consulte a documentação oficial do React Native.

import React from 'react';
import { View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DADOS = [
 {
 id: '1',
 descricao: 'TV Led 49',
 categoria_id: 1
 },
 {
 id: '4',
 descricao: 'Camisa Trilha',
 categoria_id: 2
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 20/49
Próximos passos
Até aqui, você viu como esquematizar a interface interativa de um aplicativo utilizando diversos componentes, alguns mais gerais e de múltiplos
usos, como a View, e outros mais específicos e voltados para determinadas necessidades, como as listas.
Introduziremos novos componentes no próximo módulo. Por intermédio deles, será possível organizar a navegação entre as diversas telas que
normalmente compõem um aplicativo.
Componentes de lista no React Native
Neste vídeo, abordaremos os principais componentes de lista e multivalorados disponíveis no React Native.
Comentário
Você, com certeza, já observou o emprego desse recurso em aplicativos de redes sociais, pois inicialmente é carregado um conjunto
limitado de dados. Conforme você rola a tela para baixo e chega ao final desse conjunto inicial de dados, novas informações são
carregadas.


01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 21/49
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
VirtualizedList
4:06 min.
FlatList
4:48 min.


Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
Questão 1
Tendo complementado seu conhecimento sobre os componentes nativos disponíveis no framework React Native, é correto afirmar que:
A
O React Native é um framework tão flexível que podemos utilizar quaisquer componentes para realizar quaisquer tarefas. Em
outras palavras, até mesmo os ditos “componentes com funções específicas”, como as listas, não passam de componentes
codificados a partir dos nativos básicos, como a View e o Text.
B
No React Native, estão disponíveis nativamente diversos componentes que permitem a organização visual do conteúdo,
como a exibição de dados, inclusive contando com componentes específicos e otimizados para algumas tarefas, como, por
exemplo, os de lista.


01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 22/49
C
Embora o React Native possua uma grande quantidade de componentes nativos, alguns deles estão limitados à plataforma
Android, não existindo equivalentes na plataforma iOS.
D
Os componentes de lista não podem ser usados em conjunto em um mesmo aplicativo devido a problemas de
compatibilidade e otimização de desempenho.
E
Os componentes FlatList e VirtualizedList são especializações do componente SectionList, exceto pelo fato de ambos não
possibilitarem a exibição de títulos para as seções contidas nos dados que renderizam.
Responder
Questão 2
Sobre o componente VirtualizedList, marque a afirmativa correta.
A
É recomendado o uso do VirtualizedList para os casos em que se precisa de menos flexibilidade que aquela fornecida pelos
componentes Flat e SectionList.
B
O VirtualizedList, por ser um componente básico, não possui algumas funcionalidades presentes nos outros componentes de
lista, como a função “extraData”, por exemplo.
C
No VirtualizedList, que é uma lista otimizada a partir do componente ScrollView, há um limite para a quantidade de dados
possíveis de serem renderizados.
D
O VirtualizedList possui a capacidade de tratar grandes quantidades de dados. Entretanto, nesses casos, não há nenhum
mecanismo que impeça a ocorrência de alguns travamentos de tela quando dados antigos são substituídos por novos.
E
O componente VirtualizedList é a implementação básica dos outros dois componentes de lista: FlatList e SectionList. Esses
componentes são muito parecidos, tendo em comum uma série de recursos.
Responder
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 23/49
3
Principais modelos de navegação
Ao final deste módulo, você será capaz de descrever os três principais modelos de navegação do React Native.
Navegando em um aplicativo mobile
Estamos acostumados a utilizar o conceito de navegação proveniente dos sites ou sistemas web. Em tais ambientes, estão presentes termos como:
Com isso, é normal, no desenvolvimento de aplicativos mobile, se pegar emprestado alguns desses termos a fim de fazer uma assumpção e/ou
uma correlação de conceitos. Pode-se afirmar que um aplicativo é normalmente composto por várias páginas.

Páginas – página
inicial/home.
Páginas secundárias. Links – links externos e
internos.
Breadcrumb.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 24/49
Ao longo deste módulo, falaremos sobre os aspectos que envolvem a navegação entre as telas/páginas de um aplicativo mobile. Para isso,
voltaremos a fazer as correlações mencionadas, descrevendo os três principais modelos disponíveis no React Native.
Navegação entre páginas de aplicativo mobile.
Preparando onosso ambiente
Para implementar os exemplos que serão demonstrados neste módulo, é necessário instalar algumas novas dependências em nosso projeto (se
você ainda não criou um projeto, recomendo que o faça agora). Essas dependências serão listadas a seguir:
@react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
Atenção
Embora muitos desenvolvedores utilizem o termo “página”, é comum também se referir às seções do aplicativo como “telas”. É ainda mais
usual referenciar tais termos em seus equivalentes no idioma inglês: pages ou screens.

Dica
Para instalar as dependências descritas, use um gerenciador de dependências (NPM ou YARN) a partir do terminal, estando na raiz da
pasta que contém seu projeto. Observe a necessidade de executar o comando “react-native link” caso esteja utilizando uma versão do
React Native Cli inferior a 0.60. Além disso, no ambiente iOS, será preciso rodar os pods por meio do comando “npx pod-install ios” para
completar o processo de “linking” das dependências.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 25/49
Stack Navigation
Apresentação
O primeiro modelo de navegação que veremos é o Stack Navigation. Como seu nome diz, esse modelo consiste no empilhamento de telas. Ou seja,
cada nova tela acessada por meio dele é colocada por cima em uma pilha, sobrepondo a tela anterior.
Exemplo de navegação com Stack Navigation.
Podemos relacionar o Stack Navigator a dois conceitos já conhecidos:
O conceito do Stack Navigator é bastante similar ao do navegador utilizado em um site (ou sistema web): por meio de links ou botões
exibidos em um menu, na barra de navegação e até mesmo em links no meio do próprio conteúdo, se é levado até uma nova página.
Entrando nela, pode-se continuar navegando para novas páginas ou voltar – seja por intermédio de um link ou pela opção “voltar” presente no
navegador – para a anterior.
Seguindo os dois conceitos apresentados, o Stack Navigator provê um mecanismo que possibilita:

Transição entre telas.

Gestão do histórico de navegação em um aplicativo.
Para se codificar a navegação utilizando esse modelo, é preciso haver um NavigationContainer e, no mínimo, um createNativeStackNavigator. Além
Navegador Histórico
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 26/49
disso, são necessárias pelo menos duas telas já codificadas em nosso aplicativo para se definir a navegação entre ambas.
Mais adiante, veremos um código que demonstra a criação do ponto de entrada de um aplicativo (App.js) e da navegação entre duas telas (Home e
Sobre).
Estrutura do projeto
A imagem a seguir mostra a estrutura do projeto no qual foi utilizado o Expo (por meio do snack.expo.dev):
Estrutura de um projeto.
O script App.js é o ponto de entrada do aplicativo em que o StackNavigator foi definido. A pasta screens guarda as telas About e Home. O código da
tela Home pode ser visto a seguir:
React Native 
home.js
Dica
Antes de codificarmos, precisamos instalar a seguinte dependência:
@react-navigation/native-stack

import * as React from 'react';
import { View, Text, Button } from 'react-native';
function HomeScreen({navigation}) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button title='Ir para About' onPress={() => navigation.navigate('About')} />
 </View>
 );
}
export default HomeScreen;
1
2
3
4
5
6
7
8
9
10
11
12
13
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 27/49
O próximo código é da tela About:
React Native 
about.js
Criação do Stack Navigator
Este código mostra a criação do Stack Navigator a partir do script App.js:
React Native 
App.js
Análise do código
import * as React from 'react';
import { View, Text, Button } from 'react-native';
function AboutScreen({navigation}) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>About Screen</Text>
 <Button title='Ir para Home' onPress={() => navigation.navigate('Home')} />
 </View>
 );
}
export default AboutScreen;
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/home';
import AboutScreen from './screens/about';
const Stack = createNativeStackNavigator();
function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 28/49
Como de praxe, a primeira coisa a se fazer ao escrevermos nosso código em React Native é importar as dependências que utilizaremos. Em nosso
caso, além dos componentes de exibição, como View e Text, importaremos:
NavigationContainer
Container responsável por conter toda a navegação de nosso aplicativo.
createNativeStackNavigator
Responsável por criar o Stack de navegação.
Repare que criamos uma constante denominada Stack – ela poderia ter qualquer nome, ficando à sua escolha – e a definimos como uma instância
de createNativeStackNavigator. Na função App, usaremos essa constante para definir os parâmetros de navegação.
Em primeiro lugar, criamos o container Stack.Navigator. Dentro dele, informamos as opções de navegação, ou seja, quais telas farão parte de nossa
pilha de navegação e serão gerenciadas pelo Stack. Isso é feito com a propriedade Stack.Screen. Tal propriedade recebe como parâmetros um
“name”, pelo qual nos referiremos a cada item, e um “componente”, em que definimos quais telas serão apresentadas. Em nosso exemplo,
passamos como “component” as telas HomeScreen e AboutScreen (ambas também importadas no início do script).
Agora, falaremos novamente das características do mecanismo provido pelo Stack Navigator:
Opções avançadas
Além dos recursos até aqui apresentados, o Stack Navigator possui outras opções de configuração e navegação. É possível ainda combinar mais de
um Stack Navigator em nosso aplicativo.
Navegação entre telas 
Histórico 
Recomendação
Primeiro, implemente e busque entender o funcionamento dos códigos apresentados, para só então se aprofundar no entendimento do
modelo de navegação Stack Navigator.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 29/49
Apresentação
Este estilo de navegação é composto por guias ou abas que contêm botões – com título e ícone ou por suas possíveis combinações – por meio dos
quais se navega ao pressionar tais elementos. Essa navegação é normalmente inserida na parte inferior do aplicativo, embora também possa se
localizar no topo.
Exemplo de navegação com Tab Navigation.
Estrutura do projeto
Em nosso exemplo, poderemos utilizar a mesma estrutura de pastas do projeto anterior (Stack Navigator), mantendo nossas screens Home e
About. Entretanto, será necessário modificar nosso App.js.
Criação do Tab Navigator
Nosso App.js ficará desta forma:
React Native 
Atenção
Antes de vermos os códigos de um exemplo funcional de navegação por Tab, precisamos instalar a seguinte dependência:
@react-navigation/bottom-tabs

Recomendação
Crie um projeto copiando do anterior apenas as duas telas já mencionadas.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
12
3
4
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 30/49
App.js
Análise do código
Perceba, no código acima, que a criação do Tab Navigator, em termos de sintaxe, é semelhante à do Stack Navigator. Basta, portanto, realizar as
seguintes operações:
Navegação entre telas
Em termos práticos, no lugar de navegar entre as telas usando um botão com a props “navigation” e o método “navigate” (ou o botão de voltar),
como fizemos no primeiro modelo de navegação, utilizaremos no Tab os botões que ficam dentro da guia, na parte inferior da tela, em nosso
aplicativo.
Nesse exemplo simples, omitimos o ícone, deixando apenas um título para cada tela acessível na guia. No entanto – e como já apontamos –, é
possível estilizar a Tab adicionando ícones, assim como definir outras propriedades e comportamentos, como definir qual será a primeira tela
exibida quando o aplicativo for carregado, entre outros exemplos.
Importar a dependência.
Criar uma constante (Tab) como instância de “createBottomTabNavigator”.
Criar, dentro do NavigationContainer, o Tab.Navigator e, em seguida, o Tab.Screen, no qual são setadas as telas a serem acessadas
por intermédio dessa navegação.

import HomeScreen from './screens/home';
import AboutScreen from './screens/about';
const Tab = createBottomTabNavigator();
function App() {
 return (
 <NavigationContainer>
 <Tab.Navigator>
5
6
7
8
9
10
11
12
13
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 31/49
Drawer Navigation
Apresentação
O último modelo de navegação que veremos é o Drawer Navigation. Esse modelo consiste em fornecer um menu de navegação que inicialmente fica
invisível na tela, sendo acessado ao se arrastar a tela da esquerda (ou, caso queiramos, da direita) em direção ao meio dela.
Ao se fazer tal movimento, as opções de navegação definidas dentro do Drawer ficam visíveis, permitindo, com isso, que se clique em uma de suas
opções e navegue até a tela escolhida.
Exemplo de navegação com Drawer Navigation.
Estrutura do projeto
Manteremos a estrutura utilizada nos modelos de navegação abordados anteriormente, criando um projeto e reaproveitando os códigos das telas
Home e About. Com isso, precisamos modificar apenas o ponto de entrada de nosso aplicativo.
Criação do Drawer Navigation
Após criar um projeto, modifique o App.js para que ele fique desta forma:
React Native 
Dica
Tendo mantido o mesmo código para as screens Home e About, clique nos botões que incluímos no exemplo anterior. Perceba que é
possível navegar entre as telas, no Tab Navigator, usando o props “navigation” e seu método “navigate”.
Dica
Para usar o Drawer, é necessário instalar a seguinte dependência:
@react-navigation/drawer

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 32/49
App.js
Análise do código
O código para criação do Drawer é semelhante aos códigos dos demais modelos de navegação, onde temos as operações listadas a seguir:
Importar a dependência e as telas a serem navegadas.
Criar a constante que vai conter a instância do componente de navegação.
Definir os itens de navegação dentro do NavigationContainer.
Atenção
No Drawer, em específico, foi incluído um atributo adicional, que é opcional, por meio do qual definimos a tela inicial a ser apresentada.
Quando ela não é definida por meio de atributo, em todos os modelos de navegação, por padrão, é exibida a primeira tela definida dentro
dos itens: screens.

import * as React from 'react';import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/home';
import AboutScreen from './screens/about';
const Drawer = createDrawerNavigator();
function App() {
 return (
 <NavigationContainer>
 <Drawer.Navigator initialRouteName='Home'>
12
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 33/49
Navegação entre telas
O Drawer cria um menu (estilo hambúrguer ou sanduíche) no topo/header de nosso aplicativo. Tal menu contém o link para as telas incluídas como
screens no Drawer.Navigator. Além disso, esses links também ficam visíveis quando se arrasta a tela do canto esquerdo para o meio. Por fim, a
aplicação de determinados métodos permite:
Navegar entre as telas
Usando os métodos disponíveis no props “navigation”, como o navigate ou o goBack.
Abrir e fechar o Drawer
Empregando os métodos “navigation.openDrawer” e “navigation.closeDrawer”.
Combinando os modelos de navegação
Os modelos de navegação apresentados podem ser usados individualmente, como demonstramos nos códigos apresentados no módulo, ou de
forma combinada.
Caso a opção seja pela combinação, é importante saber que só é possível ter um
NavigationContainer em nosso aplicativo. Assim, para combinar os modelos de navegação,
será necessário de�nir um(s) como item(s) do(s) outro(s) na propriedade “component”.
Outro aspecto que precisa ser levado em consideração ao se combinar mais de um modelo de navegação é que tal comportamento tende a fazer
mais sentido quando existem muitas telas em nosso aplicativo. Ou seja, para um aplicativo com apenas duas telas, como o que usamos de
exemplo, não faz muito sentido combinar as navegações.
Modelos de navegação no React Native
Os três principais modelos de navegação utilizados no design de interface interativa com o React Native são abordados no vídeo a seguir.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 34/49
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
Stack Navigation
3:52 min.
Drawer Navigation
3:51 min.


Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.


01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 35/49
Questão 1
Ao compararmos o modelo de navegação tradicional em um website ou sistema web com os modelos disponíveis no React Native, podemos
dizer que:
A São modelos totalmente diferentes que não compartilham nenhum tipo de semelhança entre si.
B
Em websites, há apenas um modelo de navegação disponível por meio de links contidos em menus, enquanto no React Native
existem três diferentes modelos.
C
Assim como no website, em React Native só pode haver um modelo de navegação em nosso aplicativo, não sendo possível
combinar os diferentes modelos existentes.
D
O StackNavigator é o único modelo de navegação em React Native a manter uma semelhança com os modelos de navegação
existentes em websites.
E
Os três principais modelos de navegação disponíveis para o React Native implementam, em linhas gerais, modelos bem
conhecidos do ambiente web, como a navegação por links e botões, expostos em guias ou menus, sendo possível inclusive
voltar e avançar em seu histórico de navegação.
Responder
Questão 2
Considere um aplicativo que possua duas telas: HomeScreen e AboutScreen. Qual será a primeira tela exibida a partir do código a seguir, no
qual dois diferentes modelos de navegação são combinados?
React Native 
//...
//imports 
//...
const TabNav = createBottomTabNavigator();
function TabNavScreen() {
 return (
 <TabNav.Navigator>
 <TabNav.Screen name='Home' component={HomeScreen} />
1
2
3
4
5
6
7
8
9
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 36/49
4
Recursos de estilização e animação
Ao final deste módulo, você será capaz de listaros recursos de estilização e animação.
A A tela AboutScreen contendo o menu de acesso ao Drawer Navigator.
B A tela AboutScreen sem nenhum elemento que permita navegar para a tela HomeScreen.
C A tela AboutScreen com o Tab Bar Navigator, tendo os botões de navegação para a HomeScreen e a própria AboutScreen.
D A tela HomeScreen contendo o menu de acesso ao Drawer Navigator.
E
Nenhuma tela será exibida, sendo apresentado um erro informando que não foi possível localizar o componente
TabNavScreen.
Responder

 <TabNav.Screen name='About' component={AboutScreen} />
 </TabNav.Navigator>
 );
}Com a utilização de bibliotecas externas, é possível adicionar ao React Native alguns componentes que permite
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 37/49
Estilizando aplicativos em React Native
Estilização de aplicativo.
A estilização de aplicativos em React Native segue os mesmos princípios daquela realizada em páginas web. No entanto, enquanto, nessas páginas,
utilizam-se as folhas de estilo (CSS), no React Native emprega-se um código JavaScript por meio da propriedade (props) style.
Essa propriedade é nativa e pode ser aplicada em qualquer componente. Além dela, há a possibilidade de utilizar uma biblioteca denominada styled.
Veremos a seguir como é possível, de forma nativa, estilizar o nosso aplicativo.
Como funciona a propriedade Style
Como já mencionamos, os estilos são definidos usando o código JavaScript. Em relação às propriedades, temos algo bastante similar à CSS, com a
diferença de que, em React Native, as propriedade são declaradas no padrão camelCase. A propriedade CSS margin-top em React seria, portanto,
declarada como marginTop. Outra semelhança entre a props Style e a CSS é a possibilidade de definir nossos estilos de forma:

Inline no próprio componente.

Interna no mesmo script.

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 38/49
Externa em um script separado.
Este fragmento demonstra a definição inline da cor do texto para o componente Text:
React Native 
Definição de estilo inline.
Podemos ver adiante o mesmo estilo sendo declarado de forma interna. Note que, para isso, usamos o método StyleSheet.create, que pertence ao
core do React Native e precisa ser importado:
React Native 
Definição de estilo interna.
A utilização do Style de forma externa segue a mesma convenção que a interna. É necessário, assim, haver a importação do script (que precisa ter a
extensão .js) de estilo no script em que ele será usado, como pode ser visto nos códigos a seguir, começando pelo App.js:
React Native 
//...
<Text style={{color: 'blue'}}>Texto Azul</Text>
//...
import React from 'react';
import { StyleSheet, Text } from 'react-native';
const Estilos = () => {
 return (
 <Text style={styles.textoAzul}>Texto Azul</Text>
 );
};
const styles = StyleSheet.create({
 textoAzul: {
 color: 'blue'
 },
});
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 39/49
Definição de estilo externa.
Agora, observe o código styles.js:
React Native 
Script styles.js usado na definição de estilo externa anterior.
Styled Components
Apresentação
A biblioteca Styled Components constitui uma alternativa muito utilizada para a props Style quando o assunto é estilizar um componente em React
Native. Com o uso dessa lib, é possível estilizar nosso aplicativo com CSS de forma bem parecida com a que fazemos na web.
Como utilizar a Styled Components
import React from 'react';import { Text } from 'react-native';
import styles from './styles'
const Estilos = () => {
 return (
 <Text style={styles.textoAzul}>Texto Azul</Text>
 );
};
export default Estilos;
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
 textoAzul: {
 color: 'blue'
 },
});
export default styles;
12
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 40/49
Como toda dependência em React Native, para se usar a Style, é preciso instalá-la. Seu gerenciador de dependências usual instala a seguinte lib:
styled-components
No exemplo prático a seguir, é possível verificar a utilização da Styled Components:
React Native 
Utilização da lib Style Components.
As propriedades de estilo são declaradas no formato tradicional da CSS. Já seu estilo é definido com a notação de componente. No exemplo, é
criado um componente Text, o StyledText, para o qual são definidas algumas propriedades de estilo. Em seguida, esse componente é usado para
conter o texto “Texto Azul”.
Além da possibilidade de usar as propriedades CSS de forma similar à utilizada na web, a lib Style Components tem várias outras funcionalidades
disponíveis. Apontaremos três exemplos a seguir:

Entender (e sobrescrever) estilos.

Passar as propriedades de estilo entre os componentes como props.
import React from 'react';
import { Text } from 'react-native';
import styled from 'styled-components/native'
const Estilos = () => {
 return (
 <StyledText>Texto Azul</StyledText>
 );
};
const StyledText = styled.Text`
 color: blue;
 margin-top: 50px;
 margin-left:50px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 41/49

Ter suporte a animações (que será visto a seguir).
Animações em React Native
Em React Native, estão disponíveis dois recursos nativos para a animação de objetos: a Animated API e a LayoutAnimation API. Com os recursos
disponibilizados por ambas, é possível, entre outras, realizar as seguintes ações:
Animar os componentes de nossa aplicação;
Inserir efeitos de fade in ou fade out;
Mover itens de lugar a partir da interação do usuário.
Conheceremos agora algumas propriedades dessas duas APIs, assim como alguns exemplos de código.
Animated API
Funcionamento
Esta API se baseia em relações declarativas entre entradas e saídas, fazendo uso de transformações configuráveis por meio de métodos, como
iniciar e parar, por meio dos quais podemos controlar a sua execução. Nativamente, é possível animar os seguintes componentes React:

View

Text

Image
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 42/49

ScrollView

FlatList

SectionList
Além disso, também é possível criar componentes personalizados e utilizar o método Animated.createAnimatedComponent() para animá-los.
Veremos em seguida nosso primeiro exemplo de animação. No entanto, antes de vermos o código, temos de fazer algumas considerações:
Hooks
No código, são utilizados dois hooks: useRef e useEffect. Não se preocupe ainda em relação a eles. Por enquanto, saiba que o useEffect
permite que ações sejam executadas quando o aplicativo for renderizado na tela.
Animated.timing
Veja a sintaxe do método Animated.timing. São definidos nele o valor até o qual o efeito de fade será aplicado e o tempo de execução da
animação. Quanto maior for o tempo, mais lenta será a execução.
Animated.Text
No exemplo, o Animated.Text é utilizado como container para o texto a ser exibido a aplicação da animação. Como já mencionamos,
também poderíamos ter usado o Animated.View e outros elementos.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 43/49
Vamos ao código. Nele, a frase “Texto com fade in” será exibida com o efeito de fade in quando o aplicativo for iniciado.
React Native Exemplo de utilização de Animated API.
Outros recursos da Animated API
O exemplo anterior demonstra uma animação simples. Entretanto, a Animated API possui vários outros recursos, como, por exemplo:
LayoutAnimation API
Funcionamento e análise de código
Con�guração de animações
(tempo, duração, funções
de atenuação etc.).
Composição de animações
(combinação de animações
em sequência, em paralelo
etc.).
Combinação de valores
animados (por meio de
operações matemáticas).
Interpolação.
Saiba mais
Cada um desses recursos pode ser explorado a fundo por meio da documentação oficial do React Native.

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
const FadeInText = (props) => {
 const fadeAnim = useRef(new Animated.Value(0)).current 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 duration: 1000,
 }
 ).start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 44/49
Demonstraremos o funcionamento da LayoutAnimation API. Em seguida, faremos comentários sobre o código utilizado. Vamos lá!
React Native 
Exemplo de utilização de LayoutAnimation API.
O código anterior exibe na tela dois elementos: um quadrado laranja e um botão preto contendo o texto “Pressione para diminuir o quadrado”. Cada
vez que o botão é pressionado, esse quadrado diminui de tamanho. Faremos três comentários sobre o código:
Quando utilizar a LayoutAnimation API
Como o próprio nome sugere, tal recurso de animação é voltado para a animação do layout do aplicativo ao longo do seu ciclo de renderização
(inicialização e atualização). Sob esse viés, vê-se que a LayoutAnimation API é bastante útil nas situações em que um conteúdo inicialmente
escondido, ao ser exibido, afeta o dimensionamento de seus elementos anteriores ou posteriores. Como exemplo, temos os links de “veja mais”.
Comentário 1 
Comentário 2 
Comentário 3 
Atenção

import React from 'react';
import { NativeModules, LayoutAnimation, Text, TouchableOpacity,
 StyleSheet, View, } from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
 UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
 state = {w: 200, h: 200, };
 _onPress = () => {
 LayoutAnimation.spring();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 45/49
Estilização e animação do React Native
Neste vídeo, abordaremos os recursos de estilização e animação disponíveis no React Native.
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
A propriedade Style
4:44 min.
Animated API
4:10 min.
Embora seja um recurso poderoso, a LayoutAnimation API oferece menos controle que a Animated API.




01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 46/49

Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
Questão 1
A estilização de um aplicativo mobile é bastante similar à de uma página web, definindo-se qual elemento se quer estilizar e as propriedades
que se deseja modificar de forma inline, interna ou externa. Selecione a alternativa correta na estilização de aplicativos mobile.
A
Embora bastante similares, as páginas web contam com uma gama muito maior de propriedades de estilo, já que as páginas
são maiores, uma vez que são exibidas em desktops.
B
As similaridades na aplicação de estilos entre esses dois ambientes nos permitem copiar um código CSS utilizado em uma
página web e aplicá-lo diretamente em um elemento no aplicativo para que o código funcione sem nenhum tipo de
adaptação.
C
A estilização de um aplicativo escrito com o framework React Native é feito com a utilização de propriedades CSS
semelhantes àquelas utilizadas no ambiente web, tendo como única diferença a necessidade de escrever cada propriedade
no padrão camelCase.
D
O recurso de estilização nativo Style é muito poderoso. Entretanto, apenas com sua utilização não é possível estilizar um
aplicativo por completo, sendo necessário, como complemento, incluir uma biblioteca externa, como a Styled Components.
E
A estilização inline deve ser evitada em React Native, pois produz um componente com muitas linhas de código, fato esse que
gera lentidão na renderização de tal elemento.
01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 47/49
Considerações �nais
Neste conteúdo, apresentamos alguns recursos importantes do React Native de forma prática e teórica, a começar pela esquematização dos
passos para a definição da interface interativa de um aplicativo mobile. Dos passos apresentados, conseguimos introduzir alguns componentes do
Responder
Questão 2
A utilização de animações é um recurso importante em aplicativos, porque elas tendem a melhorar a experiência do usuário, oferecendo
interações mais fluidas no lugar de elementos simplesmente estáticos. Nesse contexto, da utilidade das animações e de sua implementação
em React Native, é correto afirmar que:
A
Embora importantes, devemos limitar a quantidade de animações utilizada em um aplicativo a fim de resguardar os recursos
do dispositivo, além de melhorar a performance.
B
Em React Native, limitações técnicas nos impedem de animar o layout de nosso aplicativo, sendo possível apenas aplicar
efeitos de fade.
C
As animações podem adicionar dicas visuais que informam aos usuários sobre o que está acontecendo no aplicativo, sendo
bastante úteis nas mudanças de estado, como, por exemplo, quando um novo conteúdo é carregado a partir do click em um
botão ou por meio do scroll ao longo da tela.
D
O framework React Native não possui nenhum recurso nativo que permita a aplicação de animações. Para utilizar esse
recurso, é necessária a instalação de dependências externas, como a lib Styled Components.
E
A Animated API permite que alguns componentes nativos sejam animados. A sintaxe de sua utilização consiste em usar o
nome do componente seguido da palavra “animated”, como, por exemplo, em <ViewAnimated>.
Responder

01/03/2022 17:38 Interface gráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 48/49
React voltados para a construção de layout e a conteinerização de conteúdos e outros elementos.
Além desses componentes, vimos, na sequência, alguns com funções mais específicas: os componentes de lista e multivalorados. Em seguida,
descrevemos os três principais modelos de navegação em um aplicativo mobile disponíveis no framework.
Por fim, abordamos os recursos de estilização e animação. Esses recursos são essenciais para o desenvolvedor mobile tirar o melhor proveito das
funcionalidades de construção de interface interativa do React Native.
Podcast
Ouça o podcast. Nele, falamos sobre o processo de definição da interface de um aplicativo mobile, componentes de lista, modelos de
navegação e os recursos de estilização e animação do React Native.
00:00 13:13
1x


Referências
REACT NATIVE. Docs. Consultado na internet em: 12 ago. 2021.
Explore +
Explore outros recursos sobre animações e transições em aplicativos mobile no site do Android Developer.
DEVELOPERS. Animações e transições. Consultado na internet em: 12 ago. 2021.
Outra fonte rica em informações sobre o desenvolvimento mobile é a página do Material Design.
MATERIAL DESIGN. Foundation. Consultado na internet em: 12 ago. 2021.
 Baixar conteúdo
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html
javascript:CriaPDF()
01/03/2022 17:38 Interfacegráfica com React Native
https://stecine.azureedge.net/repositorio/00212ti/02525/index.html#imprimir 49/49