Interface Gráfica Com React Native

Prévia do material em texto

1 Marcar para revisão Assinale a alternativa correspondente à saída deste código: import import import import 1 function App return A Serão exibidos os botões de navegação do tipo Tab Bottom e conteúdo da tela Home. Será exibido conteúdo da tela Home, a partir da qual será possível navegar, utilizando 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. D 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 E TabBottom dentro de um Stack.Navigator.2 No React Native, componente SectionList é utilizado para renderizar listas de dados organizadas em seções. Considerando as propriedades desse componente, assinale a alternativa que define a estrutura dos dados e agrupamento dos itens em seções: A renderltem renderSectionHeader keyExtractor D sections E data3 Analise fragmento de código adiante e, em seguida, assinale alternativa que corresponde ao que acontecerá na renderização dele: A 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 D dentro de Text. E Será exibido texto equivalente à propriedade source do componente Image.4 0 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 A 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 D tela. Stack Navigator permite a navegação pelas telas do aplicativo por meio do método "navigate" ou do E 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".5 É 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 A novos dados "ouvindo" seu estado (state) em outros componentes do aplicativo. VirtualizedList é ú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 c 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 carregamento de dados adicionais. Por meio deles, é possível tanto monitorar D acréscimo de 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, E permitem aos componentes de lista monitorar eventuais atualizações nos dados por ele renderizados.6 Assinale, das opções a seguir, a afirmativa correta quanto ao propósito do componente SafeAreaView. A Definir componentes de segurança para a proteção de dados críticos, como senhas. Criar uma área na tela que permita que teclado ocupe toda a área disponível, sobrepondo os demais elementos. Organizar dinamicamente elementos da tela quando teclado é exibido a fim de manter tanto teclado quanto os demais elementos visíveis ao mesmo tempo. propósito do SafeAreaView é garantir que aplicativos que rodem na plataforma Android ocupem D todo espaço disponível na tela, sem serem escondidos por elementos de navegação ou outros quaisquer. objetivo do SafeAreaView é renderizar conteúdo do aplicativo dentro dos limites da área segura E de um dispositivo, sendo suportado apenas por dispositivos da plataforma iOS.7 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, A 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 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 D específicos códigos de cada tela, é 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, E pode ser feita puramente com código JavaScript.8 Assinale qual destas opções corresponde ao propósito do componente ScrollView. ScrollView é um elemento com a função de container, que pode conter em si vários elementos, A mantendo uma altura previamente definida e permitindo a navegação entre os elementos nele contidos por meio de rolagem, que pode ser tanto vertical quanto horizontal. Controlar a exibição de textos muito extensos. 0 propósito do componente ScrollView é permitir carregamento de conteúdo dinâmico a partir da interação de arrastar e soltar. ScrollView é um componente disponível apenas para a plataforma iOS, cuja função é permitir a D conteinerização de elementos de forma a manter sempre um tamanho predefinido da tela. 0 ScrollView tem como função exibir dados em formato de listas, permitindo a rolagem desses dados E de maneira performática.9 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 usuário, deve-se adotar apenas um modelo de A 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 B nos outros modelos de navegação. Isso permitiria a criação de uma tela e um modelo de navegação concisos. Drawer Navigation é modelo indicado para essa quantidade de pois permite que todas as opções de navegação fiquem expostas 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 D navegação. Isso, além de deixar 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, E porque os usuários tendem a ter dificuldade quando colocados diante de muitas opções de escolha.10 React Native fornece alguns recursos para a estilização de aplicativos. 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 A 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 é D possível utilizar 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 E Styled Components.