Por isso, gastamos muito tempo nessa primeira tela, mas, obviamente, por um bom motivo,
este curso é sobre aprender o React Native, afinal, e você aprendeu muito sobre layout, estilo, conexão de componentes,
uso de múltiplos componentes e configuração de componentes internos e essa é uma parte essencial do
React Native e o que permite criar aplicativos reais no final. No entanto, agora é hora de continuar trabalhando neste aplicativo
e, antes de nos aprofundarmos em outras coisas que
poderíamos estilizar, o que farei mais tarde, quero ter certeza de que esse
botão iniciar jogo funcione, porque agora estamos sempre presos a isso iniciar a tela
do jogo, mas agora, adicionarei um segundo componente à pasta de telas, a própria tela do jogo, portanto, a tela,
o conteúdo que quero mostrar na tela quando o jogo estiver em execução e essa é a tela responsável
por mostrando o palpite do computador e permitindo que o usuário diga ao computador se isso está
certo ou errado, se o valor deve ser menor ou maior, então
esse é o objetivo aqui.
Agora, como mencionei antes, é um componente regular, portanto, precisamos
importar o React com certeza e também importaremos algumas coisas do React Native, o mais importante, é claro, a
visualização e o texto, você nunca pode errar com isso, também a folha de estilo, é
claro, você normalmente sempre precisa delas.
Então aqui, podemos adicionar o componente funcional da tela do jogo, criar o objeto
de estilos aqui usando a Folha de estilo. crie assim e, no final, exporte nossa tela do jogo aqui como padrão e
livre-se disso mais aqui no topo.
Então agora temos o componente da tela do jogo definido aqui e
agora vamos fazer uma breve pausa e pensar no que precisa acontecer aqui.
Agora, no final, o que precisa acontecer é que o computador precisa adivinhar e
precisa adivinhar
inicialmente quando essa tela é carregada pela primeira vez, mas também sempre que o usuário pressionar o botão este é muito
baixo
ou muito alto, portanto, sempre
que o usuário der uma dica sobre se esse palpite é, em qual direção do número real
esse palpite é, por assim dizer, sempre que isso acontecer, queremos gerar um novo palpite.
Agora, o palpite em si deve ser um número aleatório e, portanto, começarei criando uma nova função fora do meu
componente funcional agora,
porque ele não usará nenhum dado de lá, portanto, não deve ser recriado a cada re-renderização dos
componentes simplesmente para economizar algum desempenho,
se você não confiar em adereços ou estado, também poderá simplesmente ter uma função que reside
fora do seu componente, e eu o nomeei gerar
aleatoriamente entre, porque é
isso que essa função fará.
É uma função, gera um número aleatório entre um mínimo e um máximo e
também permite excluir
determinados números, por exemplo, o primeiro número que geramos deve excluir a solução para que o dispositivo, o
aplicativo nunca possa adivinhar a escolha do usuário na primeira tentativa.
Agora aqui, o mínimo será normalizado para Math. mínimo mínimo, de modo a basicamente
ter um número inteiro aqui se um não inteiro for inserido e arredondá-lo para cima e max será colocado no chão
para fazer o mesmo, mas arredondado para baixo. Então eu terei meu número aleatório que eu gero com Math. aleatória e matemática.
random nos fornece um número aleatório entre 0 e 1; portanto, para ter um número entre min e max, precisamos multiplicá-lo por max -
min e também no final; adicione min aqui aqui, mas também certifique-se de chamar Math. aqui no resultado de toda essa operação e isso fornecerá um
número aleatório entre esse mínimo e o máximo.
Agora, com
isso gerado, quero verificar se o número aleatório é igual ao número que queremos excluir, o
que, é claro, seria uma coincidência muito rara, mas pode acontecer; nesse caso, retornarei o resultado de outra geração aleatória
entre chamada onde eu simplesmente encaminho min, max e excluo o que obtivemos,
então simplesmente repetirei gerar aleatoriamente entre e retornará o valor dessa execução repetida, se conseguirmos o
valor excluído novamente, repetiremos mais uma vez; chegamos lá e, se
não tivermos o número excluído, que deve ser o caso na maioria dos casos,
retornarei o número aleatório imediatamente.
Portanto, essa é agora uma função que nos gera um número aleatório.
Agora, aqui na tela do jogo, eu quero gerenciar algum estado, então importarei o gancho useState do React e inicializarei algum estado aqui com o número
aleatório, porque o estado que quero gerenciar aqui é o palpite do computador,
o atual palpite e que também precisa de
uma função de palpite atual definida, para que possamos mudar isso sempre que o usuário der
uma nova dica.
Então, aqui, podemos chamar gerar aleatório entre para gerar um estado inicial que será salvo e isso será
considerado apenas como um estado inicial;
portanto, quando esse componente for reconstruído e, portanto, usar o estado for chamado novamente, geraremos
outro número aleatório novamente, mas isso não substituirá esse estado porque, uma vez que o estado seja
definido inicialmente, ele não será substituído novamente adicionando valor derivado aqui.
Isso só será considerado pelo React se ainda não tivermos um estado inicial; depois disso, esse estado inicial
ou atualizado será gerenciado desconectado do componente e não será substituído novamente por esta chamada aqui.
Inicialmente, porém, precisamos fazer essa ligação, queremos obter um número aleatório entre 1 e 100,
100 é excluído com a lógica que
escrevemos lá em cima, portanto, será um número entre 1 e 99, 99
incluído e quero excluir a escolha do usuário.
Espero colocar isso nos meus props aqui, para que
a escolha do usuário possa ser um nome de props que usamos aqui e esse é o valor que desejo executar,
porque essa
é a solução no final e não poderemos adivinhar a solução imediatamente, isso
seria um pouco injusto.