Portanto, agora que temos um cabeçalho,
podemos continuar e continuar com a parte em que os usuários podem inserir um número que o
computador deve adivinhar posteriormente. E por isso aqui no aplicativo. arquivo js, abaixo do cabeçalho,
é claro que quero ter a área de entrada do usuário. Agora, como antes, tratarei disso em
um componente separado e não aqui no aplicativo. js para manter todos os componentes relativamente enxutos e poderíamos
criar esse componente aqui na pasta components, isso não seria errado, mas como agora
vou trabalhar em um componente que é essencialmente responsável por tudo o que vemos na tela além do cabeçalho, trato esse
componente como uma espécie de componente especial, vou chamá-lo de tela e armazená-lo em uma pasta
de telas, porque o jogo final terá essencialmente três telas diferentes - uma para configurar
e iniciar o jogo, uma quando o jogo for executando e um quando o
jogo terminar e eu quero ter esses componentes especiais que, tecnicamente, são componentes totalmente normais, mas que atendem
a um propósito especial, quero armazená-los em uma pasta separada e essa é apenas minha decisão pessoal
de design aqui, você não precisa armazená-los. Tecnicamente, não há razão para fazê-lo ou não, o React
Native simplesmente não se importa.
Então, aqui, eu vou armazená-lo lá e chamar o nome de StartGameScreen. js para também deixar bem claro no
nome que este é um componente especial para mim, mas como eu disse, tecnicamente é um componente normal
e, portanto, importamos o React do React e também importamos algumas coisas do React Native, é claro, e nós
já podemos dizer que certamente precisaremos de uma visualização porque você provavelmente não pode criar nenhum componente,
mas você pode mas não muitos componentes que você pode criar sem visualizações.
Portanto, importaremos a visualização aqui e, definitivamente, também precisaremos de uma folha de estilo para obter alguns estilos e veremos o
que mais precisamos, certamente também precisaremos de um texto, acho, para que possamos adicionar isso. Agora, com isso, vou criar uma nova constante
aqui, iniciar a tela do jogo que é um componente funcional parecido com este,
onde teremos um objeto de estilos com o Stylesheet. crie assim e onde exporto a tela inicial do jogo assim e você
poderá salvá-lo como um modelo para qualquer novo componente que você adicionar, porque 90% dos componentes personalizados que você cria no React Native
se parecem assim, basicamente, você importa o React, você importa algumas coisas do React Native, define
seu componente, o nome difere, é claro, você tem seus objetos de estilos e os exporta, é quase sempre
o mesmo para
que você possa salvá-los como modelo, se quiser. Eu não quero aqui, então, continuarei trabalhando
no componente em si e a pergunta agora é: o que renderizamos nessa
tela inicial do jogo? Como deve ser? No final, terei
uma visão geral da tela inteira, porque acho que isso faz sentido,
nos permite configurar um estilo geral. Vou adicionar novamente uma propriedade de tela aqui a este objeto da folha de estilo que eu
posso fazer, que não entrará em conflito com o aplicativo. js, também poderíamos ter
escolhido nomes diferentes, esses dois simplesmente não estão relacionados porque, no final, são
objetos Javascript independentes gerenciados em arquivos independentes. Para que possamos repetir nomes aqui ou escolher nomes diferentes, vou usar um
nome semelhante aqui, nomear essa tela e definir um estilo geral para essa vista circundante aqui. O estilo geral é que eu disse isso para
flexionar um, para que ocupe todo o espaço possível, o que significa que, como o adicionarei abaixo do cabeçalho,
ele ocupará todo o espaço abaixo do cabeçalho, tanto na vertical quanto na horizontal
e além disso. , Também quero adicionar um preenchimento aqui de 10 para que o conteúdo não fique diretamente
nas bordas da tela, mas haja algum espaçamento para a esquerda, direita, superior e inferior e adicionarei
o alinhamento dos itens ao centro.
Lembre-se de que todas as visualizações, por padrão, usam flexbox e, por padrão, a coluna de direção flexível,
alinham os itens e posiciona os itens ao longo do eixo transversal.
Portanto, como a direção padrão é a coluna, o eixo transversal é da
esquerda para a direita,
portanto é um eixo horizontal, portanto, isso alinhará os itens no centro horizontalmente, mas não verticalmente.
Lá, usamos o padrão justifyContent flex start, mas como eu
uso o padrão, não preciso defini-lo. Então, vamos deixá-lo como está aqui e agora atribuir esse estilo aqui a essa visualização e o autoformatting fechou minha
tag aqui, o que é claro que eu não quero fazer, então
deixe-me reverter isso e
agora temos essa visualização para o nosso tela do jogo. Agora, para ver se funciona,
mostrarei aqui algum texto, a tela
do jogo, apenas um espaço reservado falso. Reformate isso e agora no aplicativo. js, vamos
usar essa tela importando a tela inicial dos jogos da pasta screens e
lá, inicie a tela do jogo
e, em seguida, simplesmente adicione-a aqui, assim. Se salvarmos isso, vemos a tela do jogo aqui e também no Android, então isso
funciona.
Estamos usando esse segundo componente separado, que usaremos agora como um componente de tela cheia basicamente ou quase em tela
cheia, a
parte abaixo do cabeçalho no final.