Aula 10
Implementação da Página de Perfil Pessoal – Aula de React Native na Prática
Summary
## Resumo do Transcrito sobre Flexbox e Conexão com Backend
### Flexbox
- O palestrante discute o uso do Flexbox, começando com a orientação da `flex-direction`.
- Mudando a direção para `row`, os itens são alinhados horizontalmente, enquanto `column` os alinha verticalmente.
- Ele menciona como adicionar comentários no JSX e a criação de componentes.
### Componentes
- O palestrante fala sobre a utilização do `TouchableHighlight` e a necessidade de importá-lo.
- É criada uma estrutura com campos para nome e idade, além de um botão de atualização.
- A discussão inclui a adição de estilos para os componentes, como borda e padding.
### Estilo
- O palestrante aplica estilos usando folhas de estilo e menciona a importância das propriedades como `fontWeight` e `borderRadius` para circular botões.
- Ele define estilos para o perfil, nome e idade.
### Conexão com Backend
- O foco mudança para a funcionalidade, com planos de conectar o frontend ao backend.
- O palestrante inicia a construção de um estado para armazenar `nome`, `idade`, e `avatar URL`.
- Explica a criação de uma função chamada `atualizarInfo`, que será chamada quando o botão de atualizar for pressionado, para buscar informações do backend.
### Conclusão
- O conteúdo destaca a manipulação de estilo com Flexbox e a preparação para a integração do backend, utilizando estados para gerenciar dados de forma dinâmica.
Video Transcript
do flexbox. Se eu mudar isso aqui para row, vamos ver o que acontece. Esqueci disso, comentário
aqui lá. Deixa eu pô aqui, comentário. Tá aí. Tá aí. Viu agora o axis, o main axis
é horizontalmente, né? Se você botar coisa, vai acontecer lado a lado. Mas vamos voltar
para a coluna. Se você que botar comentários no gsx, nessa parte do gsx react nêre, você
pode ser que for assim e botar os braces aqui. Não se esqueça, esqueça por comentário.
Vamos pôr o nome e idade, né? A gente tem um botão, vamos usar o touchable highlight,
que a gente aprendeu antes. E então se esqueça de adicionar nos componentes importados,
o touchable highlight. Tá bom. Num ponto textual lá, atualizar. Tá aí. Tem nenhum estilo
agora. Perfio na umidade. Vamos fazer uma imagem de baixo do perfil, né? Source.
Lembre-se de adicionar o componente aqui no import. Adicionei image. Vamos ver agora.
Tá lá. Agora não tem nada. Vamos ver essa imagem aqui. Já tá lá. Tá bom. Vamos botar um
texto aqui para ser o placeholder do seu nome. Meu nome. Copiar isso. Minha idade. Note que não
importa se eu posto as coisas lado a lado ou não. O que importa é o estilo do factbox. Tá na coluna.
Fiz isso. Vamos melhorar esse botão aqui. Botar um style, né? Propriedade. Aí vai na
coluna de styles. Folha de style aqui de estilo. Adicione style. Vamos botar atualizar. Botão. Sei lá.
Vamos botar o sabotão lá. Vamos botar a border. Colar. Vamos botar um padding. Doze. Vamos botar
um color. Pela gray. Você pode notar que não sou muito bom de estilo. Vamos postar o
tag styles.botão. A gente fez. Tá aí. É uma coisa assim. Aí vamos botar um estilo para o
teste. Styles. Test do botão. Vamos criar esse estilo. Bigula. Test do botão. Vamos só mudar a cor. White.
Tá bom isso não. Front weight. Botar negrito. Vamos mudar isso. Tá aí. Deixa isso assim mesmo. Agora
vamos ver os outros. Vamos botar um negrito para o perfil e para o nome e a idade. Vamos criar um estilo. Vamos chamar
label. Etiquez. Vou criar label aqui. Vamos botar front weight bold. Tá aí. Vamos mudar aquela
cor de libo. Vamos botar um estilo. Styles. Abatar. Vamos botar abatar. Cria aqui abatar. Vamos botar
um width e uma height. Vamos botar 100 por 100. Vamos ver o que acontece. Vou botar a bordo. Tá aí. A gente quer fazer
um círculo lá. Se você o jeito que a gente faz a bordo ficar circular é botar bordo radius. É um quadrado. Tem que pôr no metade da
altura ou da largura. Então metade de 100 é 50. Vamos ver o que acontece. Aí tá um círculo. Sempre a metade do lado do
quadrado para botar o bordo radius para virar um círculo. Tá quase bom. Agora a gente só falta conectar o back end. Eu não vou fazer
mais estilo agora. Vou deixar para depois. Quero só focar na funcionalidade. Agora vamos conectar o back end. A primeira coisa que
eu vou fazer eu vou fazer o construtor aqui. Função. Vou declarar lá. Se lembra de pôr os props no argumento. Chama o super.
Ele é o construtor mais básico. A gente vai me indiciar o estado aqui do componente. Vamos iniciar para todos os atributos que a gente tem
aqui. A gente tem o nome. A gente tem a idade. A gente tem o avatar URL. O link do avatar. Então vamos pôr aqui. Vamos pôr nome e vamos iniciar
para para ter nada ainda. Ou a gente pode pôr o que tem lá. Vamos pôr meu nome. Meu nome. Depois a gente muda para vazio. A idade
vamos pôr. Sei lá. 30. Avatar URL. Eu botar nada. Só assim. Agora vamos associar os valores que tem aqui com o estado. Vamos ser
this state. Nesse caso é o nome. Vai aparecer lá. E essa minha idade vamos associar a state com a idade que está dentro do estado.
E esse imagem source aqui também. This state. Avatar URL. Mas como é uma imagem você está adicionando uma imagem de externa.
Tem que botar um objeto com a chave URI. URI. E aqui tem que ser o link. Vamos mudar o estado inicial para ver se realmente está
funcionando. Conectado ligado. O estado. O texto desse cara ligado ao estado. Está aí meu BBB. Idade 25. Está ligado já. Agora só falta a gente conectar
com o backend para mudar isso para as informações corretas. Para isso vamos criar. Quando a gente clicar esse botão atualizar vamos conectar o
backend e pegar a informação e atualizar essa cena. Essa página. Então vamos adicionar o onpress. Pro touchable highlight.
Em vez de botar a função aqui eu vou criar uma função aqui. Vamos chamar.
This atualizar. Info. OK.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: