Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Layouts de App Comuns em React Native: Página de Galeria

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: Calendar Page
Common React Native App Layouts: News Feed

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nessa série, aprendemos como criar layouts de páginas comuns, usados em apps mobile, com React Native. Os layouts não são funcionais—contudo, o foco da série é fazer-nos estruturar conteúdo em apps com React Native.

Se estiver começando a estruturar apps em React Native ou estilização em geral, veja nosso tutorial anterior:

Para acompanhar a série, temos o desafio de criar cada tela sozinhos, antes de ler as instruções passo-a-passo no tutorial. Não nos beneficiamos muito apenas lendo o tutorial! Tentemos primeiro antes de olhar as respostas. Se conseguir fazer parecer com a tela original, comparemos nossa solução com a do passo-a-passo. E então, decidamos qual é a melhor!

Nessa terceira publicação da série, criaremos uma página de galeria de fotos:

photo gallery page

Galerias, no geral, são usadas para mostrar uma coleção de conteúdo relacionado onde apenas a informação necessária é apresentada. A maioria das vezes, isso inclui uma foto, título e outra informação relevante.

Eis alguns exemplos desse tipo de layout sendo usado por aí:

Crunchyroll Anime Gallery
Librivox Audiobook Gallery

Configuração do Projeto

O primeiro passo, é configurar um novo projeto em React Native.

Com o projeto configurado, abramos index.android.js e substituamos o conteúdo por isso:

Criemos a pasta src/pages e criemos o arquivo Gallery.js dentro.

Também precisaremos do pacote react-native-vector-icons. Usado especificamente para os ícones no rodapé.

Abramos o arquivo android/app/build.gradle e adicionemos a referência ao pacote:

Façamos o mesmo em android/settings.gradle, adicionando isso ao final do arquivo:

Abramos android/app/src/main/java/com/react-native-common-screens/MainApplication.java e importemos o pacote:

Por último, uniciemo-no:

Criando a Página de Galeria

Certo, agora que tentamos criar o código por conta própria (sem trapaça, certo?), mostraremos nossa implementação.

Diferentes das páginas anteriores, a galeria precisa de algumas imagens que serviremos como conteúdo principal. Podemos ir no Google e pesquisar imagens ou usar as existentes no repositório do Github. Todas as imagens tem permissão de seus autores para serem usadas, logo podemos usá-las sem problemas. Com as imagens, salvemo-nas na pasta src/images. Pelo jeito que as imagens serão apresentadas, todas devem ter dimensões iguais.

Comcemos criando src/pages/Gallery.js e adicionando o código base:

A página precisa de um constructor() onde definiremos os caminhos das imagens que usaremos. No React Native, para referir a imagens localizadas no diretório do projeto, basta requerê-las como requeremos um módulo JavaScript. Vale notar que não podemos ter caminhos de imagens dinamicamente gerados, logo, temos de fornecer um caminho de verdade.

Não precisamos defini-las agora, já que os valores não alterarão. Poderíamos definí-las em um arquivo separado, importá-lo e atribuir a uma variável, e usá-la diretamente. Mas, para simplificar, decidimos colocar tudo na propriedade state.

Dentro de render(), não faremos como os outros, envolvendo tudo com um componente ScrollView, porque o componente de abas da parte inerior da tela deve ter uma posição fixa. Isso significa que mesmo se as fotos passarem da altura disponível, as abas devem permanecer no lugar. Para conseguir isso, usemos um componente View para envolver tudo e envolver apenas as fotos em um ScrollView. Isso permite-nos aplicar a rolagem apenas ao container da coleção de fotos:

Agora, começamos a ver um padrão. Toda vez que precisamos usar JavaScript dentro de render(), devemos criar uma função separada para esse código ao invés de colocá-lo diretamente dentro de render(). Isso mantém simples e limpo.

Agora, sigamos para a estilização. Embora uma ScrollView não seja usada para envolver tudo, agora, é important enotar que ainda precisamos usar flex: 1 no container principal para ele tomar todo o espaço disponível.

renderGallery() é bem parecida com renderWeeks() que usamos no tutorial anterior, usada para renderizar a página do calendário. Se quiser relembrar como funciona, vá em frente e veja o tutorial anterior sobre páginas de calendário. O que é preciso saber é que resizeMode é aplicado em Image. Nesse caso, usamos cover, que faz a imagem ocupar todo o espaço disponível em seu container, e mantendo a proporção. Isso faz as imagens estourarem um pouco em aparelhos com telas maiores se a imagem for menor.

Eis getPairsArray():

gallery page styled footer

Por fim, eis o estilo para cada linha (item) e foto (photo). Notemos o uso de flex: 1 na foto. Isso é porque o componente Image é seu próprio container. Queremos que o container em si ocupe metade do espaço disponível para cada linha—é por isso que uma propriedade flex deve ser usada. Se não for feito, apenas as dimensões requeridas pela foto serão usadas e resizeMode, adicionada anteriormente, não entrará em efeito.

Conclusão

É isso! Nesse tutorial, aprendemos como implementar layout para uma página de galeria. Focamos em como lidar com imagens ao estruturar apps com React Native. Geralmente, usaremos uma combinação de flex e resizeMode para fazer as imagens seguirem do jeito que queremos. Como sua solução compara com a nossa? Diga-nos deixando uma comentário abaixo.

No próximo tutorial, aprenderemos como implementar um layout muito usado em apps de notícias Enquanto isso, veja alguns outros tutoriais sobre React Native e Flexbox!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.