1 00:00:02,200 --> 00:00:06,380 Quindi abbiamo trascorso un sacco di tempo in questa prima schermata ma ovviamente per una buona 2 00:00:06,400 --> 00:00:11,950 ragione, questo corso riguarda l'apprendimento di React Native dopo tutto e hai imparato molto sul layout, lo stile, il collegamento dei componenti, 3 00:00:11,980 --> 00:00:16,810 l'utilizzo di più componenti e la configurazione di componenti già integrati e questa è una parte fondamentale di React 4 00:00:16,810 --> 00:00:23,920 Native e ciò che ti consente di creare app reali alla fine. Tuttavia, ora è il momento di continuare a lavorare su 5 00:00:23,920 --> 00:00:26,840 questa app e prima di approfondire altre cose che 6 00:00:27,190 --> 00:00:31,630 potremmo progettare, che farò in seguito, voglio assicurarmi che questo pulsante di avvio 7 00:00:31,840 --> 00:00:36,640 del gioco funzioni perché in questo momento siamo sempre bloccati su questo avvia la 8 00:00:36,640 --> 00:00:43,030 schermata di gioco ma ora aggiungerò un secondo componente nella cartella delle schermate, la schermata di gioco stessa, quindi 9 00:00:43,210 --> 00:00:49,390 la schermata, il contenuto che voglio mostrare sullo schermo quando il gioco è in esecuzione e questa è 10 00:00:49,390 --> 00:00:54,940 la schermata responsabile mostrando le ipotesi del computer e consentendo all'utente di dire al computer se è 11 00:00:54,940 --> 00:00:58,780 giusto o sbagliato, se il valore deve essere inferiore o maggiore, 12 00:00:58,930 --> 00:01:01,070 quindi questo è l'obiettivo qui. 13 00:01:01,120 --> 00:01:04,660 Ora, come ho detto prima, è comunque un componente 14 00:01:04,660 --> 00:01:11,620 normale, quindi dobbiamo importare React di sicuro e importeremo anche alcune cose da React Native, soprattutto la vista e 15 00:01:12,010 --> 00:01:17,640 il testo, non puoi mai sbagliare con questi, anche il foglio di stile ovviamente, in 16 00:01:17,650 --> 00:01:20,260 genere hai sempre bisogno di questi. 17 00:01:20,590 --> 00:01:28,150 Quindi qui, possiamo aggiungere il nostro componente funzionale della schermata di gioco, creare 18 00:01:28,150 --> 00:01:38,310 qui l'oggetto stili utilizzando il foglio di stile. crea in questo modo e, alla fine, esporta la nostra schermata di gioco come impostazione predefinita e 19 00:01:38,310 --> 00:01:40,790 sbarazzati di quel plus qui in alto. 20 00:01:40,800 --> 00:01:45,340 Quindi ora abbiamo quel componente dello schermo di gioco definito qui 21 00:01:45,370 --> 00:01:49,980 e ora facciamo una breve pausa e pensiamo a cosa deve accadere qui. 22 00:01:50,190 --> 00:01:55,620 Ora, alla fine, ciò che deve accadere è che il computer deve fare un'ipotesi e 23 00:01:55,620 --> 00:01:56,460 deve fare un'ipotesi 24 00:01:56,520 --> 00:02:04,400 inizialmente quando questa schermata viene caricata per la prima volta, ma anche ogni volta che l'utente preme sostanzialmente questo è troppo basso o 25 00:02:04,410 --> 00:02:05,230 questo 26 00:02:05,310 --> 00:02:07,020 è troppo alto, così ogni 27 00:02:07,020 --> 00:02:13,460 volta che l'utente dà un indizio sul fatto se tale ipotesi sia, in quale direzione del numero reale questa 28 00:02:13,490 --> 00:02:18,990 ipotesi è, per così dire, ogni volta che ciò accade vogliamo generare una nuova ipotesi. 29 00:02:19,080 --> 00:02:27,240 Ora l'ipotesi stessa dovrebbe essere un numero casuale e quindi, inizierò creando una nuova funzione al di fuori del mio componente funzionale 30 00:02:27,360 --> 00:02:28,740 ora perché non 31 00:02:28,740 --> 00:02:35,700 utilizzerà alcun dato da lì, quindi non dovrebbe essere ricreato su ogni nuovo rendering dei componenti semplicemente per 32 00:02:35,700 --> 00:02:38,190 salvare alcune prestazioni, se non si fa 33 00:02:38,250 --> 00:02:44,820 affidamento su oggetti di scena o stato, si può anche semplicemente avere una funzione che risiede al 34 00:02:44,820 --> 00:02:48,210 di fuori del proprio componente e chiamerò questa generazione 35 00:02:51,000 --> 00:02:52,770 casuale tra perché è 36 00:02:52,770 --> 00:02:54,920 quello che farà questa funzione. 37 00:02:54,930 --> 00:03:00,360 È una funzione, genererà un numero casuale tra un minimo e un massimo e 38 00:03:00,360 --> 00:03:02,010 che ci consente anche 39 00:03:02,070 --> 00:03:09,510 di escludere determinati numeri, ad esempio il primo numero che generiamo dovrebbe escludere la soluzione in modo che il dispositivo, 40 00:03:09,510 --> 00:03:14,010 l'app non possa mai indovinare la scelta dell'utente al primo tentativo. 41 00:03:14,010 --> 00:03:21,210 Ora qui, il minimo sarà normalizzato in matematica. ceil minimo, quindi fondamentalmente avere un 42 00:03:21,210 --> 00:03:31,160 numero intero qui se viene inserito un non intero e arrotondato per eccesso e max verrà pavimentato per 43 00:03:31,160 --> 00:03:45,920 fare lo stesso ma arrotondato per difetto. Quindi avrò il mio numero casuale che genererò con Math. casuale e matematica. 44 00:03:45,930 --> 00:03:54,470 random ci dà un numero casuale compreso tra 0 e 1, quindi per avere un numero tra min e max, dobbiamo moltiplicarlo per max 45 00:03:54,970 --> 00:04:05,880 - min e poi anche alla fine, aggiungi min qui e assicurati di chiamare Math. piano sul risultato di questa intera operazione qui e questo ti 46 00:04:05,880 --> 00:04:10,410 darà un numero casuale tra questo minimo e massimo. 47 00:04:13,340 --> 00:04:14,620 Ora con quello 48 00:04:14,630 --> 00:04:20,750 generato, voglio verificare se il numero casuale è uguale al numero che vogliamo escludere, il che ovviamente 49 00:04:20,750 --> 00:04:28,200 sarebbe una coincidenza molto rara ma può accadere, nel qual caso restituirò il risultato di un altro genera casuale tra chiamo dove 50 00:04:28,200 --> 00:04:33,300 semplicemente inoltro min, max ed escludo quello che abbiamo ottenuto, quindi ripeterò semplicemente genera 51 00:04:33,300 --> 00:04:39,440 random tra e restituiremo il valore di quella corsa ripetuta se otteniamo di nuovo il valore escluso, lo 52 00:04:39,460 --> 00:04:43,700 ripeteremo ancora una volta, quindi alla fine abbiamo ci arriveremo e se 53 00:04:43,920 --> 00:04:49,140 non abbiamo il numero escluso che dovrebbe essere il caso nella maggior parte dei casi, 54 00:04:49,140 --> 00:04:51,030 restituirò immediatamente quel numero casuale. 55 00:04:51,030 --> 00:04:55,940 Quindi questa è ora una funzione che ci genera un numero casuale. 56 00:04:56,050 --> 00:05:06,070 Ora qui nella schermata di gioco, voglio gestire alcuni stati, quindi importerò il hook useState da React e inizializzerò alcuni stati qui con il numero 57 00:05:06,700 --> 00:05:12,040 casuale perché lo stato che voglio gestire qui è l'ipotesi del computer, l'attuale 58 00:05:12,040 --> 00:05:15,400 indovinare e che ha anche bisogno di una 59 00:05:15,490 --> 00:05:21,640 funzione di indovinare impostata in modo che possiamo cambiarla ogni volta che l'utente dà un 60 00:05:21,640 --> 00:05:22,900 nuovo suggerimento. 61 00:05:22,900 --> 00:05:29,410 Quindi qui, possiamo chiamare generate random random tra per generare uno stato iniziale che verrà salvato e questo verrà 62 00:05:29,410 --> 00:05:31,990 quindi considerato solo come uno stato 63 00:05:31,990 --> 00:05:37,540 iniziale, quindi quando questo componente viene ricostruito e quindi viene chiamato di nuovo use state, genereremo 64 00:05:37,540 --> 00:05:43,810 un altro numero casuale ancora una volta, ma questo non sovrascriverà quello stato perché una volta che lo 65 00:05:43,810 --> 00:05:47,560 stato è impostato inizialmente, non verrà sovrascritto aggiungendo valore derivato qui. 66 00:05:47,570 --> 00:05:54,190 Questo sarà considerato da React solo se non abbiamo ancora uno stato iniziale, da allora in poi questo stato 67 00:05:54,190 --> 00:06:00,400 iniziale o aggiornato verrà gestito separatamente dal componente e non verrà sovrascritto nuovamente da questa chiamata qui. 68 00:06:00,400 --> 00:06:05,640 Inizialmente tuttavia dobbiamo effettuare questa chiamata, vogliamo ottenere un numero casuale compreso tra 1 e 69 00:06:05,650 --> 00:06:08,170 100, 100 è escluso con la logica 70 00:06:08,200 --> 00:06:12,700 che abbiamo scritto lì, quindi sarà un numero compreso tra 1 e 99, 71 00:06:12,790 --> 00:06:15,580 99 inclusi e voglio escludere la scelta dell'utente. 72 00:06:16,210 --> 00:06:19,040 Mi aspetto di ottenere questo sui miei oggetti di scena 73 00:06:19,150 --> 00:06:25,480 qui, quindi la scelta dell'utente potrebbe essere un nome prop che usiamo qui e questo è il valore che voglio eseguire perché 74 00:06:25,480 --> 00:06:26,350 è la 75 00:06:26,440 --> 00:06:30,310 soluzione alla fine e non saremo in grado di indovinare subito la soluzione, 76 00:06:30,310 --> 00:06:31,480 sarebbe un po 'ingiusto.