Vamos substituir o conteúdo da tela fictícia das categorias aqui por uma grade de categorias, porque essa é a ideia por
trás dessa tela, afinal. Agora, podemos usar
um componente que usamos anteriormente e esse é o FlatList.
Até agora, usamos isso para listas normais, na
verdade você também pode renderizar grades e é exatamente isso que faremos aqui.
Agora, para isso nesta tela de categoria, substituirei tudo pelo FlatList aqui e só exibirei minha lista simples aqui nesta tela, que retornarei
no
final e definirei num colunas aqui, que é uma nova propriedade que nunca vimos antes para 2 e
isso define quantas colunas queremos ter. O padrão é 1, que é uma
lista normal, mas você pode ter mais de uma coluna e isso fornece uma grade efetivamente.
Agora, com isso, poderíamos renderizar uma
grade, mas é claro que precisamos de alguns
dados para isso, caso contrário, é difícil renderizar uma grade,
certo?
Para isso, adicionarei uma nova pasta com o nome de dados e, lá, adicionarei um dado fictício. js porque, no final, são
apenas alguns dados fictícios que estou fornecendo aqui,
não estamos carregando isso de um servidor ou algo parecido agora, apenas carregue-o dessa maneira.
Eu quero ter um monte de categorias lá e, para isso, vou adicionar outra pasta que eu nomeio modelos, que no
final é uma pasta na qual eu quero definir como meus dados são modelados neste aplicativo, como eles se
parecem .
Então, podemos adicionar uma categoria. arquivo js, por exemplo, e neste arquivo, tudo
o que eu quero é uma classe que eu nomeei categoria e classes são recursos Javascript padrão no Javascript
moderno que eu exporto e lá vou simplesmente definir como um objeto de categoria no meu aplicativo deve parecer como, para que basicamente tenhamos
uma maneira mais fácil de criar esses objetos sem erros de digitação e assim por diante.
Portanto, aqui, essa classe de categoria terá um construtor e você poderá usá-lo, que é um método padrão que
você pode
adicionar a qualquer classe em Javascript para inicializar um objeto com base nessa classe.
Você faz isso esperando alguns argumentos aqui no construtor e para uma categoria. Quero obter um
ID para a categoria, um título e uma cor que usarei como cor de fundo na grade para este item de grade
para esta categoria. e armazenarei todos
esses dados em propriedades com a ajuda da palavra-chave this. Caso isso seja totalmente novo para
você, mergulhe definitivamente em alguns cursos ou recursos Javascript primeiro, porque isso não tem nada a
ver com a navegação React ou com
o React Native, esse é o Javascript moderno e moderno.
Agora, por que eu criei isso?
Porque agora eu posso importar minha classe de categoria da pasta de modelos, da categoria. js no arquivo de dados fictícios e
use-o para criar alguns dados fictícios.
Agora você encontra esses dados fictícios anexados, em anexo encontra o arquivo Javascript com essas categorias fictícias que eu armazeno
em uma constante que depois exporto como exportação nomeada aqui.
Estes são alguns dados de categoria fictícios para as categorias deste aplicativo, nessas categorias
que eu quero ter neste aplicativo. Estas são as categorias que irei usar
neste aplicativo e, agora, podemos usar as categorias dentro de nossas telas, na tela de categorias para ser mais preciso.
Então, lá dentro, quero adicionar categorias de importação e importação de dados / dados fictícios, para importar a constante
nomeada que estamos exportando para lá.
Agora, essa é uma matriz de objetos Javascript no final, certo?
É isso que armazenamos lá,
é apenas uma matriz de objetos Javascript que agora podemos usar para renderizar nossa lista ou, para ser mais preciso,
nossa grade aqui.
Portanto, os dados para este FlatList são simplesmente minhas matrizes de categorias, portanto, aponto as categorias e, é claro,
agora também precisamos do item de renderização para definir como um único item de grade deve ser
renderizado, qual componente deve ser renderizado lá. Para isso, adicionarei uma nova função aqui, render item
de grade, que é uma função que receberá alguns dados do item no final aqui e que deve retornar
um elemento jsx, deve retornar algum componente
React aqui e apontarei para a grade de renderização item aqui. Agora, lá dentro, renderizarei uma visualização e para manter as coisas simples, pois agora essa será
uma visualização com um texto e, nesse texto, quero renderizar itemData.
item, é o que temos disponível
em um FlatList se você se lembrar dos módulos anteriores, o objeto de dados do item aqui
tem uma propriedade de item, o React Native FlatList fornece essa propriedade e, lá, teremos uma propriedade de título porque um
item é chegar aqui é apenas uma categoria que recebemos de nossos dados que estamos inserindo no FlatList; portanto,
teremos um objeto Javascript como um item lá e esse
objeto Javascript será baseado em nosso modelo aqui e ali, configuramos um title, uma cor e uma propriedade
de
ID; portanto, temos uma propriedade de título; portanto, podemos extrair o título aqui assim, usaremos a cor posteriormente.
Então essa é
a primeira coisa, isso deve funcionar. Agora, nas novas versões do React
Native, você também não precisa informar ao React Native que seu ID não é nomeado como chave, mas na verdade é chamado de ID,
porque as versões mais recentes do React Native também aceitam o ID como um ID nos dados da lista.
Se você seguisse adiante em uma versão mais antiga, seria necessário adicionar aqui um extrator de chaves, que é uma função
que obtém o item e o índice e precisa retornar o valor que deve ser usado como chave, portanto, neste
caso, ser item. id, novamente
as versões mais recentes do React Native não precisam disso, mas apenas para referência e para versões
mais antigas, ainda adicionarei isso aqui.
Então agora retornamos nosso FlatList aqui com nossos dados.
Se agora salvarmos isso, já deveríamos ver nossos dados
aqui, é claro que não é tão bonito, mas sim
uma grade, temos italiano,
ao lado de hambúrgueres rápidos e fáceis, próximo
a alemão, apenas não parece uma grade mas tecnicamente é.
Agora, para torná-lo um pouco mais parecido com uma grade, é claro que precisamos adicionar mais estilo. Agora, para mudar um pouco esse estilo, podemos ir para nossos itens
de grade
aqui, para um item de grade único e adicionar o suporte de estilo aqui e adicionar o estilo de item de grade ou
o que você quiser nomeá-lo
e depois lá embaixo, adicionarei item de grade para minha folha de estilo e forneça essa propriedade de flex, queremos ocupar o
máximo de espaço possível,
salve isso, agora isso já parece um pouco mais com uma grade.
Agora, alguma margem ao redor de cada item também
seria boa, então podemos adicionar margem e talvez adicionar 15 como margem ao redor de cada item, para que tenhamos mais espaçamento em
todas as direções e,
com isso, não é tão ruim, é
claro agora também podemos mudar a aparência geral e, por exemplo, dar a cada item uma
altura de, digamos 150, e depende totalmente de você os valores que você escolhe, mas eu diria que
é uma grade bastante
agradável,
certamente não ganha um prêmio de estilo ainda, mas estamos indo na direção certa.
Agora, antes de terminarmos o estilo disso e ainda temos algum trabalho a fazer, vamos nos certificar
de que podemos tocar nesses itens e, em seguida, voltar à tela de detalhes desse item específico, vamos
ver também como podemos na verdade, defina um título no cabeçalho para ter uma ideia
melhor de onde estamos atualmente.