Aula 05
Definição da Folha de Estilo da Lista de Resultados com o StyleSheet
Summary
# Resumo do Transcript
Neste trecho, o foco está na adição de estilos a um item de lista de imagens em um aplicativo React Native. As principais etapas mencionadas incluem:
1. **Criação de um StyleSheet**:
- Utilize `StyleSheet.create` para definir os estilos e importe no topo do arquivo.
2. **Adicionando Estilos ao Item da Lista**:
- Aplique os estilos criados ao componente de visualização (View) correspondente ao item da lista, incluindo `padding` e `margin`.
3. **Ajustes no Container**:
- O alinhamento dos itens no container é alterado de `center` para `stretch`, utilizando Flexbox para ocupar toda a largura disponível.
4. **Manipulação do Eixo Principal**:
- A mudança no `flexDirection` para `row` permite que os itens sejam alinhados horizontalmente.
5. **Justificativa e Alinhamento**:
- O uso de `justifyContent` e `alignItems` para centralizar itens vertical e horizontalmente é discutido.
- `alignSelf: 'stretch'` é aplicado para esticar componentes específicos.
6. **Melhorias Visuais**:
- Adição de margens para criar espaço entre componentes e ajustar o background para harmonizar as cores.
7. **Edição da Search Bar**:
- Exclui-se um estilo desnecessário e aplica-se margens para distanciar componentes da barra de busca.
8. **Alterações no Botão de Busca**:
- Estilos adicionais são adicionados ao botão, incluindo centralização do texto e definição de negrito através da propriedade `fontWeight`.
As sugestões e mudanças visam melhorar a estética e a funcionalidade do layout da aplicação.
Video Transcript
Vamos adicionar um estilo para o item da lista de imagens. Vamos aqui no image list item. Vamos fazer
um style sheet aqui const styles style sheet ponto create chamar essa função vamos passar um
objeto com uma folha de estilos como a gente está usando style sheet vamos importar no topo
está lá agora vamos adicionar um estilo para essa view aqui style propriedade style aqui o estilo
vai ser os styles que se refere a esse cara vamos fazer talvez chamar de
e define aqui um povo ou o e2 já vê que já está lá vamos para um padding 16 a pertei uma coisa
e sair e também talvez uma margem
e botan para ter um espaço abaixo de cada item esse espaço aqui se você notar esse cara até
aqui mas a gente gostaria de que esse é tango local passe a linha toda para fazer isso vamos aqui no
index se você vê o index que é o container esse view aqui é o container que o image list está
aqui mas esse container tem estilos aqui e se você notar o align items está tudo centralizado
se a gente post stretch vamos ver o que acontece viu que estendeu todos os itens porque acontece isso
vamos ver aqui esse container que é esse toda contém toda essa cena tem o flex 1 está usando
o flex box né agora o flex box o eixo principal nesse caso vai ser definido pela flex direc
por padrão se você não definir o flex direcciam o react nere vai ser column column define o eixo
principal o eixo principal para ser vertical assim então os itens são alinhados verticalmente
eles vêm um por um em cada linha se eu mudar isso para o ro você nota que eles vão ficar os itens
em cada coluna então o tex input aqui seguido do botão seguido da lista deu
em volta aqui a gente quer quando você põe justify content center você está pegando e
se você está colocando o espaço centralizando o eixo as coisas que estão no eixo principal e
se tiver espaço se sobrar espaço vai aparecer aqui e aqui agora para você mudar esse espaço
horizontalmente que é o outro eixo você usa o line items o eixo principal é vertical mas se
você quiser mudar o espaço dos itens na horizontal é no outro eixo usa line items como está
utilizado só fica no centro mas se botar a estreche vai alongar na horizontal então a gente
dá um stretch para todos esses caras e até quando a gente estava fazendo a search bar a gente
adicionou um align self stretch para a vio essa vio aqui que tem contém o tex input e o touch
de um site nem precisa mais isso porque eu já botei lá bom então eu removi agora voltando aqui os
os os os dos itens vamos continuar a você pode até pôr uma margem para essa vio que contém os dois
componentes que é no index o container a gente pode pôr uma margem para a esquerda direita ou de modo
local incluindo o topo e o lá embaixo do 10 só para ter um espaço lá você nota que o
background fica branco mas o background da vio é essa cor entendeu depois a gente se dá com isso
agora vamos a ver vamos pôr um margem que depois desse vio aqui da search bar também aqui essa é a vio
a gente deu um line mas vamos remover isso e botar styles ponto
vamos usar pesquisa busca bar bar de busca
vamos pôr o que a gente tinha antes flexo direcciam e uma margem bóram de 10
e qual é que eu tinha no item só para ficar com 16 bodei para 16 agora está melhor a também põe uma
margem que para de do lado do tex input para não ficarem colados então qual é esse é o caixa de busca
o tex input vamos adicionar uma margem right talvez 16 também vamos ver o que acontece
e se você quiser mudar para 8 múdvio para que você quiser vamos centralizar esse texto do buscar
também a o tex este está contido no tortebo highlight que tem esse estilo botão buscar a
botão buscar dá um flexo um a flex direcciam é column então se a gente adicionar content center
vai fazer ficar centralizado verticalmente o texto mas não é horizontalmente então para
a gente a por align item center para justificar esse texto dentro do botão horizontalmente
também vou adicionar um negrito para o nome buscar
então está no texto aqui, vou botar estilo, styles, texto do botão, vou criar esse aqui
texto do botão e vou adicionar o negrito com a própria chamada font weight
e você põe em bold e não esqueço da virgo aqui
agora está um pouco melhor né
então vamos continuar
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: