1
00:00:02,220 --> 00:00:04,630
Quindi ora che abbiamo un'intestazione, possiamo

2
00:00:04,650 --> 00:00:10,950
continuare e continuare con la parte in cui gli utenti possono inserire un numero che il computer

3
00:00:10,950 --> 00:00:15,920
dovrebbe indovinare in seguito. E per questo qui nell'app. file js, sotto

4
00:00:15,920 --> 00:00:22,790
l'intestazione, ovviamente voglio avere l'area di input dell'utente. Ora, proprio come prima, lo gestirò in

5
00:00:22,790 --> 00:00:29,780
un componente separato e non qui in app. js per mantenere tutti i componenti relativamente snelli e potremmo

6
00:00:29,780 --> 00:00:34,850
creare questo componente qui nella cartella componenti, ciò non sarebbe sbagliato ma dato che ora

7
00:00:34,850 --> 00:00:42,110
lavorerò su un componente che è essenzialmente responsabile di tutto ciò che vediamo sullo schermo oltre all'intestazione, io tratto questo componente

8
00:00:42,140 --> 00:00:47,600
come una specie di componente speciale, lo chiamerò uno schermo e lo memorizzerò in una cartella

9
00:00:47,600 --> 00:00:53,000
degli schermi perché il gioco finito avrà essenzialmente tre schermi diversi: uno per configurare e avviare

10
00:00:53,000 --> 00:00:58,040
il gioco, uno quando il gioco è in esecuzione e uno quando il gioco

11
00:00:58,100 --> 00:01:04,520
è finito e voglio avere questi componenti speciali che tecnicamente sono componenti totalmente normali ma che soddisfano uno scopo

12
00:01:04,730 --> 00:01:10,790
speciale, voglio averli archiviati in una cartella separata e questa è solo la mia decisione di design personale

13
00:01:10,790 --> 00:01:16,790
qui, tu don non è necessario conservarli. Tecnicamente non c'è motivo di farlo o di non farlo,

14
00:01:16,790 --> 00:01:18,750
a React Native semplicemente non importa.

15
00:01:18,770 --> 00:01:24,200
Quindi qui lo memorizzerò lì e chiamerò StartGameScreen. Per chiarire anche nel nome che

16
00:01:24,200 --> 00:01:30,740
questo è un componente speciale per me, ma come ho detto, tecnicamente è un componente normale e

17
00:01:30,770 --> 00:01:37,580
quindi importiamo React da React e ovviamente importeremo anche alcune cose da React Native e noi posso

18
00:01:37,880 --> 00:01:44,210
già dire che avremo sicuramente bisogno di una vista perché probabilmente non puoi costruire alcun componente,

19
00:01:44,210 --> 00:01:49,060
beh puoi ma non molti componenti che puoi costruire senza viste.

20
00:01:49,160 --> 00:01:54,620
Quindi importeremo la vista qui e avremo sicuramente bisogno anche di un foglio di stile per un po 'di stile e

21
00:01:54,620 --> 00:02:02,870
vedremo cos'altro abbiamo bisogno, sicuramente avremo anche bisogno di un testo, quindi possiamo già aggiungerlo. Ora, con questo, creerò una nuova costante

22
00:02:03,500 --> 00:02:10,130
qui, avvia la schermata di gioco che è un componente funzionale simile a

23
00:02:10,130 --> 00:02:19,330
questo, dove avremo un oggetto styles con Stylesheet. creare, in questo modo e dove quindi esportare la schermata di avvio del

24
00:02:19,450 --> 00:02:27,430
gioco in quel modo e potresti salvarla come una specie di modello per ogni nuovo componente che aggiungi perché il 90% dei componenti

25
00:02:27,430 --> 00:02:32,890
personalizzati che costruisci in React Native assomiglia sostanzialmente a questo, importa React, importa alcune cose da

26
00:02:32,890 --> 00:02:39,280
React Native, definisci il tuo componente, ovviamente il nome differisce, hai l'oggetto stili e lo esporti, è praticamente

27
00:02:39,310 --> 00:02:40,740
sempre lo stesso,

28
00:02:40,780 --> 00:02:46,740
quindi puoi salvarlo come modello se lo desideri. Non voglio farlo qui, quindi continuerò a

29
00:02:46,740 --> 00:02:52,800
lavorare sul componente stesso e la domanda ora è: cosa visualizziamo in questa schermata

30
00:02:52,800 --> 00:02:59,760
di avvio del gioco? Come dovrebbe essere? Alla fine, avrò una

31
00:02:59,760 --> 00:03:06,960
vista avvolgente che circonda tutto il mio schermo perché penso che quel tipo di senso

32
00:03:06,960 --> 00:03:14,040
abbia, ci permetta di impostare uno stile generale. Aggiungerò di nuovo una proprietà dello schermo qui a questo oggetto foglio di stile che

33
00:03:14,040 --> 00:03:18,420
posso fare, non si scontrerà con quello nell'app. js, avremmo potuto anche scegliere

34
00:03:18,420 --> 00:03:23,760
nomi diversi, questi due semplicemente non sono correlati perché si tratta di oggetti Javascript

35
00:03:23,760 --> 00:03:29,790
indipendenti alla fine gestiti in file indipendenti. Quindi possiamo ripetere i nomi qui o scegliere nomi diversi, sceglierò un nome

36
00:03:29,790 --> 00:03:36,390
simile qui, nominerò questa schermata e creerò uno stile generale per questa vista circostante qui. Lo stile generale è che ho detto questo per fletterne

37
00:03:36,390 --> 00:03:42,810
uno in modo che occupi tutto lo spazio che può ottenere, il che significa che poiché lo aggiungerò sotto l'intestazione,

38
00:03:42,810 --> 00:03:47,760
prenderà tutto lo spazio sotto l'intestazione, sia in verticale che in orizzontale e oltre a

39
00:03:48,780 --> 00:03:55,350
questo , Voglio anche aggiungere un po 'di padding qui di 10 in modo che il contenuto non si trovi direttamente

40
00:03:55,350 --> 00:04:01,470
sui bordi di questa schermata ma ci sia una spaziatura a sinistra, a destra, in alto e in basso

41
00:04:01,470 --> 00:04:03,860
e aggiungerò allinea gli elementi al centro.

42
00:04:03,930 --> 00:04:09,900
Tieni presente che, per impostazione predefinita, ogni vista utilizza la flexbox e, per impostazione predefinita, utilizza la colonna

43
00:04:09,930 --> 00:04:13,960
della direzione flessibile, allinea gli elementi posizionandoli lungo l'asse trasversale, quindi poiché

44
00:04:13,980 --> 00:04:18,240
la direzione predefinita è la colonna, l'asse trasversale è da sinistra a

45
00:04:18,240 --> 00:04:20,000
destra, quindi è un

46
00:04:20,070 --> 00:04:25,380
asse orizzontale, quindi questo allineerà gli oggetti al centro in orizzontale ma non in verticale.

47
00:04:25,380 --> 00:04:31,200
Lì usiamo il default di justifyContent flex start ma dato che uso

48
00:04:31,200 --> 00:04:39,210
il default, non ho bisogno di impostarlo. Quindi lo lasceremo così com'è qui e ora assegniamo questo stile qui a questa vista e la formattazione automatica ha

49
00:04:39,210 --> 00:04:41,600
chiuso il mio tag qui che ovviamente non voglio fare, quindi lasciami

50
00:04:41,760 --> 00:04:42,830
ripristinare questo e ora

51
00:04:43,140 --> 00:04:47,070
abbiamo quella vista per il nostro schermata di gioco. Ora per vedere se funziona,

52
00:04:47,070 --> 00:04:49,220
visualizzerò solo un po 'di testo qui,

53
00:04:49,320 --> 00:04:56,110
la schermata di gioco, solo un segnaposto fittizio. Riformatta e ora in app. js, usiamo

54
00:04:56,530 --> 00:05:05,880
quella schermata importando la schermata di avvio dei giochi dalla cartella delle schermate e

55
00:05:05,880 --> 00:05:09,820
lì, avvia la schermata di gioco

56
00:05:09,890 --> 00:05:19,580
e quindi semplicemente aggiungila qui, in questo modo. Se lo salviamo, vediamo la schermata di gioco qui e anche su Android, quindi

57
00:05:19,650 --> 00:05:20,250
funziona.

58
00:05:20,250 --> 00:05:27,270
Stiamo usando questo secondo componente separato che ora useremo come componente a schermo intero sostanzialmente o quasi a schermo

59
00:05:27,360 --> 00:05:28,420
intero, la

60
00:05:28,430 --> 00:05:30,420
parte sotto l'intestazione alla fine.