Quindi ora che abbiamo un'intestazione, possiamo
continuare e continuare con la parte in cui gli utenti possono inserire un numero che il computer
dovrebbe indovinare in seguito. E per questo qui nell'app. file js, sotto
l'intestazione, ovviamente voglio avere l'area di input dell'utente. Ora, proprio come prima, lo gestirò in
un componente separato e non qui in app. js per mantenere tutti i componenti relativamente snelli e potremmo
creare questo componente qui nella cartella componenti, ciò non sarebbe sbagliato ma dato che ora
lavorerò su un componente che è essenzialmente responsabile di tutto ciò che vediamo sullo schermo oltre all'intestazione, io tratto questo componente
come una specie di componente speciale, lo chiamerò uno schermo e lo memorizzerò in una cartella
degli schermi perché il gioco finito avrà essenzialmente tre schermi diversi: uno per configurare e avviare
il gioco, uno quando il gioco è in esecuzione e uno quando il gioco
è finito e voglio avere questi componenti speciali che tecnicamente sono componenti totalmente normali ma che soddisfano uno scopo
speciale, voglio averli archiviati in una cartella separata e questa è solo la mia decisione di design personale
qui, tu don non è necessario conservarli. Tecnicamente non c'è motivo di farlo o di non farlo,
a React Native semplicemente non importa.
Quindi qui lo memorizzerò lì e chiamerò StartGameScreen. Per chiarire anche nel nome che
questo è un componente speciale per me, ma come ho detto, tecnicamente è un componente normale e
quindi importiamo React da React e ovviamente importeremo anche alcune cose da React Native e noi posso
già dire che avremo sicuramente bisogno di una vista perché probabilmente non puoi costruire alcun componente,
beh puoi ma non molti componenti che puoi costruire senza viste.
Quindi importeremo la vista qui e avremo sicuramente bisogno anche di un foglio di stile per un po 'di stile e
vedremo cos'altro abbiamo bisogno, sicuramente avremo anche bisogno di un testo, quindi possiamo già aggiungerlo. Ora, con questo, creerò una nuova costante
qui, avvia la schermata di gioco che è un componente funzionale simile a
questo, dove avremo un oggetto styles con Stylesheet. creare, in questo modo e dove quindi esportare la schermata di avvio del
gioco in quel modo e potresti salvarla come una specie di modello per ogni nuovo componente che aggiungi perché il 90% dei componenti
personalizzati che costruisci in React Native assomiglia sostanzialmente a questo, importa React, importa alcune cose da
React Native, definisci il tuo componente, ovviamente il nome differisce, hai l'oggetto stili e lo esporti, è praticamente
sempre lo stesso,
quindi puoi salvarlo come modello se lo desideri. Non voglio farlo qui, quindi continuerò a
lavorare sul componente stesso e la domanda ora è: cosa visualizziamo in questa schermata
di avvio del gioco? Come dovrebbe essere? Alla fine, avrò una
vista avvolgente che circonda tutto il mio schermo perché penso che quel tipo di senso
abbia, ci permetta di impostare uno stile generale. Aggiungerò di nuovo una proprietà dello schermo qui a questo oggetto foglio di stile che
posso fare, non si scontrerà con quello nell'app. js, avremmo potuto anche scegliere
nomi diversi, questi due semplicemente non sono correlati perché si tratta di oggetti Javascript
indipendenti alla fine gestiti in file indipendenti. Quindi possiamo ripetere i nomi qui o scegliere nomi diversi, sceglierò un nome
simile qui, nominerò questa schermata e creerò uno stile generale per questa vista circostante qui. Lo stile generale è che ho detto questo per fletterne
uno in modo che occupi tutto lo spazio che può ottenere, il che significa che poiché lo aggiungerò sotto l'intestazione,
prenderà tutto lo spazio sotto l'intestazione, sia in verticale che in orizzontale e oltre a
questo , Voglio anche aggiungere un po 'di padding qui di 10 in modo che il contenuto non si trovi direttamente
sui bordi di questa schermata ma ci sia una spaziatura a sinistra, a destra, in alto e in basso
e aggiungerò allinea gli elementi al centro.
Tieni presente che, per impostazione predefinita, ogni vista utilizza la flexbox e, per impostazione predefinita, utilizza la colonna
della direzione flessibile, allinea gli elementi posizionandoli lungo l'asse trasversale, quindi poiché
la direzione predefinita è la colonna, l'asse trasversale è da sinistra a
destra, quindi è un
asse orizzontale, quindi questo allineerà gli oggetti al centro in orizzontale ma non in verticale.
Lì usiamo il default di justifyContent flex start ma dato che uso
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
chiuso il mio tag qui che ovviamente non voglio fare, quindi lasciami
ripristinare questo e ora
abbiamo quella vista per il nostro schermata di gioco. Ora per vedere se funziona,
visualizzerò solo un po 'di testo qui,
la schermata di gioco, solo un segnaposto fittizio. Riformatta e ora in app. js, usiamo
quella schermata importando la schermata di avvio dei giochi dalla cartella delle schermate e
lì, avvia la schermata di gioco
e quindi semplicemente aggiungila qui, in questo modo. Se lo salviamo, vediamo la schermata di gioco qui e anche su Android, quindi
funziona.
Stiamo usando questo secondo componente separato che ora useremo come componente a schermo intero sostanzialmente o quasi a schermo
intero, la
parte sotto l'intestazione alla fine.