Um momento
Aula 19
Cursos / Pesquisa de Imagens com o React Native
Definição de Folha de Estilo para o Componente dos Detalhes da Imagem

Summary

# Resumo do Transcript

- Definição de estilo para o contêiner e ajustes na interface.
- Movimentação do texto para não cobrir a barra de status, com um padding-top de 15.
- Verificação do wireframe onde o título da imagem está centralizado no topo, com espaço para a imagem ocupando a maior parte da tela.
- Discussão sobre o estilo do título, definindo o tamanho da fonte para 18 e métodos para centralizar o texto.
  - Utilização de `align self` para centralizar itens dentro do contêiner.
- Adição de uma margem inferior ao título de 15 para melhorar o espaçamento visual.
- Análise da imagem que ocupa quase toda a tela e a introdução de estilos para controlar sua largura e altura.
  - Definição de altura de 300 e largura total usando `flex: 1` e removendo a largura.
- Observação sobre a imagem que não aparece devido à falta de estilo adequado.

## Conclusões

- As alterações visam melhorar a disposição dos elementos na tela, garantindo que o texto e a imagem estejam corretamente posicionados e estilizados.
- A prática de ajustes em tempo real permite verificar a eficácia das mudanças rapidamente.

Video Transcript

ponto container, e vamos definir esse estilo aqui na ful de estilos. Vamos mover esse texto para baixo para não cobrir a status bar. Vamos colocar um pad top de 15. Então do topo vai ter um espaço de 15 e o texto não vai ficar por cima da status bar. Essa barra que tem a hora, o carrier e a bateria. Vamos salvar aqui para ver o que acontece. Clicar em 1. Agora não está cobrindo a barra de status. Vamos dar uma olhada no wireframe. O cenote de título da imagem é centralizado no topo. Tem um espaço e a imagem ocupando a grande parte do meio da tela. E depois seguido do botão. Falta. Vamos lidar com o título. O aqui, o texto, o style, o post styles, ponto, o título. Vou definir o estilo aqui. Não se esqueça da vírgula. Título. Vamos colocar um fonte size 18. E como a gente vai centralizar isso? O cenote, o container que é o pai de todos esses componentes aqui, é essa view. O padrão react native, da flex direction, column. Então a direção padrão vai ser column. Significa que os itens se alinham aqui nesse item principal verticalmente. Então vai ser um item aqui, ele viu o tweet na autolinha, e o tweet na autolinha e assim por diante. Então se a gente quiser fazer o título centralizado originalmente, a gente pode fazer de duas maneiras. A gente pode ajustar a view toda para acertar o waste secundário que é o horizontal para ser centralizado. Se a gente fizesse isso, todo o conteúdo seria centralizado desse cara. É uma opção. Outra opção é só centralizar o texto, o componente de texto que a gente está usando. Dessa maneira você só centraliza o texto, mas não todas as coisas que estão dentro da view. Você pode usar qualquer um, só para demonstrar como a gente pode centralizar o texto, somente ele. Vou usar o estilo no texto para centralizar. Então como a gente vai fazer isso? Vai salvar lá em self. Vai se alinhar o componente, o próprio componente vai se alinhar com o parent. Vamos botar center que veio o que acontece. Salvar, vai automaticamente dar um reload ali. Vou clicar em um desses. Você notar, está centralizado aqui. Porque tem muito texto, né? E o volto está indo na funciona. Vou dar aqui cachorro, buscar, carregando. Vou clicar no que tem um título menor. Clica nesse. Isso está centralizado. Esse aqui é o align self para centralizar itens que já estão contidos dentro do container, da view. E vai se alinhar o componente próprio com o container. Vamos fazer, vamos botar uma, talvez uma margem, no abaixo, debaixo do título. Então vamos botar margem, bottom. Vamos pôr, sei lá, vamos pôr 15. 15 é mais ou menos esse aqui, se passa aqui da barra de status, essa altura. Tá, vai dar uns 15 assim. Acho que está bom. Se você quiser mudar, por favor, senta-se a vontade. Então vai dar margem aí. Enquanto isso, eu não quero dar um refresh ainda, não. Vamos ver aqui da imagem aqui. Essa imagem está ocupando toda a tela. Quase todo, né? Vamos ver. O que a gente pode fazer? Então a image tem um source e dá um UI. E está dentro aqui da props. Mas a gente não deu nenhum estilo, então vamos lá, bota styles. Estals, ponto, sei lá, vamos botar imagem, o que é que eu botei ali no outro? UI tem, é, eu fiz a melhor coisa, tá bom. Volta aqui para o image detail. Tá bom? Então dá os styles, styles e margem. Vamos definir aqui, de baixo, no for de styles, imagem. Faça um object. Não se esqueça dessa vila aqui. Então vamos dar uma largura e altura, tá certo? Para a imagem. Agora, vamos pôr a imagem para ter uma certa altura, sei lá, de... Vamos pôr 300. Agora para a largura aqui, vamos ocupar toda a tela, horizontalmente. Eu sei que tem um espaço aqui no meu wireframe, mas vamos botar em toda a tela, sabe? Como é que a gente faz isso? Primeiramente a gente não sabe qual é as dimensões da tela, mas tem uma maneira de ocupar toda a largura se você botar o know, como na wave, tá bom? Bem, vamos ver o que acontece. Normalmente eu ponho o flex 1, também, vamos ver se funciona assim o flex. Ainda não ver a imagem, porque será gato branco ou olhos bicolor. Tá bom, vou botar o flex 1. Você nota que a altura está ajustada e botei o wave para know e o flex 1. E por que não estava arrasando?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: