É claro que depende de você como você deseja estilizar esse texto de confirmação aqui ou, na verdade,
não deve ser apenas texto, deve ser uma visualização com o texto que gera nosso número e, em seguida, um botão para
iniciar o jogo e você pode definitivamente fazer uma pausa o vídeo neste momento e crie seu próprio estilo,
seu próprio layout.
Eu tenho um certo layout em mente que certamente será diferente do seu, mas
não há decisão certa ou errada aqui, então definitivamente tome isso como outra chance de criar
seu próprio layout para isso e um botão que agora não faz nada mas é
aí que permite ao usuário iniciar o jogo e, após uma breve pausa que você pode usar para
pausar o vídeo, implementarei minha solução junto com você.
Então, aqui está como eu acho que isso ficaria bom.
Quero ter uma visualização para poder configurar um contêiner geral em torno dela ou, na verdade, talvez não uma visualização,
mas por que não usamos nosso cartão
aqui? Parece uma boa idéia.
Agora esse cartão, se dermos uma olhada nele, não tem margem e quero ter um espaçamento entre esse
cartão na parte superior e o meu cartão de resumo.
Portanto, aqui, darei um estilo separado aqui na minha folha de estilo, na tela inicial do
jogo, vou nomear esse contêiner de resumo, o nome como sempre depende de
você e quero ter uma margem para o topo digamos 20, algum espaçamento agradável aqui e adicione-o através do suporte de estilo ao cartão aqui e ali, quero dizer que
você selecionou e, em uma nova linha, imprima o número de uma maneira bem apresentada, talvez o número na forma
de um caixa com uma borda separada com cantos arredondados para que fique claramente
visível ou também maior que o outro texto e, portanto, aqui,
adicionarei uma exibição com um texto lá e nesse texto, terei o número selecionado, mas agora
que a visualização e o texto devem ter um estilo especial e, como pretendo
reutilizá-lo, vou buscá-lo
e terceirizá-lo em um novo componente, e o nome de contêiner numérico. Neste componente, importarei o React do React e importarei a visualização e o texto do React Native e,
em seguida, terei o componente de contêiner de número aqui, exportarei o contêiner de número padrão e, claro, também precisaremos de uma folha de estilo aqui, então vamos
configurar uma folha de estilo bem como com a folha de estilo. criar lá em baixo e, em seguida, neste componente,
retornarei essa coisa de visualização aqui com o número selecionado que agora deve ser repassado e espero
que ele entre as tags de abertura e fechamento do meu próprio componente com
a ajuda de adereços crianças.
Agora, é claro que esse contêiner é algo que você
pode configurar livremente; adicionarei apenas um estilo de contêiner, nome do contêiner aqui onde acho que uma largura de borda de dois pode
parecer boa, portanto, um pouco mais de uma borda mais ampla. Uma cor de borda onde eu realmente quero usar minha cor principal ou
minha cor de destaque, veremos qual parece melhor.
Então, vamos importar cores de constantes / Cores e para a cor da borda, depois usar cores acentuadas por enquanto
e ver como isso se parece. Algum preenchimento para que o número não
fique diretamente nas bordas da caixa
ao redor, não fique diretamente ao lado da borda, um raio de borda 10 para ter algumas bordas
arredondadas,
alguns cantos arredondados, com licença, a propósito, se você preferir deseja segmentar cantos individuais, você pode
fazer isso com o raio superior esquerdo da borda, o raio superior direito, a extremidade superior e o início superior também leva em consideração
as configurações do usuário, se é um idioma da esquerda para a direita ou da direita para
a esquerda, para que você possa segmentar todos os cantos também ou defina um raio para todos os cantos com raio
da borda e também adicione uma pequena margem aqui, margem vertical de 10, talvez para ter algum espaçamento na parte superior
e inferior do contêiner aqui e também importante, centralize o texto lá alinhar o centro do item e justificar
o centro do conteúdo, aproveitando esse comportamento da caixa flexível. E com isso, eu também quero dar o número em si, então o texto tem
um certo estilo e esse estilo é que eu dou ao texto também essa cor de destaque e quero usar um tamanho de fonte 22 para ter que realmente
se destacar e mais tarde , também usaremos uma fonte personalizada. E então essa visão aqui obtém o estilo
do contêiner e o texto aqui, é claro, recebe o estilo numérico. Com essa configuração, podemos usar o contêiner de números na
tela inicial do jogo; portanto, simplesmente adicionamos essa importação e o que estamos fazendo aqui
é bastante normal, pois você tem vários componentes dos quais compõe seu aplicativo.
Portanto, agora podemos usar o contêiner de número no componente da tela inicial do jogo, adicioná-lo aqui abaixo deste texto
e no contêiner de número, obtemos o conteúdo aqui com props children, produzimos com props children, o que significa
que temos que passá-lo entre as tags de
abertura e fechamento, então aqui encaminhamos o número selecionado.
Agora, essa é apenas minha sugestão de como podemos estilizar isso, mas eu gosto
do estilo e, por enquanto, adicionarei um botão aqui, que é uma marca de fechamento automático, o botão interno com
um título de jogo inicial, tudo tampas para fazer com que ele realmente se destaque e salve isso e agora, se escolhermos um número aqui, é isso
que obtemos e não parece muito feio, eu diria. Ainda assim, há duas coisas que eu
quero mudar: esse texto aqui deve ser centralizado e esta caixa com o número não deve
ser tão larga quanto a caixa ao redor, mas deve ser apenas a largura que o número precisar.
Agora, para fazer os dois funcionarem, irei ao meu cartão que contém todo o conteúdo aqui e, com isso,
quero dizer que vou ao estilo na tela inicial
do jogo que
também uso nesse cartão, esse é o meu contêiner de resumo e lá estamos. pode alinhar os itens lá para serem centralizados, em vez de
usar o padrão que seria esticado e agora isso é automaticamente centralizado e a caixa é apenas
a largura que o número exigir.
Agora que não parece muito surrado, uma
última coisa que notei também é que, quando confirmamos uma entrada, também quero usar a API
do teclado para descartar o teclado, para que, assim que pressionarmos confirmar aqui, também fechemos o teclado e agora
temos uma boa saída aqui.
Agora, com isso, temos uma aparência de base sólida, eu diria, podemos escolher
um número, estamos fazendo uma validação aproximada para garantir que tenhamos um número válido e o próximo passo é fazer
com que esse botão de início do jogo funcione e trocamos o que vemos na tela aqui pela tela em que
o jogo está sendo executado, onde o computador está fazendo palpites e garantimos ao usuário a chance de dizer
se os números devem ser maiores ou menores e
então em algum momento ponto finalizado e mostra um game over screen.