1 00:00:02,200 --> 00:00:06,380 Por isso, gastamos muito tempo nessa primeira tela, mas, obviamente, por um bom motivo, 2 00:00:06,400 --> 00:00:11,950 este curso é sobre aprender o React Native, afinal, e você aprendeu muito sobre layout, estilo, conexão de componentes, 3 00:00:11,980 --> 00:00:16,810 uso de múltiplos componentes e configuração de componentes internos e essa é uma parte essencial do 4 00:00:16,810 --> 00:00:23,920 React Native e o que permite criar aplicativos reais no final. No entanto, agora é hora de continuar trabalhando neste aplicativo 5 00:00:23,920 --> 00:00:26,840 e, antes de nos aprofundarmos em outras coisas que 6 00:00:27,190 --> 00:00:31,630 poderíamos estilizar, o que farei mais tarde, quero ter certeza de que esse 7 00:00:31,840 --> 00:00:36,640 botão iniciar jogo funcione, porque agora estamos sempre presos a isso iniciar a tela 8 00:00:36,640 --> 00:00:43,030 do jogo, mas agora, adicionarei um segundo componente à pasta de telas, a própria tela do jogo, portanto, a tela, 9 00:00:43,210 --> 00:00:49,390 o conteúdo que quero mostrar na tela quando o jogo estiver em execução e essa é a tela responsável 10 00:00:49,390 --> 00:00:54,940 por mostrando o palpite do computador e permitindo que o usuário diga ao computador se isso está 11 00:00:54,940 --> 00:00:58,780 certo ou errado, se o valor deve ser menor ou maior, então 12 00:00:58,930 --> 00:01:01,070 esse é o objetivo aqui. 13 00:01:01,120 --> 00:01:04,660 Agora, como mencionei antes, é um componente regular, portanto, precisamos 14 00:01:04,660 --> 00:01:11,620 importar o React com certeza e também importaremos algumas coisas do React Native, o mais importante, é claro, a 15 00:01:12,010 --> 00:01:17,640 visualização e o texto, você nunca pode errar com isso, também a folha de estilo, é 16 00:01:17,650 --> 00:01:20,260 claro, você normalmente sempre precisa delas. 17 00:01:20,590 --> 00:01:28,150 Então aqui, podemos adicionar o componente funcional da tela do jogo, criar o objeto 18 00:01:28,150 --> 00:01:38,310 de estilos aqui usando a Folha de estilo. crie assim e, no final, exporte nossa tela do jogo aqui como padrão e 19 00:01:38,310 --> 00:01:40,790 livre-se disso mais aqui no topo. 20 00:01:40,800 --> 00:01:45,340 Então agora temos o componente da tela do jogo definido aqui e 21 00:01:45,370 --> 00:01:49,980 agora vamos fazer uma breve pausa e pensar no que precisa acontecer aqui. 22 00:01:50,190 --> 00:01:55,620 Agora, no final, o que precisa acontecer é que o computador precisa adivinhar e 23 00:01:55,620 --> 00:01:56,460 precisa adivinhar 24 00:01:56,520 --> 00:02:04,400 inicialmente quando essa tela é carregada pela primeira vez, mas também sempre que o usuário pressionar o botão este é muito 25 00:02:04,410 --> 00:02:05,230 baixo 26 00:02:05,310 --> 00:02:07,020 ou muito alto, portanto, sempre 27 00:02:07,020 --> 00:02:13,460 que o usuário der uma dica sobre se esse palpite é, em qual direção do número real 28 00:02:13,490 --> 00:02:18,990 esse palpite é, por assim dizer, sempre que isso acontecer, queremos gerar um novo palpite. 29 00:02:19,080 --> 00:02:27,240 Agora, o palpite em si deve ser um número aleatório e, portanto, começarei criando uma nova função fora do meu 30 00:02:27,360 --> 00:02:28,740 componente funcional agora, 31 00:02:28,740 --> 00:02:35,700 porque ele não usará nenhum dado de lá, portanto, não deve ser recriado a cada re-renderização dos 32 00:02:35,700 --> 00:02:38,190 componentes simplesmente para economizar algum desempenho, 33 00:02:38,250 --> 00:02:44,820 se você não confiar em adereços ou estado, também poderá simplesmente ter uma função que reside 34 00:02:44,820 --> 00:02:48,210 fora do seu componente, e eu o nomeei gerar 35 00:02:51,000 --> 00:02:52,770 aleatoriamente entre, porque é 36 00:02:52,770 --> 00:02:54,920 isso que essa função fará. 37 00:02:54,930 --> 00:03:00,360 É uma função, gera um número aleatório entre um mínimo e um máximo e 38 00:03:00,360 --> 00:03:02,010 também permite excluir 39 00:03:02,070 --> 00:03:09,510 determinados números, por exemplo, o primeiro número que geramos deve excluir a solução para que o dispositivo, o 40 00:03:09,510 --> 00:03:14,010 aplicativo nunca possa adivinhar a escolha do usuário na primeira tentativa. 41 00:03:14,010 --> 00:03:21,210 Agora aqui, o mínimo será normalizado para Math. mínimo mínimo, de modo a basicamente 42 00:03:21,210 --> 00:03:31,160 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 43 00:03:31,160 --> 00:03:45,920 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. 44 00:03:45,930 --> 00:03:54,470 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 - 45 00:03:54,970 --> 00:04:05,880 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 46 00:04:05,880 --> 00:04:10,410 número aleatório entre esse mínimo e o máximo. 47 00:04:13,340 --> 00:04:14,620 Agora, com 48 00:04:14,630 --> 00:04:20,750 isso gerado, quero verificar se o número aleatório é igual ao número que queremos excluir, o 49 00:04:20,750 --> 00:04:28,200 que, é claro, seria uma coincidência muito rara, mas pode acontecer; nesse caso, retornarei o resultado de outra geração aleatória 50 00:04:28,200 --> 00:04:33,300 entre chamada onde eu simplesmente encaminho min, max e excluo o que obtivemos, 51 00:04:33,300 --> 00:04:39,440 então simplesmente repetirei gerar aleatoriamente entre e retornará o valor dessa execução repetida, se conseguirmos o 52 00:04:39,460 --> 00:04:43,700 valor excluído novamente, repetiremos mais uma vez; chegamos lá e, se 53 00:04:43,920 --> 00:04:49,140 não tivermos o número excluído, que deve ser o caso na maioria dos casos, 54 00:04:49,140 --> 00:04:51,030 retornarei o número aleatório imediatamente. 55 00:04:51,030 --> 00:04:55,940 Portanto, essa é agora uma função que nos gera um número aleatório. 56 00:04:56,050 --> 00:05:06,070 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 57 00:05:06,700 --> 00:05:12,040 aleatório, porque o estado que quero gerenciar aqui é o palpite do computador, 58 00:05:12,040 --> 00:05:15,400 o atual palpite e que também precisa de 59 00:05:15,490 --> 00:05:21,640 uma função de palpite atual definida, para que possamos mudar isso sempre que o usuário der 60 00:05:21,640 --> 00:05:22,900 uma nova dica. 61 00:05:22,900 --> 00:05:29,410 Então, aqui, podemos chamar gerar aleatório entre para gerar um estado inicial que será salvo e isso será 62 00:05:29,410 --> 00:05:31,990 considerado apenas como um estado inicial; 63 00:05:31,990 --> 00:05:37,540 portanto, quando esse componente for reconstruído e, portanto, usar o estado for chamado novamente, geraremos 64 00:05:37,540 --> 00:05:43,810 outro número aleatório novamente, mas isso não substituirá esse estado porque, uma vez que o estado seja 65 00:05:43,810 --> 00:05:47,560 definido inicialmente, ele não será substituído novamente adicionando valor derivado aqui. 66 00:05:47,570 --> 00:05:54,190 Isso só será considerado pelo React se ainda não tivermos um estado inicial; depois disso, esse estado inicial 67 00:05:54,190 --> 00:06:00,400 ou atualizado será gerenciado desconectado do componente e não será substituído novamente por esta chamada aqui. 68 00:06:00,400 --> 00:06:05,640 Inicialmente, porém, precisamos fazer essa ligação, queremos obter um número aleatório entre 1 e 100, 69 00:06:05,650 --> 00:06:08,170 100 é excluído com a lógica que 70 00:06:08,200 --> 00:06:12,700 escrevemos lá em cima, portanto, será um número entre 1 e 99, 99 71 00:06:12,790 --> 00:06:15,580 incluído e quero excluir a escolha do usuário. 72 00:06:16,210 --> 00:06:19,040 Espero colocar isso nos meus props aqui, para que 73 00:06:19,150 --> 00:06:25,480 a escolha do usuário possa ser um nome de props que usamos aqui e esse é o valor que desejo executar, 74 00:06:25,480 --> 00:06:26,350 porque essa 75 00:06:26,440 --> 00:06:30,310 é a solução no final e não poderemos adivinhar a solução imediatamente, isso 76 00:06:30,310 --> 00:06:31,480 seria um pouco injusto.