Agora temos a aparência do cartão, agora, como próxima coisa, vamos consertar os botões e isso é algo que eu já
mostrei, então definitivamente sua chance de pausar o vídeo e fazê-lo por conta própria.
Quero ter certeza de que os botões tenham o mesmo tamanho, eles não devem ter a largura
total disponível, mas devem ter um tamanho igual, o que garante que o texto caiba lá e que tenham o
mesmo tamanho.
Então, sua chance de pausar o vídeo, depois faremos isso juntos. Você teve sucesso?
Vamos garantir que os botões tenham o mesmo tamanho e, para isso, na tela inicial do jogo, onde eu tenho os
botões, você aprendeu que a solução é envolver os botões em uma exibição. Então você deve adicionar seu próprio componente de exibição ao
redor dos botões e
agora pode atribuir um estilo a esses botões; portanto, para ambos os botões aqui, usarei um objeto de botão no meu
objeto de estilos lá em baixo, então
vamos adicionar um botão aqui e simplesmente dê uma largura e aqui, uma largura que eu escolho é, digamos 80.
Vamos ver como é isso, se eu salvar, um pouco pequeno demais, pois há uma quebra de linha
nesse botão.
Então vamos com 120, agora isso certamente é demais, então que tal
cerca de 100 e isso me parece muito legal.
Agora, além disso, e isso não foi uma tarefa para o usuário,
não se preocupe se você não fez isso. Quero alterar as cores deles e uma delas
deve ser a nossa principal e também quero acentuar alguns cores secundárias, por assim dizer, que podemos usar.
Portanto, para o componente de tela inicial do jogo, no próprio botão, há um suporte de cores que você pode
definir para controlar a cor
e, para Android, essa é a cor de fundo, para iOS, que será a cor do texto e
agora a redefinição. botão, aí eu quero configurar uma cor de # 717fc, acho que é uma
cor legal e para o botão
principal, o botão de confirmação, vou usar meu tema principal e quero usar a mesma cor que uso no
cabeçalho .
Então, aqui eu tenho esse código hexadecimal usado como cor de plano de
fundo, agora usarei a mesma cor para este segundo botão. Com isso, podemos salvar isso e agora temos
essas duas cores de botão aqui, que parecem bastante agradáveis na minha opinião.
Agora, uma desvantagem dessa abordagem ou uma coisa que podemos melhorar é que eu estou usando esse código hexadecimal aqui, estou usando-o
no cabeçalho e as chances são de que mais tarde no aplicativo
também queremos usar a mesma cor em outros lugares .
Portanto, seria bom se pudéssemos configurar isso como um tipo de tema
que você poderia dizer, que poderíamos usar essas cores facilmente sem copiar códigos hexadecimais em nosso aplicativo e que também poderemos
mudar a cor em um só lugar, se quisermos use uma cor diferente e não
precisamos fazer isso em dezenas de componentes.
E, para isso, usarei uma abordagem em que adicionarei uma nova pasta no nível raiz e nomeará constantes
e, como sempre, você poderá nomear essas pastas como desejar e
aí eu quero ter cores. arquivo js. Novamente, esse nome também pode
ser nomeado como você quiser, porque o que esse arquivo fará é exportar um objeto Javascript padrão, exportar um objeto Javascript
e, aí, você pode ter qualquer par de valores-chave que desejar e eu definirei uma cor primária, então apenas primária como nome
da chave e esse código hexadecimal que eu acabei de copiar, para que a cor do cabeçalho
também seja acentuada ou secundária, seja qual for o nome, eu irei
com a cor de destaque e isso deve seja essa outra cor que eu usei
no primeiro botão, então esse código hexadecimal aqui, eu vou usar isso aqui.
Agora, essas cores são definidas aqui e agora podemos simplesmente importá-las deste arquivo e, sempre que as alterarmos
aqui, elas serão alteradas em qualquer lugar deste aplicativo e, portanto, podemos trocá-las facilmente durante o desenvolvimento.
Agora, na tela inicial do jogo, podemos simplesmente importar cores de constantes / cores como essa e eu dei a C maiúsculo aqui
para indicar que essa é uma coleção de valores, você pode nomear o que quiser, você também pode usar
um c
minúsculo, que a nomeação não importa e agora você
pode usar cores aqui para atribuir suas cores.
Portanto, neste botão de redefinição, agora usaremos um valor dinâmico para que possamos alcançar as cores. sotaque e aqui para o botão principal, para
o botão confirmar, eu vou com cores. primário e o mesmo
no cabeçalho. É claro que agora também queremos usar essa
cor e não codificá-la aqui; em vez disso, importe cores de constantes / Cores e, com isso importado, você também
pode usá-lo em uma folha de estilo, não apenas em jsx, mas em qualquer lugar
afinal, nesse arquivo, agora
aqui, vou me referir a cores. primário. E se você salvar isso, novamente
teremos a mesma aparência de antes, mas novamente de outra maneira mais elegante. Se você decidir que sua cor de destaque não deve ser
dessa cor, mas deve ser azul, basta trocá-la aqui, seu aplicativo é reconstruído e você tem um botão azul.
Portanto, essa é a enorme vantagem de gerenciar suas cores ou outras constantes principais nesses arquivos, você pode ter
outro arquivo chamado texto, por exemplo, onde você tem alguns tamanhos de fonte principais ou outro espaçamento entre arquivos, onde armazena valores padrão para
margens ou preenchimento para que você não é necessário usar manualmente os mesmos valores repetidamente, essas são
todas as abordagens
que você pode usar para facilitar sua vida como desenvolvedor e ter um código
no qual você pode trocar valores rapidamente, se necessário.
Por enquanto, apenas gerenciarei minhas cores, porque essa é uma das coisas mais irritantes
de se copiar e é uma ótima abordagem, portanto, gerenciá-la nesse arquivo.