React Native - Componentes e Interface Gráfica para Aplicativos Mobile

Interface gráfica com React Native Profª Alexandre Paixão Descriçã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 Recomendase 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 Objetivos Módulo 1 Interface interativa de um aplicativo mobile Esquematizar os passos para a definição da interface interativa de um aplicativo mobile Módulo 2 Componentes de lista e multivalorados Descrever os componentes de lista e multivalorados disponíveis no React Native Módulo 3 Principais modelos de navegação Descrever os três principais modelos de navegação do React Native Módulo 4 Recursos de estilização e animação Listar os recursos de estilização e animação Introdução O processo de desenvolvimento de aplicativos envolve uma série de conhecimentos Entre eles destacamse 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 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 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 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 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 C lt d f t l t d Já no fluxo alternativo que acontece quando o usuário não se loga tem de ser possível 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 Input de dados botão de ação 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 Nº Tela Elementos visuais Elementos de interação canais de comunicaçã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 Nº Tela Elementos visuais Elementos de interação 7 Consulta de investimento financeiro Logomarca texto títuloslabel 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 Definição de componentes Escolha dos componentes Dando seguimento à esquematização da interface e dos elementos de interatividade de nosso app agora cumpriremos dois passos Confecção de protótipos navegáveis Escolha dos componentes nativos ou O primeiro passo embora seja muito indicado não será tratado aqui já que foge à proposta de nosso conteúdo 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 Saiba mais Há várias ferramentas disponíveis para a confecção de protótipos navegáveis inclusive gratuitas 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 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 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 Observemos outro fragmento React Native Os pontos de atenção desse novo fragmento estão na utilização dos seguintes componentes ScrollView 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 SafeAreaView Em termos de experiência do usuário o SafeAreaView disponível apenas para a plataforma iOS gera uma área segura no aplicativo e garante que o conteúdo por ele contido não seja afetado pelas características e dimensões do dispositivo e nem por outros elementos da própria aplicação como barras de navegação entre outros exemplos 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 Saiba mais Leia mais sobre o SafeAreaView na documentação oficial do React Native 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 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 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 Recomendação Conforme a orientação constante na documentação oficial do React Native devemos dar preferência à implementação do componente Pressable ActivyIndicator Este componente exibe elementos visuais que comumente chamamos de loading Embora bastante negligenciado tratase 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 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 demoradada sem nenhuma indicação visual pode dar a ele a sensação de que o aplicativo travou por exemplo 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 definiçã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 Para assistir a um vídeo sobre o assunto acesse a versão online deste conteúdo Falta pouco para atingir seus objetivos Vamos praticar alguns conceitos 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 Durante o 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 Parabéns A alternativa D está correta O React Native é um framework poderoso e flexível para a construção de aplicativos mobile Entretanto embora ele possua diversos componentes nativos assim como outros produzidos por terceiros é preciso esquematizar bem o processo de confecção das interfaces dos aplicativos levando em consideração as características da linguagem e dos componentes disponíveis pois nem sempre o que é pensadoidealizado pode de fato ser reproduzido Desse modo a esquematização deve levar em conta tanto os recursos disponíveis quanto as possíveis restrições assim como comportamentos e outras características disponíveis na linguagem 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 E Ao utilizar o framework React Native é possível implementar qualquer interface interativa a partir de um design elaborado em protótipos navegáveis independentemente de sua complexidade 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 Parabéns A alternativa D está correta O framework React Native permite que diferentes tipos de interface interativa sejam criados a partir dos componentes disponibilizados Nesse sentido além dos componentes específicos semanticamente falando é possível usar outros para as mesmas função Um bom exemplo é o componente View que pode conter outros elementos do mesmo tipo ou não assim como textos diretamente Outra característica importante é o fato de possuir componentes otimizados para algumas funcionalidades com os indicadores de atividade entre outros 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 Tratase 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 2 Componentes de lista e multivalorados Ao final deste módulo você será capaz de descrever os componentes de lista e multivalorados disponíveis no React Native Componentes específicos para tarefas específicas 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 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 tratase 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çãobase 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 destacamse 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 Observaremos a seguir um exemplo de implementação de lista utilizando o componente VirtualizedList React Native Lista com VirtualizedList Recomendação Antes de continuar copie e execute o código para conseguir ver o componente em funcionamento 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 Atributo que recebe os dados a serem apresentados no formato chavevalor Função dataany indexnumber responsável por extrair o conteúdo dos dados que serão apresentados Data getItem Função dataany responsável por determinar a quantidade de itens a serem exibidos Função infoany que exibe e renderiza os dados da lista Como vimos acima é possível utilizar diferentes tipos de componentes para a exibição dos dados atribuindoos diretamente na declaração do componente ou utilizando uma função Em nosso exemplo utilizamos o componente funcional Item para isso Função itemobject indexnumber usada para extrair uma chave única para cada item da lista a ser exibida no componente Esta chave é usada pelo React para o armazenamento em cache e o rastreamento dos itens da lista Atributo numérico que indica a quantidade inicial de itens a serem renderizados 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 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 getItemCount renderItem keyExtractor initialNumToRender 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 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 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 Vejamos um exemplo de implementação do FlatList 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 Permite a atualização de seu conteúdo por meio do movimento de puxar e soltar ou por rolagem scrolling 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 state Todo dado capaz de variar ao longo da aplicação podendo tal mudança ser ou não proveniente da interação do usuário 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 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 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 Falta pouco para atingir seus objetivos Vamos praticar alguns conceitos 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 C Embora o React Native possua uma grande quantidade de componentes nativos alguns deles Parabéns A alternativa B está correta No React Native há diversos componentes disponíveis para diferentes funções Embora seja possível combinar tais elementos para a criação de componentes é recomendado utilizar os componentes nativos conforme suas funcionalidades Nesse sentido é possível montar uma lista utilizando View e Text Entretanto tal implementação não teria o mesmo desempenho que um componente de List disponível justamente para a exibição performática desse tipo de dado Questão 2 Sobre o componente VirtualizedList marque a afirmativa correta 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 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 Parabéns A alternativa E está correta Nativamente o React Native disponibiliza alguns componentes cuja função é exibir dados em formato de listas Embora em tais casos pudéssemos utilizar componentes genéricos como o ScrollView é recomendado usar os componentes específicos para tal função Entre esses componentes encontrase o VirtualizedList Ainda que seja uma implementação básica dos outros dois componentes de lista ele compartilha a maioria dos recursos presentes nos demais sendo indicado para a renderização de dados imutáveis 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 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 Páginas página inicialhome Páginas secundárias Links links externos e internos Breadcrumb Com isso é normal no desenvolvimento de aplicativos mobile se pegar emprestado alguns desses termos a fim de fazer uma assumpção eou uma correlação de conceitos Podese afirmar que um aplicativo é normalmente composto por várias páginas 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 Ao longo deste módulo falaremos sobre os aspectos que envolvem a navegação entre as telaspá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 o nosso ambiente Para implementar os exemplos que serão demonstrados neste módulo é necessário instalar algumas novas dependências em nosso projeto Menus menu horizontal e vertical Navbar se você ainda não criou um projeto recomendo que o faça agora Essas dependências serão listadas a seguir reactnavigationnative reactnativereanimated reactnativegesturehandler reactnativescreens reactnativesafeareacontext 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 reactnative link caso esteja utilizando uma versão do React Native Cli inferior a 060 Além disso no ambiente iOS será preciso rodar os pods por meio do comando npx podinstall ios para completar o processo de linking das dependências 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 Navegador 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 podese 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 Histórico Outro conceito interessante que pode ser verificado é o de histórico Perceba que seu navegador guarda o histórico das páginas que você visita permitindo que você volte ou avance diretamente pelos botões presentes no navegador ou por meio de links no sitesistema visitado ou usado 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 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 Appjs e da navegação entre duas telas Home e Sobre Dica Antes de codificarmos precisamos instalar a seguinte dependência reactnavigationnativestack Estrutura do projeto A imagem a seguir mostra a estrutura do projeto no qual foi utilizado o Expo por meio do snackexpodev Estrutura de um projeto O script Appjs é 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 homejs O próximo código é da tela About React Native aboutjs Criação do Stack Navigator Este código mostra a criação do Stack Navigator a partir do script Appjs React Native Appjs Análise do código 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 StackNavigator 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 StackScreen 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 Até esse ponto nosso modelo de navegação Stack está criado com duas possíveis rotas a tela Home e a About A navegação entre ambas via Stack está sendo feita nas próprias telas por meio dos componentes Button nelas inseridos Esses componentes por sua vez foram inseridos graças à ação onPress em que temos navigationnavigateAbout navigationnavigateHome Repare que as telas Home e About recebem como propriedade props o navigation proveniente do Stack Navigator Tal propriedade permite que naveguemos usando o método navigate a exemplo do que faríamos em uma página web usando um link entre as telas screens que fazem parte da nossa pilha de telas Esse método recebe como parâmetro o valor do atributo name que definimos no Appjs em StackScreen Uma funcionalidade nativa do Stack é permitir que voltemos à tela anterior após termos navegado por intermédio da nossa pilha de telas Para isso o Stack inclui naturalmente uma opção de voltar logo no início da tela Podemos usar tal botão ou então implementar tal opção por meio deste código navigationpushHome 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 Recomendação Navegação entre telas Histórico 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 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 Atenção Antes de vermos os códigos de um exemplo funcional de navegação por Tab precisamos instalar a seguinte dependência reactnavigationbottomtabs 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 Appjs Recomendação Crie um projeto copiando do anterior apenas as duas telas já mencionadas Criação do Tab Navigator Nosso Appjs ficará desta forma React Native Appjs 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 Importar a dependência Criar uma constante Tab como instância de createBottomTabNavigator Criar dentro do NavigationContainer o TabNavigator e em seguida o TabScreen no qual são setadas as telas a serem acessadas por intermédio dessa navegação 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 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 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 Dica Para usar o Drawer é necessário instalar a seguinte dependência reactnavigationdrawer 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 Appjs para que ele fique desta forma React Native Appjs 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 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 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 Navegação entre telas O Drawer cria um menu estilo hambúrguer ou sanduíche no topoheader de nosso aplicativo Tal menu contém o link para as telas incluídas como screens no DrawerNavigator 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 navigationopenDrawer e navigationcloseDrawer 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 definir ums como items dos outros 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 Falta pouco para atingir seus objetivos Vamos praticar alguns conceitos 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 Parabéns A alternativa E está correta Com a utilização de bibliotecas externas é possível adicionar ao React Native alguns componentes que permitem a criação de diferentes modelos de navegação Tais componentes podem ser utilizados individualmente ou combinados entre si fornecendo diferentes formas de se navegar entre as telas de um aplicativo 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 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 Parabéns A alternativa A está correta Podemos combinar diferentes componentes de navegação no React Native Para isso precisamos definir cada modelo seus itens ou screens e suas propriedades No exemplo acima o principal componente de navegação é o Drawer Navigator que possui dois itens o name Home apontando para o componente TabNavScreen e o nameAbout voltado para o componente AboutScreen O primeiro componente que deveria ser exibido era o TabNavScreen que tem como primeiro item o HomeScreen seguido do AboutScreen uma vez que ele foi declarado antes Entretanto a propriedade initialRouteName no Drawer Navigator aponta para About Com isso a primeira tela carregada será a AboutScreen contendo o menu de acesso ao Drawer Navigator 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 4 Recursos de estilização e animação Ao final deste módulo você será capaz de listar os recursos de estilização e animação 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 utilizamse as folhas de estilo CSS no React Native empregase um código JavaScript por meio da propriedade props style CSS 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 utilizamse as folhas de estilo CSS do inglês Cascading Style Sheets no React Native empregase 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 margintop 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 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 StyleSheetcreate 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 Appjs React Native Definição de estilo externa Agora observe o código stylesjs React Native Script stylesjs 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 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 styledcomponents 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 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 ScrollView FlatList SectionList Além disso também é possível criar componentes personalizados e utilizar o método AnimatedcreateAnimatedComponent 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 Animatedtiming Veja a sintaxe do método Animatedtiming 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 AnimatedText No exemplo o AnimatedText é 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 AnimatedView e outros elementos 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 Configuração de animações tempo duração funções de atenuação etc Saiba mais Cada um desses recursos pode ser explorado a fundo por meio da documentação oficial do React Native LayoutAnimation API Funcionamento e análise de código Demonstraremos o funcionamento da LayoutAnimation API Em seguida faremos comentários sobre o código utilizado Vamos lá React Native 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 Rastreamento de valores e gestos 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 O primeiro ponto de atenção no código diz respeito a este fragmento UIManagersetLayoutAnimationEnabledExperimental UIManagersetLayoutAnimationEnabledExperimentaltrue Essa instrução deve ser inserida para que a animação funcione na plataforma Android Nesse exemplo é utilizado state estado que é responsável por definir a largura e a altura setados inicialmente para o quadrado O state a exemplo do props é um objeto JavaScript utilizado para guardar informações mutáveis sendo gerenciado dentro de cada componente Podemos por ora e de forma mais simplista dizer que o state é semelhante a uma variável Comentário 1 Comentário 2 Comentário 3 Em relação à animação o pressionamento do botão faz com que a função onPress seja executada Essa função utiliza o LayoutAnimation para animar o efeito de diminuição das dimensões do quadrado 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 Atenção Embora seja um recurso poderoso a LayoutAnimation API oferece menos controle que a Animated API 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 Falta pouco para atingir seus objetivos Vamos praticar alguns conceitos Questão 1 A estilização de um aplicativo mobile é bastante similar à de uma página web definindose 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 Parabéns A alternativa C está correta Em React Native de forma nativa estão disponíveis as mesmas propriedades presentes na CSS Tais propriedades podem ser aplicadas em quaisquer componentes Além disso ainda existe a possibilidade de utilizar isoladamente ou até mesmo de forma combinada bibliotecas externas como a Styled Components que 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 possui recursos avançados como permitir entre outros exemplos a aplicação dinâmicacondicional de estilos 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 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 Parabéns A alternativa C está correta As animações são um importante recurso em um aplicativo mobile sobretudo quando usadas em resposta a interações ou ações do usuário como o click em um botão ou a alternância entre uma tela e outra Tal importância vai além de se tornar a aplicação visualmente mais atrativa No React Native estão disponíveis nativamente duas APIs para animar os componentes e o layout como um todo a Animated API e a LayoutAnimation API Considerações finais 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 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 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 Referências REACT NATIVE Docs Consultado na internet em 12 ago 2021 Material para download Clique no botão abaixo para fazer o download do conteúdo completo em formato PDF Download material O que você achou do conteúdo Relatar problema