React Native: Navegação e Animações

Prévia do material em texto

Você acertou 9 de 10 questões
Verifique o seu desempenho e continue treinando! Você
pode refazer o exercício quantas vezes quiser.
Verificar Desempenho
A
B
C
1 Marcar para revisão
Em relação aos recursos de navegação disponíveis no
framework React Native, é correto afirmar que:
É preciso instalar dependências/bibliotecas
extras para a construção dos elementos de
navegação, como, por exemplo, menus.
A exemplo dos websites, é possível construir a
navegação entre todas as telas do aplicativo
utilizando apenas botões como elementos de
link.
A utilização de elementos específicos e
otimizados para navegação deve ser evitada, já
que eles interferem na performance do aplicativo.
Em seu lugar, é preciso dar preferência à criação
de aplicativos com apenas uma tela, em que todo
o conteúdo fica disponível em um único lugar.
D
E
A organização de nosso código em diferentes
pastas e códigos, separando, por exemplo, em
scripts específicos os códigos de cada tela, é o
suficiente para que seja possível navegar entre
todas elas a partir de uma tela principal.
A navegação entre as telas em um aplicativo
React Native, sem a instalação de bibliotecas
extras, pode ser feita puramente com o código
JavaScript.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a letra A. No framework React
Native, para a construção dos elementos de
navegação, como menus, é necessário instalar
dependências ou bibliotecas extras. Isso ocorre
porque o React Native, por si só, não fornece uma
solução completa para a navegação entre as telas de
um aplicativo. Portanto, para criar uma experiência de
navegação eficiente e otimizada, é comum a
utilização de bibliotecas externas, como o React
Navigation ou o React Native Navigation.
2 Marcar para revisão
O Stack Navigator permite criar uma "pilha de telas". Em
relação a seu modelo de navegação, é correto afirmar:
A
B
C
D
E
Após navegar para determinada tela, não é
possível voltar à tela anterior sem antes
recarregar todo o aplicativo.
As opções de navegação ficam dispostas em um
menu, que, por padrão, fica escondido à
esquerda da tela.
Os botões de navegação nesse modelo ficam,
por padrão, alocados na parte inferior da tela.
A navegação no modelo Stack Navigator é
realizada apenas por meio do botão de voltar no
topo da tela.
O Stack Navigator permite a navegação pelas
telas do aplicativo por meio do método
"navigate" ou do botão de voltar, inserido por
default no topo de cada tela. Com isso, é
possível acessar qualquer uma das telas que
tenha sido incluída em seus "screens".
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
O Stack Navigator é uma ferramenta que permite a
criação de uma "pilha de telas", facilitando a
navegação entre diferentes telas de um aplicativo. A
alternativa correta é a E, que afirma que o Stack
Navigator permite a navegação pelas telas do
aplicativo por meio do método "navigate" ou do
botão de voltar, que é inserido automaticamente no
topo de cada tela. Isso significa que, ao utilizar o
Stack Navigator, é possível acessar qualquer tela que
tenha sido incluída em seus "screens", sem a
A
B
C
D
E
necessidade de recarregar todo o aplicativo ou de ter
botões de navegação alocados na parte inferior da
tela.
3 Marcar para revisão
A utilização de animações fornece aos usuários uma
melhor experiência no manuseio dos aplicativos mobile.
Em React Native, estão disponíveis nativamente duas APIs
para a animação de elementos. Falando da
LayoutAnimation API, é correto afirmar que:
É uma API totalmente estável e sem limitações
conhecidas, funcionando de forma idêntica nas
plataformas Android e iOS.
Essa API é voltada para a animação do layout do
aplicativo, permitindo, por exemplo, que efeitos
sejam exibidos quando o aplicativo está sendo
carregado/renderizado.
A LayoutAnimation é uma API mais flexível e que
possui mais recursos que a Animated API,
devendo ser usada de forma preferencial para a
animação de qualquer tipo de componente.
A Animated API é a biblioteca de animações do
React Native voltada para a plataforma Android,
enquanto a LayoutAnimation faz o mesmo papel
na plataforma iOS.
Por questões de performance, a LayoutAnimation
nunca deve ser utilizada em conjunto com a
Animated API.
A
B
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A LayoutAnimation API é uma API voltada para a
animação do layout do aplicativo, permitindo, por
exemplo, que efeitos sejam exibidos quando o
aplicativo está sendo carregado/renderizado.
4 Marcar para revisão
O React Native possui três principais modelos de
navegação. A respeito das características de cada um
desses modelos e considerando um aplicativo que possua
dez telas, é correto afirmar:
Para facilitar a navegação e não confundir o
usuário, deve-se adotar apenas um modelo de
navegação, como acontece na maioria dos
aplicativos mobile.
A adoção dos três modelos de navegação
consiste em uma boa estratégia, uma vez que é
possível, por exemplo, exibir, por meio de Tab
Navigation, os links mais importantes e combinar
os demais links nos outros modelos de
navegação. Isso permitiria a criação de uma tela
e um modelo de navegação concisos.
C
D
E
O Drawer Navigation é o modelo indicado para
essa quantidade de ícones, pois permite que
todas as opções de navegação fiquem expostas
o tempo todo, sem a necessidade de nenhuma
ação por parte dos usuários.
Todas as telas do aplicativo devem ser incluídas
como itens (screens) de todos os modelos de
navegação. Isso, além de deixar o código mais
limpo e simples, daria ao usuário a autonomia de
escolher como quer navegar pelo aplicativo.
Por padrão de boas práticas, deve-se adotar
sempre (e no máximo) dois modelos de
navegação, porque os usuários tendem a ter
dificuldade quando colocados diante de muitas
opções de escolha.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A resposta certa é: A adoção dos três modelos de
navegação consiste em uma boa estratégia, uma vez
que é possível, por exemplo, exibir, por meio de Tab
Navigation, os links mais importantes e combinar os
demais links nos outros modelos de navegação. Isso
permitiria a criação de uma tela e um modelo de
navegação concisos.
A adoção dos três modelos de navegação é uma boa
estratégia, pois permite que o desenvolvedor escolha
o modelo mais adequado para cada tela do aplicativo.
Por exemplo, o Tab Navigation é um modelo que
pode ser usado para exibir os links mais importantes
do aplicativo, enquanto o Drawer Navigation pode ser
usado para exibir os demais links. Isso permite que o
desenvolvedor crie uma tela e um modelo de
Questão 5 de 10
Corretas (9)
Incorretas (1)
Em branco (0)
1 2 3 4 5
6 7 8 9 10
Lista de exercícios Interface… Sair
A
B
C
D
E
navegação concisos, o que facilita a navegação do
usuário.
5 Marcar para revisão
Analise o fragmento de código adiante e, em seguida,
assinale
alternativa que corresponde ao que acontecerá na
renderização dele:
A imagem será exibida normalmente, mesmo
estando contida dentro de um componente Text.
A imagem será exibida em formato ASCII, já que
foi incluída dentro de um componente Text.
Será exibido um erro informando que não é
possível inserir componentes Image como filhos
de componentes Text.
Nada será exibido, uma vez que não é permitido,
na sintaxe do React Native, a inclusão de Image
dentro de Text.
Será exibido o texto equivalente à propriedade
source do componente Image.
A
B
C
Resposta incorreta
Opa! A alternativa correta é a letra A. Confira o
gabarito comentado!
Gabarito Comentado
A resposta certa é: A imagem será exibida
normalmente, mesmo estando contida dentro de um
componente Text.
6 Marcarpara revisão
Indique qual afirmativa está correta em relação aos
componentes de lista disponíveis em React Native.
Os componentes de lista são containers simples,
como as View, com a única diferença de que
permitem a exibição, dentro de um laço de
repetição, usando o código JS com o
componente React, de seu conteúdo.
Os componentes de lista são elementos
otimizados para a exibição de dados nesse
formato, possuindo diversas otimizações, que
vão desde o consumo de memória até a
renderização e a atualização da janela para a
exibição dos itens.
Embora sejam otimizados em relação à
adaptação da janela de rolagem, os
componentes de lista possuem problemas de
performance no que diz respeito ao consumo de
memória.
D
E
Os componentes de lista só permitirão a exibição
de dados desde que seja possível determinar,
antes da renderização deles, sua quantidade.
Os componentes de lista disponíveis só podem
ser utilizados individualmente, não sendo
possível a combinação deles ou até a utilização
de um mesmo tipo de forma aninhada.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a B. Os componentes de lista
em React Native são otimizados para a exibição de
dados em formato de lista. Eles possuem diversas
otimizações, que vão desde o consumo de memória
até a renderização e a atualização da janela para a
exibição dos itens. Isso significa que eles são
projetados para lidar eficientemente com grandes
quantidades de dados, minimizando o uso de
memória e otimizando a velocidade de renderização e
atualização da janela de exibição.
7 Marcar para revisão
Assinale a alternativa correspondente à saída deste
código:
A
B
C
D
E
Serão exibidos os botões de navegação do tipo
Tab Bottom e o conteúdo da tela Home.
Será exibido o conteúdo da tela Home, a partir
da qual será possível navegar, utilizando o Stack
Navigator, para a tela About.
Será exibido o conteúdo da tela Home sem
nenhum componente de navegação, não sendo
possível nem mesmo navegar para outra tela por
meio do pressionamento de botões.
Será exibida uma mensagem de erro dizendo que
não foi possível localizar a variável TabBottom.
Será exibida uma mensagem de erro dizendo que
não é possível aninhar uma screen do tipo
TabBottom dentro de um Stack.Navigator.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A
B
C
A resposta certa é: Será exibida uma mensagem de
erro dizendo que não foi possível localizar a variável
TabBottom.
8 Marcar para revisão
Analise o fragmento de código a seguir e assinale a
afirmativa que corresponde à saída dele:
Será exibido na tela o conteúdo do componente
, ou seja, ''texto'', em fonte de cor preta,
dentro de um retângulo com background de cor
vermelha - herdado da que contém o .
Será exibido o texto solto na tela, colado no
canto superior direito, uma vez que não foram
definidos estilos para o componente .
Será exibido um background de cor vermelha,
sem nenhum texto ou qualquer outra informação,
cobrindo toda a tela.
D
E
Será exibido um erro informando que não foram
definidos estilos para o componente ,
embora ele esteja sendo usado no aplicativo.
Será exibido na tela o conteúdo do componente
, ou seja, ''Texto'', em fonte de cor
vermelha, tendo como background de toda a tela
a cor branca, pois o herdou o estilo do
componente no qual está inserido: o .
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A resposta certa é: Será exibido na tela o conteúdo do
componente , ou seja, ''texto'', em fonte de
cor preta, dentro de um retângulo com background de
cor vermelha - herdado da que contém o - que ocupará toda a largura da tela.
9 Marcar para revisão
O React Native fornece alguns recursos para a estilização
de aplicativos. Marque a alternativa que corresponde a tais
recursos.
A
B
C
D
E
A estilização de aplicativos React Native segue
os princípios similares aos de páginas web.
Logo, é possível aplicar estilos de forma inline,
interna ou externa. Uma das principais diferenças
ao se utilizar os estilos se dá pelo nome das
propriedades, as quais, em React, precisam estar
no formato camelCase.
É possível aplicar estilos CSS utilizando os
mesmos nomes de propriedades usados no
ambiente web, usando até a tag/componente para isso.
Os estilos, em React Native, devem ser
armazenados em arquivos externos com a
extensão CSS.
Além de permitir a inclusão de estilos por meio
da tag de forma interna, em React
Também é possível utilizar o código JS para a
estilização dos componentes.
Algumas propriedades de estilo estão disponíveis
apenas por meio de bibliotecas externas, como a
Styled Components.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A estilização de aplicativos React Native segue os
princípios similares aos de páginas web. Logo, é
possível aplicar estilos de forma inline, interna ou
externa. Uma das principais diferenças ao se utilizar
os estilos se dá pelo nome das propriedades, as
A
B
quais, em React, precisam estar no formato
camelCase.
10 Marcar para revisão
Dado o código abaixo, assinale a alternativa que
corresponde à sua saída.
import React from 'react';
import { text } from 'react-native';
const Estilos = () => {
 return (Texto Azul);
}
const StyledText = styled.text 
 color: blue;
 margin-top: 50px;
 margin-left: 50px;
 ;
export default Estilos
Será exibida a frase ''texto azul'', com a cor de
fonte azul, alinhada a 50 pixels da margem
superior e esquerda.
O aplicativo não carregará, sendo mostrada uma
mensagem de erro informando que não foi
possível localizar a variável ''styled'', pois a
biblioteca Style Components não foi carregada.
C
D
E
Será exibida a frase ''texto azul'', com a cor de
fonte preta, colada no canto superior direito, uma
vez que não foi utilizado o componente Style
para definir estilos específicos para o
componente em questão.
A tela carregará em branco, sem nenhum
conteúdo sendo exibido, já que não foi
importada a biblioteca Style Components.
Será exibido um erro informando que o
componente não foi importado.
Resposta correta
Parabéns, você selecionou a alternativa
correta. Confira o gabarito comentado!
Gabarito Comentado
A resposta certa é: O aplicativo não carregará, sendo
mostrada uma mensagem de erro informando que não
foi possível localizar a variável ''styled'', pois a
biblioteca Style Components não foi carregada.