Agora que trabalhamos no texto
aqui, agora podemos voltar ao aplicativo. js e livre-se dessa mudança temporária aqui, onde sempre
mostramos
o game over screen, não queremos mais fazer isso. Em vez disso, queremos começar com a
tela inicial normal do jogo novamente e, além dessa mudança, agora também quer fazer um ajuste extra e esse é o botão
do jogo inicial.
Estamos usando o botão normal aqui, o que obviamente é algo que você pode fazer, mas às vezes você também
deseja criar seu próprio botão, deseja ter controle total sobre a aparência do botão e, para isso, é
claro que pode criar o seu próprio botão e é exatamente isso que vamos fazer agora.
Portanto, na pasta de componentes, adicionarei meu próprio botão e você poderá nomear isso
como
quiser, mas pode ser o nome do botão, mas
esse já é o nome do incorporado e, embora você possa, é claro, ainda nomear o seu como isso, para evitar conflitos
de nome ou confusão, vou nomear meu botão aqui botão principal, porque ele será meu principal, meu botão principal, que eu uso para
as grandes ações deste
jogo, como iniciar um novo jogo.
Agora esse é o nome do arquivo, teremos um componente React regular, é claro,
portanto importamos o React.
Importamos uma visualização aqui, certamente precisaremos de algum
texto, certamente precisaremos de uma folha de estilo do React Native assim e,
aqui, temos o componente principal do botão que recebe props e que no final
retornará algum jsx. Teremos nosso objeto de estilos com a Folha de estilo. crie e,
como sempre, exportaremos nosso botão principal.
E agora a pergunta é: como você constrói seu próprio botão?
Agora pode parecer muito complexo fazer isso, mas na verdade não é. Seu próprio botão também é apenas uma combinação
de visualização e texto e muito importante, também um componente palpável, como realce palpável ou opacidade palpável ou feedback
nativo palpável ou até palpável sem feedback se você não
deseja dar um feedback visual. Então, aqui irei com opacidade palpável e
precisamos fornecer feedback ao usuário sobre o fato de o botão ter sido pressionado e registrar um evento onPress
e, além disso, criaremos nosso botão com uma exibição que estilizamos de uma certa maneira
e um texto lá.
Então agora aqui no botão principal, podemos retornar nossa opacidade palpável e, lá, ter uma visão que podemos usar para estilizar o botão
e, aí, talvez um texto para um texto que um botão deva ter.
Agora, digamos que nosso botão deva ser utilizável de modo que passemos um texto diretamente
entre as tags de abertura
e fechamento do nosso componente, portanto, aqui podemos usar props children como
o texto que eu quero mostrar no botão e, então, aqui nesta exibição, eu teremos um estilo de botão digamos estilos, neste texto interno aqui, poderíamos ter um
estilo de texto do botão estilos e esses nomes são com você, é claro e com a opacidade palpável, adicionarei o ouvinte do onPress e
nós vou ter que fazer alguma coisa lá.
Então agora temos o esqueleto para o nosso botão, agora
podemos começar a adicionar alguns estilos a ele.
Agora, é claro que você pode estilizar esse botão da maneira que quiser, tenho um
certo estilo em mente aqui,
que acrescentarei, mas novamente, definitivamente brinque com ele e aplique seus próprios estilos.
Portanto, para o botão em si, que é a visualização em torno do texto, desejo dar ao botão uma certa cor
de fundo e você também pode garantir que isso possa ser definido de fora, é
claro, você pode ser realmente criativo aqui. Eu codificarei uma cor aqui, é claro, usando minhas cores constantes aqui. Então, eu importarei cores de constantes
/ Cores, cores como esta e, em seguida, aqui usaremos cores cor primária, a cor primária talvez, assim.
Portanto, essa é a cor de plano de fundo que esse botão deve ter. Novamente, você também pode garantir
que esse estilo seja definido dinamicamente com a ajuda de algum acessório que você está recebendo
de fora, mas aqui, eu o codificarei aqui.
Além disso, o botão deve ter um preenchimento para que o texto não fique
diretamente nas bordas do contêiner
de botões, assim como na caixa ao redor do texto, mas há algum espaçamento e você pode usar o
mesmo preenchimento em todas as direções mas eu quero usar
um preenchimento vertical de 12, portanto, não tanto preenchimento na parte superior e inferior e um preenchimento horizontal, digamos 30,
muito mais preenchimento para a esquerda e a direita.
Esse é o botão. Agora, para o texto do botão, também há
a cor branca que deve ficar bem em nossa cor principal; você também pode usar
preto porque nossa cor principal é na verdade uma cor em que, como você pode ver, branco e preto
realmente funciona, então você pode usar
qualquer um deles, mas eu vou usar branco aqui para o botão e adicionarei uma família de fontes open sans para
usar essa fonte personalizada também, como você aprendeu, é necessário configurá-lo como todo texto, não há herança, não há fonte
global que você possa configurar, todo texto que deve usar essa fonte precisa obtê-lo e eu adicionarei um
tamanho de fonte digamos 18 para ter um texto maior aqui neste botão . Agora, quando o botão é pressionado, é claro que normalmente
não quero lidar com esse evento de pressionamento dentro do botão, mas dentro
do componente em que o usamos.
Então, eu simplesmente quero encaminhá-lo e,
para isso, podemos simplesmente esperar obter uma referência de função, uma função de manipulador de eventos no suporte digamos
onPress do nosso botão personalizado, mas você pode nomear
qualquer objeto, você pode nomear onClick, porque em no final, é você quem usa seu próprio
botão e
aí você só precisa passar uma referência de função de ajuste, um ponteiro de ajuste em uma função
de manipulador de eventos para o onPress ou o nome que ele indicar em seu próprio botão.
Então esse nome
é com você, agora vamos usar o botão principal e
usá-lo na tela inicial do jogo. Lá podemos simplesmente importá-lo,
então importe o botão principal de components / MainButton e este botão principal agora é usado aqui para iniciar um novo
jogo.
Então, substituirei o botão aqui pelo botão principal,
mas lembre-se de que, nesse botão, configurei o conteúdo, o texto a ser mostrado para que ele seja realmente o
conteúdo que é passado entre as tags de abertura e fechamento do nosso botão e, portanto, de volta na tela inicial do jogo,
o título aqui
não é mais passado em um suporte de título, mas agora temos uma tag de abertura e fechamento
para o nosso próprio botão e adicionamos o jogo inicial lá.
Agora, o onPress ainda é um suporte que deixamos aqui, porque no botão principal, encaminhar o evento onPress, por
assim dizer, para a função que recebo por conta própria o suporte onPress
aqui, portanto, temos que definir o suporte onPress por nosso próprio botão e, portanto, com isso, devemos ter um bom
botão principal aqui, um bom botão quando iniciarmos um novo jogo.
Vamos tentar isso aqui,
é assim que parece e parece muito bom na minha opinião, um bom botão.
Ainda não terminei,
quero ter cantos arredondados nesse botão e, para isso, de volta ao
arquivo do botão principal, é claro que podemos simplesmente ir a essa propriedade de botão aqui
na folha de estilo, que é o objeto de estilo aplicado ao nosso view e lá, podemos adicionar um raio de borda de 25
e, se fizermos isso, você verá que se eu pegar esse botão agora, ele ficará com uma boa aparência aqui.
Deixe você também mostrá-lo no Android, agora tem cantos arredondados e tem esse belo efeito de opacidade ao tocá-lo e,
a
propósito, como já mencionado anteriormente, você pode alterar esse efeito de opacidade acessando o componente de opacidade
selecionável e, aí, você pode defina a opacidade ativa para o nível de opacidade que você deseja ter quando pressionado;
por exemplo, se
você usar um valor bastante alto aqui, esse efeito será menos forte, agora é apenas
ligeiramente transparente quando tocamos nela e não tão transparente quanto antes. Mas isso é totalmente com você o que
você
quer aqui, eu irei. 6 aqui para ter um efeito um
pouco mais forte, mas novamente isso é algo que você pode configurar e, em geral, minha sugestão é que você brinque com isso e
veja como pode estilizar esse botão, como você pode realmente ajustá-lo de acordo com seus requisitos. Agora, com o botão personalizado adicionado, também quero
usá-lo na tela do
game over, então
também importarei o botão principal dos componentes / MainButton como este e, em seguida, simplesmente adicionarei o botão
principal aqui quando mostrarmos o novo botão do jogo lá em baixo.
Em vez disso, use o botão principal e, portanto, remova o suporte do título, pois não
é assim que estamos definindo o título
em nosso próprio botão personalizado. Em vez disso, temos que passá-lo aqui entre as tags de abertura e fechamento das nossas tags de componentes personalizados.
Portanto, agora aqui, isso também deve parecer melhor se terminarmos rapidamente um jogo aqui, tentando deixar o computador adivinhar 33, aqui
estamos nós e
agora vemos o bom botão aqui também.
Também vemos a saída correta aqui em relação ao número de rodadas
necessárias e
ao número que tínhamos que adivinhar e podemos iniciar um novo jogo a partir de então e
também passar por isso de novo muito rápido, sim, tudo isso parece muito bom.
O que ainda quero fazer agora é trabalhar nesses dois botões, inferior e superior.
Eles parecem um pouco
chatos, eu diria, certamente podemos fazê-los parecer mais emocionantes. Agora, uma maneira de fazê-los parecer um pouco mais empolgantes
é que também usamos nosso botão personalizado.
Então, é claro, aqui na tela do jogo, também podemos importar o botão principal de components / MainButton, portanto, nosso próprio
botão personalizado e usá-lo em vez do botão que estamos usando no momento,
que é embutido. Então use
nosso próprio botão aqui, portanto, é claro, mova o título entre as tags de
abertura e fechamento, então aqui é mais baixo e depois aqui para o segundo botão, que é
maior e agora isso deve parecer um pouco melhor se iniciarmos um novo jogo aqui .
Agora usamos nossos botões personalizados aqui, mas agora também vemos um problema,
simplesmente são grandes demais, estão muito próximos um do outro, podemos mudar isso,
no entanto, descendo para o contêiner de botões e dando um pouco disso mais largura, talvez
defina a largura máxima para 90% aqui, na verdade.
Então, agora, se tentarmos novamente, sim, isso parece um pouco melhor, há pelo menos algum espaçamento entre os botões e,
por enquanto, isso funcionará porque, por enquanto, não estamos otimizando para todos os tamanhos de tela.
Vamos também aumentar essa largura aqui para 400, para que tenhamos largura suficiente, na
verdade usamos 400 pixels e agora isso fica bom aqui no iOS e
também no Android. Agora isso parece um pouco
melhor, como mencionei, mas não seria bom se tivéssemos ícones lá, em vez de texto, porque o texto obviamente funciona, mas um ícone
também pode ser útil e não
usamos ícones até agora você geralmente precisa deles em aplicativos móveis. Definitivamente, é algo que você também deve estar
ciente, como trabalhar com ícones, como adicionar ícones dentro do seu aplicativo e é, portanto,
o que faremos a seguir.