Então, com isso, vamos começar com nosso aplicativo aqui e existem várias maneiras de começar, é claro.
Quero
começar largando esse estilo de contêiner aqui na minha tela inicial e, em vez disso, quero me livrar do texto
e tudo aqui e quero começar adicionando meu próprio cabeçalho, portanto, esta
barra na parte superior da tela.
Agora, podemos criar essa barra por conta própria aqui, deixe-me livrar dessa importação da qual não
precisamos e eu a construírei não dentro deste componente do aplicativo, mas em
um arquivo de componente separado, em um componente personalizado separado porque e isso já é uma coisa
super importante,
como no React para aplicativos da web, é uma boa prática dividir seu aplicativo em vários componentes que você compõe,
pois isso leva a um código mais gerenciável e reutilizável.
Então, eu adicionarei uma nova pasta, componentes, o nome é com você, você pode nomear essa pasta como quiser
e lá eu quero ter um cabeçalho. arquivo js para conter o componente do cabeçalho.
Lá, precisamos importar o React do React para que possamos usar o React
lá e escrever o código jsx. Também precisaremos de alguns componentes do React Native, porque você nunca deve esquecer que esses são
os únicos componentes principais que você pode usar no fim.
Você não pode usar nenhum elemento HTML da Web ou algo assim,
você precisa dessas primitivas principais que o React Native fornece.
Definitivamente, precisaremos de uma visualização aqui e também um componente de texto e também um componente da folha de estilo
e, agora, com isso, podemos começar a criar nosso cabeçalho.
Portanto, para isso, adicionarei uma constante de cabeçalho que contém meu componente funcional, porque trabalharei apenas com componentes funcionais neste
curso, usaremos ganchos em locais onde precisamos gerenciar efeitos colaterais ou de estado e, aqui, vamos
é claro que exporte esse componente no final e também configure um objeto de estilos com a folha
de estilos criada para que possamos estilizar isso no final.
Agora vamos criar nosso componente aqui, vamos retornar algo
aqui e o que eu quero
retornar é no final uma visualização com o texto dentro dele e o texto deve ser
o nosso título.
Portanto, portanto, entre a tag de abertura e fechamento aqui, apresentarei o título de adereços para que nosso
próprio componente possa receber o título e propôs-o aqui. E a vista em torno do texto será usada para posicionar
o texto e para dar algum estilo a ele, portanto, para estilizar nosso cabeçalho, porque os elementos de texto por si
só também têm estilo, mas não na mesma extensão que as visualizações, as visualizações são realmente um pouco mais flexível em relação
aos estilos que você pode atribuir e em como eles se comportam e, portanto, você
sempre deseja usar uma visualização para um contêiner circundante e para esse estilo geral que seu componente possa ter ou
que partes do seu componente possam ter.
Então, aqui, adicionarei o estilo prop e atribuirei um estilo ao meu objeto styles, um estilo que ainda não criamos lá, mas
o nomeio de cabeçalho e também darei ao texto um estilo prop e aponte para denomine o título do cabeçalho ou o nome que você quiser, porque,
como eu disse, você também pode estilizar o texto e aqui quero ter alguns estilos específicos
depois, para garantir que o texto tenha uma boa aparência. Então agora aqui na folha de estilo, podemos começar a
estilizar nosso cabeçalho e começarei com o próprio cabeçalho, adicionando um cabeçalho prop e, em seguida, esse objeto manterá essas
definições de estilo para o cabeçalho, portanto, para este componente de exibição aqui e ali de Claro,
você é livre para experimentar o que quiser. Eu irei com uma largura de 100%, para que
seja preciso a largura total do dispositivo que pudermos obter ou a largura total do componente pai, para ser mais preciso,
mas vou adicioná-lo para que o componente pai tenha a largura total do dispositivo e, portanto, ,
isso também terá a largura total do dispositivo no final. Atribua uma altura e lá, você pode experimentar
com valores diferentes, achei 90 parecendo bastante decente e, portanto, vou com isso.
Nota: por enquanto, otimizarei essas telas que tenho aqui, no próximo módulo do curso, abordaremos
como você pode ajustar suas visualizações e seu código para diferentes dispositivos, tanto em relação ao tamanho
quanto à plataforma seu código está sendo executado. Por enquanto, não teremos nenhuma diferenciação por lá,
ajustaremos também em nosso aplicativo para ficar bem nesses dois emuladores, mas, novamente, abordarei isso mais tarde.
Então, altura de 90, um preenchimento na parte superior de 36 para ter algum espaçamento para o topo e
eu preciso adicioná-lo para lidar basicamente com coisas como a barra de status aqui ou esse
entalhe aqui, portanto, eu adiciono esta parte superior e também quero para adicionar uma cor de
fundo aqui e agora você está totalmente livre para
escolher a cor que quiser, preparei uma cor agradável, um código hexadecimal de uma cor que eu pessoalmente gosto e
que é # f7287b, que é uma cor bastante agradável na minha opinião como você verá em um segundo.
Agora também quero centralizar o título e, portanto, usarei alinhar itens e justifyContent, porque
cada visualização por padrão usa flexbox e, portanto, com alinhar itens e justifyContent, podemos
controlar como os elementos filhos da visualização são posicionados dentro da visualização e com o
centro para
alinhar itens e o justifyContent também definido como central, centralizamos todos os filhos ou elementos filhos dentro da
vista no centro, horizontal e verticalmente.
Agora, para o título
do cabeçalho, também quero configurar alguns estilos para isso.
Então, o título do cabeçalho aqui, que deve ter uma cor preta, porque se encaixa nessa cor aqui e para que possamos ler o
texto e eu quero definir o tamanho da fonte como 18, digamos, para que possamos
corrigir isso um pouco tamanho da fonte maior aqui. Com isso, vamos tentar usar esse cabeçalho
e usá-lo no aplicativo. arquivo js aqui. Lá, temos essa visão
e essa visão não tem estilo anexado.
Vou mudar isso e configurar uma tela aqui e atribuir a este um flex de um atributo.
Agora, podemos atribuir isso aqui e o flex one garantirá que essa visualização ocupe todo o espaço
possível e, como é a visualização raiz do nosso aplicativo, isso significa que ela terá
toda a largura e altura que puder obter, ocupará todo o espaço screen e, portanto, como meu cabeçalho ocupa largura
100%, já que o adicionarei diretamente dentro desta visualização, que agora está configurada para ter largura e altura completas,
esse cabeçalho também terá largura total.
Então agora só precisamos adicionar o cabeçalho aqui,
é claro, então importe o cabeçalho de. / components / header, você pode
omitir a extensão do arquivo e simplesmente adicionar o cabeçalho como uma tag de fechamento automático aqui, mas não se esqueça de definir um suporte
de título porque lembre-se de que estamos produzindo o suporte de título aqui entre as tags de
texto, para que pode adicionar um título aqui, e eu o nomeei, acho que é um número, porque é disso que se trata o nosso jogo.
Agora, se salvarmos isso, ele deverá ser reconstruído automaticamente e você deverá ver um cabeçalho parecido com este no iPhone e assim aqui no
Android, e eu diria que não há problema em ambos os dispositivos. Mais uma vez, exploraremos mais tarde maneiras de
como você pode ajustar a aparência do dispositivo específico em que seu aplicativo está sendo executado.