Interface Gráfica Com React Native

Prévia do material em texto

Você acertou 6 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
D
E
1 Marcar para 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.
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.
A
B
C
D
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.
2 Marcar para revisão
É muito comum carregarmos uma quantidade limitada de dados na
renderização inicial de nosso aplicativo e, a partir daí, novos dados. Nesse
contexto, assinale a alternativa que corresponde ao comportamento dos
componentes de lista no que diz respeito ao carregamento de dados adicionais.
Tal funcionalidade não está disponível nos componentes de lista. Por
outro lado, podemos capturar novos dados ''ouvindo'' seu estado
(state) em outros componentes do aplicativo.
O VirtualizedList é o único componente que não possui suporte nativo
ao carregamento de dados adicionais, uma vez que é otimizado para
lidar com dados imutáveis.
Os componentes de lista disponíveis em React Native possuem um
atributo chamado state, definido dentro do componente e responsável
pelo controle do estado dos dados atribuídos a uma variável.
Todos os componentes de lista presentes no React Native possuem
propriedades e métodos nativos para tratar o carregamento de dados
adicionais. Por meio deles, é possível tanto monitorar o acréscimo de
E
A
B
C
D
novos dados como carregá-los sob demanda mediante uma interação
por parte do usuário.
As propriedades ou props recebidas como herança de componentes-
pai, como View ou ScrollView, permitem aos componentes de lista
monitorar eventuais atualizações nos dados por ele renderizados.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito
comentado!
Gabarito Comentado
Todos os componentes de lista presentes no React Native possuem
propriedades e métodos nativos para tratar o carregamento de dados
adicionais. Por meio deles, é possível tanto monitorar o acréscimo de novos
dados como carregá-los sob demanda mediante uma interação por parte
do usuário.
3 Marcar para revisão
O Stack Navigator permite criar uma "pilha de telas". Em relação a seu modelo
de navegação, é correto afirmar:
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.
E
A
B
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 necessidade de
recarregar todo o aplicativo ou de ter botões de navegação alocados na
parte inferior da tela.
4 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
C
D
E
A
B
C
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.
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.
5 Marcar para revisão
Um botão é um elemento de interação que permite ao usuário executar algumas
ações ao pressioná-lo. Há alguns componentes disponíveis em React Native
com essa função. A respeito deles, escolha a alternativa correta.
O componente Button é o que possui a melhor capacidade de ser
estilizado, o que permite a alteração completa de sua aparência.
Embora estejam disponíveis alguns componentes nativos, como o
Pressable, o Button e o TouchableHighLight, entre outros, nem todos
estão disponíveis para as plataformas Android e iOS.
A principal limitação desses componentes em React Native é o fato de
eles não permitirem a inclusão de ícones com os títulos que indicam a
D
E
A
p q
função do componente.
O framework React Native possui vários componentes nativos cuja
função é permitir a interação do usuário por intermédio do
toque/pressionamento sobre tais componentes. Entre as opções
disponíveis, devemos dar preferência ao Pressable.
Os componentes do tipo Pressable, em React Native, permitem ao
usuário realizar uma série de ações, exceto controlar outros
componentes, como, por exemplo, abrir ou fechar uma janela modal.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito
comentado!
Gabarito Comentado
O enunciado nos pede para identificar a alternativa correta sobre os
componentes de botão no React Native. A alternativa D é a correta, pois o
framework React Native realmentepossui vários componentes nativos que
permitem a interação do usuário por meio do toque ou pressionamento.
Entre esses componentes, o Pressable é uma opção preferencial, pois
oferece uma maior flexibilidade e controle sobre a resposta visual de toque,
além de ser compatível com ambas as plataformas, Android e iOS.
6 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
B
C
D
E
ç g ç
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.
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 incorreta
Opa! A alternativa correta é a letra B. 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 navegação concisos, o
que facilita a navegação do usuário.
A
B
C
D
E
7 Marcar para revisão
Assinale, das opções a seguir, a afirmativa correta quanto ao propósito do
componente SafeAreaView.
Definir componentes de segurança para a proteção de dados críticos,
como senhas.
Criar uma área na tela que permita que o teclado ocupe toda a área
disponível, sobrepondo os demais elementos.
Organizar dinamicamente os elementos da tela quando o teclado é
exibido a fim de manter tanto o teclado quanto os demais elementos
visíveis ao mesmo tempo.
O propósito do SafeAreaView é garantir que aplicativos que rodem na
plataforma Android ocupem todo o espaço disponível na tela, sem
serem escondidos por elementos de navegação ou outros quaisquer.
O objetivo do SafeAreaView é renderizar o conteúdo do aplicativo
dentro dos limites da área segura de um dispositivo, sendo suportado
apenas por dispositivos da plataforma iOS.
Resposta incorreta
Opa! A alternativa correta é a letra E. Confira o gabarito comentado!
Gabarito Comentado
O SafeAreaView é um componente do Android que permite que o aplicativo
seja renderizado dentro dos limites da área segura de um dispositivo,
sendo suportado apenas por dispositivos da plataforma iOS. Isso significa
que o aplicativo não será exibido sobre os elementos de navegação ou
outros elementos que estejam na área segura do dispositivo.
8 Marcar para revisão
A
B
C
D
E
A
p
Em uma SectionList, uma propriedade define o ''agrupador'' ou definidor de
cada seção a ser exibida. Indique a alternativa que corresponde a esse
elemento.
data
keyExtractor
renderSectionHeader
sections
renderItem
Resposta incorreta
Opa! A alternativa correta é a letra C. Confira o gabarito comentado!
Gabarito Comentado
A propriedade que define o "agrupador" ou o definidor de cada seção em
uma SectionList é a 'renderSectionHeader'. Essa propriedade é
responsável por renderizar o cabeçalho de cada seção, ou seja, é ela que
determina como cada seção será exibida na lista. Portanto, a alternativa
correta é a 'renderSectionHeader'.
9 Marcar para revisão
Há três principais modelos de navegação disponíveis em React Native. Sobre
esses modelos e sua utilização em conjunto, aponte a alternativa verdadeira.
Não é possível combinar a utilização desses três modelos, sendo
necessário utilizar apenas um deles
B
C
D
E
necessário utilizar apenas um deles.
A combinação entre os três modelos é feita por meio de propriedades
específicas e com a única finalidade de linkar diferentes modelos de
navegação.
Para combinar diferentes tipos de navegação devemos inserir a
quantidade correspondente do container ''NavigationContainer'' no
ponto de entrada de nosso aplicativo.
É possível utilizar um ou mais modelos de navegação em conjunto em
um aplicativo mobile. Para isso, os containers de cada modelo de
navegação deverão ser inseridos, no atributo ''component'', na
definição dos itens (screens) de outro modelo.
É possível combinar diferentes modelos de navegação em um mesmo
aplicativo. Para isso, basta codificar cada modelo no mesmo script em
que as telas/screens são definidas e, em seguida, importar esses
modelos para o ponto de entrada da aplicação.
Resposta incorreta
Opa! A alternativa correta é a letra D. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a D. Nela, é explicado que é possível utilizar um ou
mais modelos de navegação em conjunto em um aplicativo mobile. Para
isso, os containers de cada modelo de navegação deverão ser inseridos no
atributo ''component'', na definição dos itens (screens) de outro modelo.
Isso significa que, em um aplicativo React Native, é possível combinar
diferentes modelos de navegação, permitindo uma maior flexibilidade e
adaptabilidade ao desenvolver a interface do usuário.
10 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
Marque a alternativa que corresponde a tais recursos.
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 quais, em React, precisam estar no formato
camelCase.