Aula 54 - Curso React Native + Typescript - Criando Screen Profile - Parte 02

Olá, queridos! Estão todos tranquilos? Estou de volta com mais uma aula do nosso curso. Antes de começarmos o desenvolvimento, tenho algumas mensagens e recados para vocês.

O primeiro recado é que na descrição do vídeo, vou deixar o link do repositório para que vocês possam comparar o código de vocês. Não deixem de conferir, pois a cada aula vamos subir atualizações.

E para vocês irem se acostumando, vou deixar os comandos para vocês fazerem o "push" para o repositório do código de vocês. Não importa se é no Github, GitLab ou GitBug, o comando será o mesmo.

Além disso, vou deixar também o link do Discord. Lá, temos uma comunidade de programadores, pessoas que podem te auxiliar de alguma forma. Se tiver alguma dúvida, é só postar lá e alguém vai ajudar. A comunidade ainda é pequena, mas está sempre ativa.

O outro recado é para quem gostou do vídeo, achou interessante e se ajudou de alguma forma. Compartilhe o vídeo e deixe o "joinha". Caso não seja inscrito no canal, se inscreva para receber as notificações dos próximos vídeos.

Ah, e aqui vai um spoiler: em breve, vamos desenvolver um projeto mais completo, consumindo uma API externa. Então, fiquem ligados!

Por fim, para aqueles que querem dar uma ajudinha ao canal, vou deixar uma chave PIX na descrição do vídeo. Qualquer valor será bem-vindo e vai ajudar nas despesas do canal, como café, energia e melhorias no equipamento. Se sentir no coração, faça a transferência.

Esses são os recados que eu gostaria de deixar para vocês. Agora, vamos continuar com a nossa aula!

Aula 2: Desenvolvendo a Tela de Perfil do Usuário

Na aula passada, construímos a navegação e o header da nossa tela de perfil de usuário. Agora, vamos dar continuidade a essa tela.

Primeiro, vou importar o componente de perfil. Em seguida, vou utilizar esse componente no header e no content da nossa tela.

No content, vou criar quatro opções: Conta Conectada, Privacidade e Segurança, Configurações e Centro de Serviços. Vou aproveitar o componente que já criamos para o header e o footer.

Agora, vamos detalhar cada uma das opções. No final, teremos a tela de perfil do usuário pronta, com a possibilidade de editar o nome e um icone de seta para navegar para outras páginas.

Aula 3: Finalizando a Tela de Perfil do Usuário

Para finalizar a tela de perfil do usuário, vamos adicionar mais algumas informações e estilizar o layout.

Primeiro, vamos adicionar uma opção de logout. Vou utilizar o mesmo componente que já criamos e apenas ajustar alguns detalhes.

Em seguida, vamos estilizar o layout. Vamos adicionar um ícone de lixeira para a opção de excluir a conta. Vamos também alterar as cores do texto e do ícone para deixar tudo padronizado.

Com esses ajustes, teremos a nossa tela de perfil do usuário pronta. Agora, é possível visualizar as informações, editar o nome e até mesmo excluir a conta.

Conclusão

Com isso, encerramos a aula de hoje. Criamos a tela de perfil do usuário, com todas as opções e funcionalidades necessário. Claro que ainda temos muito a fazer, como as próximas telas de configuração.

Nosso aplicativo está ganhando forma e personalidade. Espero que estejam gostando do curso até agora. Um abraço e até a próxima aula!