Para estilizar os itens separados, criarei novamente um componente separado e o
nomeei como item de refeição. js, o nome como
sempre é totalmente de sua responsabilidade e, lá,
você conhece o jogo, criamos um
componente React importando React, provavelmente também precisaremos de exibição, texto e folha de estilo e
talvez também algumas outras coisas do React Native. Em seguida, configuramos o componente, item de refeição, onde recebemos adereços
e, em seguida, retornamos alguns jsx no final. Configure uma folha de estilo aqui, armazene-a em uma constante de estilos com a criação
de folha de estilo para a qual passamos um objeto e, no final, exportamos nosso item de refeição aqui como o arquivo padrão. Agora, com isso aqui, no item de refeição, neste componente, é
claro que precisamos retornar algum
código jsx para esse item de refeição e isso é algo que recebo da tela de categoria
de refeição. Aí eu
tenho essa visão com o meu texto aqui, é no final o que eu quero saída, um pouco mais complexo do que isso,
mas vou cortá-la de lá e movê-la para o item de refeição e lá, retornar essa
visão aqui, mas de Claro que não terminamos com isso. Por um lado, isso também deve
ser tocável, porque podemos selecionar uma refeição, podemos selecionar uma receita para ser levada
para a tela de detalhes, portanto importarei a opacidade palpável.
Agora, é claro, você poderia novamente fazer essa diferenciação e usar o efeito cascata
com feedback nativo palpável
no Android, se você quisesse, eu irei com opacidade palpável por enquanto e envolverei minha visão aqui com opacidade palpável, assim para
que possamos na verdade, toque nosso item aqui e no onPress, na verdade, eu quero ativar uma função que espero obter em uma propriedade que ainda
não estamos passando para o item de refeição, mas porque ainda não estamos
usando o item de refeição em qualquer lugar, mas que irei no futuro, talvez possamos nomear
isso em select meal ou apenas onSelect, o que você quiser, o nomeei onSelectMeal e espero obter esse suporte
no item de refeição quando o usarmos em jsx. Então essa é a opacidade palpável, aí eu
tenho minha visão com o título e, na verdade, essa visão deve ser um pouco mais complexa do que isso.
Eu quero ter uma visão, uma visão aninhada lá como essa e outra visão abaixo, então quero
ter duas linhas.
Isso será configurado como uma coluna, mas essas duas visualizações aqui serão configuradas como linhas aqui.
A primeira visualização também deve renderizar uma imagem de plano de fundo, para que o título fique na frente dessa
imagem de
plano de fundo, a segunda visualização e a segunda linha aqui devem renderizar alguns detalhes sobre
a receita selecionada, como complexidade e duração.
Então, vamos começar com isso antes de adicionarmos a imagem mais tarde. Em ambas as
visualizações, adicionarei a propriedade style e apontei para a linha de refeição de
estilos ou o que você quiser nomear, porque será uma linha na minha apresentação de refeição
aqui e eu adicionarei a linha da refeição lá em baixo e definiremos a direção flexível aqui para a linha, é claro, porque
essas devem ser linhas de dados. Agora, ao redor do item
geral aqui, envolverei outra visualização na qual desejo configurar um
estilo geral de estilos item de refeição e item de refeição,
que também é configurado aqui na folha de estilo, é claro, e lá quero
dar uma altura a cada refeição de 200, digamos, cada item da lista aqui e
uma largura de 100% para obter a largura total disponível e também talvez uma cor de fundo dessa aparência acinzentada
aqui, podemos ver se queremos manter isso, por enquanto vou Use isso.
Agora podemos usar o item de refeição aqui e ainda
não o terminamos, mas podemos começar a usá-lo aqui na tela de categoria refeições importando-o, é claro, importando-o, importando-o da pasta de componentes e do arquivo
de itens de refeição e depois renderize isso aqui, então retorne o item da refeição aqui assim e, é claro, agora precisamos passar alguns dados, dados como o
título que obtemos do itemData. item. title e o suporte onSelect
que espero obter no item de refeição que, no final, associamos ao suporte onPress da opacidade palpável, onSelectMeal,
que foi o nome que escolhi, também é algo que
precisamos configurar
aqui quando usamos a refeição item e
isso deve apontar para uma função que, por enquanto, não faz nada,
mas que posteriormente carregará a página de detalhes dessa refeição.
Portanto, agora obtemos o título no suporte de título, daí o item de refeição, aqui, quando produzimos o título, fazemos isso com a ajuda
de adereços. título.
Se agora salvarmos isso, poderemos realmente ver algo aqui, então vamos esperar que isso seja recarregado e sim, vemos
nossa refeição aqui
e certamente não muito bonita, mas pelo menos, vemos um pouco mais do que antes.
Agora, o que eu gostaria de ter aqui é um pouco de espaçamento ao redor da lista, mas
dentro do espaçamento, o item da lista deve ter a largura total disponível e não apenas a largura do item
mais largo que atualmente está acontecendo.
E, para isso, podemos acessar o FlatList e adicionar a propriedade style e definir essa largura para 100% para
garantir que o FlatList tenha toda a largura possível.
Com isso, deveríamos procurar o que queremos aqui.
Agora, é claro, os itens das refeições ainda não estão prontos, eles não têm a
aparência que eu quero que eles tenham, mas também chegamos lá lentamente. Agora no MealItem. js, ainda temos algum trabalho
a ser feito, por exemplo, essa
visualização aqui com o título mais tarde também conterá a imagem e, portanto, deve ser muito
maior que a linha abaixo dela, que posteriormente produzirá alguns detalhes.
Portanto, aqui, mesclarei meus estilos de linha de refeição com outro objeto de estilo, portanto, com o estilo configurado em outro objeto da folha de estilo, que nomeei como
cabeçalho de refeição ou o que você quiser, e o mesmo lá em baixo, a propósito, para os
detalhes no final, mesclarei isso com
os detalhes da refeição de estilos, para que combinemos estilos e vamos começar com o cabeçalho da
refeição que podemos configurar aqui.
O cabeçalho da refeição no final conterá a imagem e também o título, e eu quero que
a altura seja de,
digamos, 80% da altura disponível, então isso deve ser muito grande. Os detalhes da refeição automaticamente obterão os 20% restantes, obviamente,
e para ver se isso funciona, vamos mostrar alguns detalhes aqui. Portanto, nessa exibição aqui, nessa linha
abaixo da linha do título,
também quero ter um texto aqui e
ali. produzirá, digamos, props duration e depois m, por minutos, porque m duration será um número que tratamos
como minutos.
Apenas precisamos passar a duração da tela de categoria refeições, é claro, portanto, quando usarmos
o item de refeição, além de passar um título, definiremos o limite de duração, porque agora estamos esperando
isso no item de refeição.
Obtemos isso do itemData. item que é nossa refeição
e lá, teremos uma propriedade duration, porque nossas refeições,
conforme definidas no modelo aqui, têm uma propriedade duration .
Se salvarmos isso,
agora vemos nossa duração lá em baixo e, na verdade, ainda podemos alterar essa altura aqui para até 90%, deve ser maior do que
era aqui, que parece melhor e,
é claro,
você pode experimentar isso também. Na linha de detalhes
da refeição, eu também quero ter um preenchimento horizontal, então, à esquerda e à direita, digamos 10 e
justifique meu conteúdo aqui com espaço entre elas, lembre-se de que é uma linha, então isso será justificado horizontalmente, para que quando tivermos
vários itens, eles serão bem distribuídos lá.
Portanto, temos 20 minutos, vamos produzir mais informações adicionando outro texto e
produzindo
a complexidade. Portanto, aqui apresentarei a complexidade
e, posteriormente, apresentarei a acessibilidade. Agora só precisamos passar esses dados ao criar nosso item de refeição.
Então aqui, além da duração, passamos na
complexidade que chegamos aqui, itemData. item. complexidade e acessibilidade, é claro que é
itemData. item. acessibilidade, assim
e se salvarmos isso e deixarmos que este seja reproduzido novamente, agora vemos essa saída aqui. Ainda não é super bonito e podemos definitivamente
melhorar isso, mas um bom começo. Agora simples e acessível ou, portanto, nossa complexidade e
acessibilidade, isso deve ser um pouco diferente. Sabemos que será texto e, portanto, eu
posso usar algumas funções ou métodos Javascript que temos disponíveis nas strings; simplesmente
usarei o toUppercase para convertê-lo em maiúsculas inteiramente assim e agora isso já deve parecer um
pouco melhor do que antes. Agora você ainda pode ajustar o estilo aqui, eu continuarei com esse estilo aqui
por enquanto e agora vamos adicionar uma imagem de fundo acima.
Portanto, para isso, queríamos uma imagem de plano de fundo por trás do texto do título e, felizmente, o React Native torna
a adição de uma imagem de plano de fundo realmente muito simples. Reagir Navios nativos com um componente interno, o componente
de plano de fundo da imagem que podemos usar para renderizar uma imagem em
segundo plano, como você imagina pelo nome. Você o adiciona ao lado do componente atrás do qual deseja adicioná-lo e o adiciona antes desse
componente. Portanto, aqui eu adiciono o fundo da imagem e o fundo da imagem, como na imagem normal, para definir uma fonte. Aqui, minha fonte é uma imagem da web; portanto, passamos um
objeto; se fosse uma imagem local, você usaria o require e o que aprendeu sobre imagens locais
no início do curso, mas aqui, é uma imagem da web; objeto com um suporte de
URI e lá usamos props image, que é onde espero obter esse URL nesse componente, portanto, é claro que
teremos que garantir que passemos o URL nesse suporte. Também adicionarei alguns
estilos aqui e serão estilos. bgImage que agora vamos adicionar à folha de estilo lá em
baixo, onde você quiser, talvez aqui, realmente não importa. Uma coisa importante aqui, você deve definir a
largura e a altura, porque é uma imagem da Web e eu as
usarei 100% para ambas, porque deve preencher todo o espaço que obtiver. Agora só precisamos garantir que passamos a imagem aqui na categoria categoria refeições, então
além do título, aqui também quero passar no itemData. item. imageUrl é o nome dele, você pode ver isso no modelo
imageUrl, então é isso que estamos passando e passamos para o suporte de imagem, porque é isso que estamos esperando
e o que estamos definindo aqui na refeição item. E se você agora salvar isso e vamos misturar
as coisas e testar isso no Android, demorará um pouco mais para carregar, e é por isso que normalmente uso
o iOS aqui, mas agora, se testarmos, vemos o nosso hambúrguer aqui. O que não vemos
mais é o nosso título. Para mostrar o título novamente, certifique-se de envolver
realmente o fundo da imagem, é assim que você diz ao React Native qual conteúdo deve
estar acima da imagem de fundo. Então agora, com isso, aqui está o nosso título, que não é fácil de ler e vamos consertar isso, mas está lá novamente.
Então, estamos começando com essa receita aqui, agora vamos garantir que o título seja um
pouco mais fácil de ver, atribuindo-lhe um estilo aqui, um título de estilos que agora podemos configurar lá em baixo e eu quero definir uma família
de fontes open
sans bold, faz sentido desde que registramos essa fonte.
Dê um tamanho de fonte que nós aumentamos um pouco, talvez 22, você
pode brincar com isso, é claro.
Dê uma cor branca para facilitar a leitura e também atribua uma cor de fundo, para que possamos sempre
vê-la, mesmo que a imagem de fundo seja branca; nesse
caso, o texto em branco seria difícil de ler, fornecendo essa é uma cor RGBA que é uma cor que possui
transparência embutida, por assim dizer, e é simplesmente uma cor preta que é um pouco transparente e agora
também adiciona um pouco de preenchimento aqui, o preenchimento
vertical de cinco deve ficar bom para que o a caixa colorida de plano de fundo aqui não fica bem nas bordas
do texto que está dentro da caixa e preenchendo na horizontal 12, talvez. Com isso, devemos sempre ver nosso título
e, na verdade, provavelmente podemos aumentar essa transparência aqui,
diminuir a opacidade, sim, isso
parece um
pouco melhor, eu acho, assim. E a única coisa que quero fazer agora é
mover o título para baixo na parte inferior desta imagem
e, portanto, no estilo bgImage que tenho aqui, configurarei o conteúdo justificado para flexionar o final, porque a imagem de fundo age automaticamente como uma caixa flexível, por assim
dizer, como uma visualização, para que possamos justificar nosso conteúdo lá e agora
tenhamos esse título na parte inferior.
Agora também poderíamos centralizar o texto, indo para o título aqui e adicionando o centro de alinhamento de texto e, caso seja muito longo, muito grande,
além de diminuir o tamanho da
fonte, o que farei um pouco para 20, é claro que
você pode vá para o texto aqui em que você produz um título e defina o número de linhas
como 1 e isso garantirá que o texto
seja encurtado automaticamente se for muito grande, como aqui para a salada com tomate cereja. Também vemos um efeito estranho aqui no iOS, onde temos um
plano de fundo extra por trás do texto e não apenas a caixa colorida de plano de fundo aqui.
Isso porque eu apliquei minha cor de plano de fundo e assim por diante diretamente no texto. Para corrigir isso, podemos cortá-lo
do título aqui e configurar apenas a cor e assim por diante. Em vez disso, adicione um contêiner de
título aqui, onde adicionamos essa cor de plano de fundo e assim por diante, envolva esse contêiner em torno de nosso
título; portanto, uma visualização extra que adicionamos aqui e é bastante normal no React Native
aninhar várias visualizações e, nessa exibição, agora podemos adicionar estilo, estilos e contêiner de título e, se salvarmos isso, devemos nos livrar desse comportamento estranho
no iOS; sim,
agora não temos essa caixa extra lá,
apenas temos uma cor de plano de fundo e a mesma no Android.
Então agora isso não parece muito ruim, mas eu não estou totalmente
feliz, eu gostaria de centralizar meus detalhes aqui verticalmente também e dar um pouco mais de espaço, eu acho, e
por isso podemos dar o cabeçalho talvez 85% da altura e dos detalhes da refeição aqui, lembre-se de que nossa direção flexível é
a linha, porque estamos mesclando a linha da refeição e os detalhes da refeição aqui e, portanto, nosso eixo
transversal é de cima para baixo; portanto,
se queremos centralizar verticalmente, isso é o eixo transversal no qual precisamos nos centrar.
Portanto, aqui podemos definir itens de alinhamento que posicionam o eixo transversal para centralizar e
também alterar nossa cor aqui para um pouco de uma cor mais agradável,
esse cinza muito claro, # f5f5f5 pode parecer um pouco melhor, sim,
definitivamente .
Agora, para garantir que realmente centralizemos verticalmente, precisamos apenas ser mais explícitos sobre a
altura que os detalhes
da refeição devem ter; levamos 85% no cabeçalho; portanto, nos detalhes aqui, podemos definir obviamente
uma altura de 15% para descansar, sim, e eu diria que isso parece bastante decente aqui, certamente lista
itens com os quais podemos trabalhar aqui.
Agora, adicionarei um pouco do raio da borda, porque você sabe que eu gosto de raios
da borda, então adicionarei um raio da borda de 10 aqui, para que tenhamos alguns cantos arredondados e, com isso, se você voltar, nós '
já está quase lá, mas você notará que a imagem realmente não respeita o raio da borda.
Agora, para corrigir isso, no item da refeição, basta dizer que o estouro está oculto para que nenhum item filho possa sair desse
espaço ou da forma que estamos construindo
aqui.
E com isso, isso é um começo, algo com o qual podemos trabalhar, agora
é claro que queremos ter certeza de que, quando tocarmos em um item desse tipo, iremos realmente para a página de detalhes.