EXERC 2 INTERFACE GRÁFICA COM REACT NATIVE

Prévia do material em texto

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS EM ANDROID
	
		Lupa
	 
	
	
	
	 
	DGT0303_202001069674_TEMAS
	
	
	
		Aluno: REGIS BATISTA CONDE
	Matr.: 202001069674
	Disc.: PROGRAMAÇÃO PARA D 
	2023.3 EAD (G) / EX
		Prezado (a) Aluno(a),
Você fará agora seu EXERCÍCIO! Lembre-se que este exercício é opcional, mas não valerá ponto para sua avaliação. O mesmo será composto de questões de múltipla escolha.
Após responde cada questão, você terá acesso ao gabarito comentado e/ou à explicação da mesma. Aproveite para se familiarizar com este modelo de questões que será usado na sua AV e AVS.
	02525 - INTERFACE GRÁFICA COM REACT NATIVE
	 
		
	
		1.
		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.
	
	
	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 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.
	
	
	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.
	
	
	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.
	Data Resp.: 12/10/2023 11:22:11
		Explicação:
A resposta certa é: 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.
	
	
	 
		
	
		2.
		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.
	
	
	
	renderItem
	
	
	sections
	
	
	data
	
	
	renderSectionHeader
	
	
	keyExtractor
	Data Resp.: 12/10/2023 11:23:23
		Explicação:
A resposta certa é: renderSectionHeader
	
	
	 
		
	
		3.
		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.
	
	
	
	Para combinar diferentes tipos de navegação devemos inserir a quantidade correspondente do container ''NavigationContainer'' no ponto de entrada de nosso aplicativo.
	
	
	Não é possível combinar a utilização desses três modelos, sendo necessário utilizar apenas um deles.
	
	
	É 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.
	
	
	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.
	Data Resp.: 12/10/2023 11:24:39
		Explicação:
A resposta certa é: É 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.
	
	
	 
		
	
		4.
		Assinale a alternativa correspondente à saída deste código:
	
	
	
	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 é possível aninhar uma screen do tipo TabBottom dentro de um Stack.Navigator.
	
	
	Será exibida uma mensagem de erro dizendo que não foi possível localizar a variável TabBottom.
	
	
	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ão exibidos os botões de navegação do tipo Tab Bottom e o conteúdo da tela Home.
	Data Resp.: 12/10/2023 11:26:40
		Explicação:
A resposta certa é: Será exibida uma mensagem de erro dizendo que não foi possível localizar a variável TabBottom.
	
	
	 
		
	
		5.
		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 < Text >, ou seja, ''Texto'', em fonte de cor vermelha, tendo como background de toda a tela a cor branca, pois o < Text > herdou o estilo do componente no qual está inserido: o < View >.
	
	
	Será exibido na tela o conteúdo do componente < Text >, ou seja, ''texto'', em fonte de cor preta, dentro de um retângulo com background de cor vermelha - herdado da < View > que contém o < Text > - que ocupará toda a largura da tela.
	
	
	Será exibido o texto solto na tela, colado no canto superior direito, uma vez que não foram definidos estilos para o componente < Text >.
	
	
	Será exibido um background de cor vermelha, sem nenhum texto ou qualquer outra informação, cobrindo toda a tela.
	
	
	Será exibido um erro informando que não foram definidos estilos para o componente < Text >, embora ele esteja sendo usado no aplicativo.
	Data Resp.: 12/10/2023 11:28:37
		Explicação:
A resposta certa é: Será exibido na tela o conteúdo do componente < Text >, ou seja, ''texto'', em fonte de cor preta, dentro de um retângulo com background de cor vermelha - herdado da < View > que contém o < Text > - que ocupará toda a largura da tela.
	
	
	 
		
	
		6.
		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.
	
	
	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.
	
	
	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 função do componente.
	
	
	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.
	Data Resp.: 12/10/2023 11:30:43
		Explicação:
A resposta certa é: 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.
	
	
	 
		
	
		7.
		
Assinale a alternativa que corresponde à saída do código a seguir:
	
	
	
	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á exibida a frase ''texto azul'', com a cor de fonte azul, alinhada a 50 pixels da margem superior e esquerda.
	
	
	Será exibido um erro informando que o componente < StyledText > não foi importado.
	
	
	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.
	Data Resp.: 12/10/2023 11:32:52
		Explicação:
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.
	
	
	 
		
	
		8.
		Em relação aos recursos de navegação disponíveis no framework React Native, é correto afirmar que:
	
	
	
	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 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.
	
	
	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.
	
	
	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.
	
	
	É preciso instalar dependências/bibliotecas extras para a construção dos elementos de navegação, como, por exemplo, menus.
	Data Resp.: 12/10/2023 11:35:35
		Explicação:
A resposta certa é: É preciso instalar dependências/bibliotecas extras para a construção dos elementos de navegação, como, por exemplo, menus.
	
	
	 
		
	
		9.
		Analise o fragmento de código adiante e, em seguida, assinale
alternativa que corresponde ao que acontecerá na renderização dele:
	
	
	
	Será exibido um erro informando que não é possível inserir componentes Image como filhos de componentes Text.
	
	
	Será exibido o texto equivalente à propriedade source do componente Image.
	
	
	A imagem será exibida em formato ASCII, já que foi incluída dentro de um componente Text.
	
	
	Nada será exibido, uma vez que não é permitido, na sintaxe do React Native, a inclusão de Image dentro de Text.
	
	
	A imagem será exibida normalmente, mesmo estando contida dentro de um componente Text.
	Data Resp.: 12/10/2023 11:37:44
		Explicação:
A resposta certa é: A imagem será exibida normalmente, mesmo estando contida dentro de um componente Text.
	
	
	 
		
	
		10.
		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.
	
	
	A navegação no modelo Stack Navigator é realizada apenas por meio do botão de voltar no topo da tela.
	
	
	Os botões de navegação nesse modelo ficam, por padrão, alocados na parte inferior 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''.
	
	
	As opções de navegação ficam dispostas em um menu, que, por padrão, fica escondido à esquerda da tela.
	Data Resp.: 12/10/2023 11:37:57
		Explicação:
A resposta certa é: 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''.