Ora prima di aggiungere più logica, lavoriamo sull'interfaccia utente, quindi su ciò che produciamo.
Quindi qui, restituirò una vista alla fine
e in quella vista voglio avere un testo in cui dico che gli avversari indovinano, quindi ciò che il computer ha indovinato e quindi possiamo riutilizzare
il contenitore dei numeri per presentare bene quel numero indovinato.
Quindi è un enorme vantaggio di avere componenti riutilizzabili perché è possibile riutilizzarli, immagino, quindi è quello
che stiamo facendo qui.
Utilizzeremo di nuovo quel contenitore di numeri, di seguito in cui gli avversari indovinano il testo qui per avere
il nostro contenitore di numeri e produrre
correttamente l'ipotesi corrente qui. L'ipotesi attuale è il nostro
stato, ricorda che è quello che inizializziamo qui e che presto saremo in grado di cambiare.
Ecco cosa sta ottenendo l'output qui, sotto che ora possiamo anche presentare forse la nostra scheda con due pulsanti che consentono all'utente di
dare un suggerimento al computer.
Quindi qui, importerò la carta dalla scheda dei componenti per avvolgere questi pulsanti lì e quindi, possiamo già importare anche il
pulsante da React Native perché ne avremo bisogno anche in un
secondo e quindi avremo semplicemente la nostra carta qui e in quella carta , Voglio avere un pulsante con un titolo inferiore e un
altro pulsante in cui diciamo maggiore, queste sono due direzioni in cui possiamo dare un suggerimento, quindi il numero
che hai indovinato troppo basso, è troppo
alto, quindi possiamo dare il computer un suggerimento con questi pulsanti e onPress, al momento registrerò solo una
funzione vuota che non fa nulla, che ovviamente cambierà presto e
genererà effettivamente un nuovo numero casuale e con quello, ora è il momento di aggiungere alcuni stili qui.
Voglio avere uno stile per il mio schermo generale e come prima, questo diventerà flessibile
per prendere tutto lo spazio disponibile sullo schermo sotto l'intestazione che abbiamo
in alto, aggiungere un'imbottitura di 10 per avere un po 'di spazio attorno al
contenuto in modo che non si trovi direttamente sui bordi e utilizzi anche gli elementi di allineamento qui per centrare il nostro contenuto in orizzontale e quella proprietà dello schermo
viene utilizzata nella vista circostante qui per aggiungere lo schermo degli stili lì in modo che
il contenuto su questo schermo complessivo sia ben posizionato. Ora per questi pulsanti, sarebbe bello se si trovassero uno accanto
all'altro, quindi sulla scheda possiamo aggiungere uno stile, forse usare il contenitore di pulsanti come nome qui e quindi aggiungere lo stesso
nome qui nel nostro foglio di stile perché è quello che ci
riferiamo e impostiamo la direzione flessibile qui per remare e possiamo impostare una direzione flessibile qui perché lo sto facendo sulla
mia carta,
ma se guardiamo, in quella carta, distribuiamo questi stili su una vista e un view utilizza flexbox in modo che possiamo
impostare una direzione flessibile qui ed è quello che sto facendo lì, impostando la direzione flessibile su
riga per posizionare gli elementi uno accanto all'altro in orizzontale. justifyContenuto con spazio intorno forse, per avere lo
spazio libero attorno ai pulsanti, a sinistra e a destra equamente distribuiti e anche aggiungere un margine superiore di 20 in
modo che questa carta con i nostri pulsanti non sia posizionata direttamente accanto al numero indovinato ma c'è una
spaziatura tra e forse anche dare una larghezza di 300 e una larghezza massima dell'80% per assicurarsi che
ciò non possa mai superare i limiti della vista padre. Ora, se lo salviamo, sarebbe bello vederlo e per questo,
abbiamo bisogno di un modo per andare alla schermata di gioco.
Ora stiamo usando la schermata di avvio del gioco nel componente dell'app, quindi dovremo usare anche la schermata di
gioco lì e gestire il numero selezionato in quel componente dell'app perché è l'unico componente che è sempre presente sullo
schermo, oltre all'intestazione, ma il componente dell'app
è anche il componente che conterrà presto la schermata di avvio del gioco e la schermata di gioco
e quindi è il
componente in cui possiamo anche passare i dati alla schermata di avvio dei giochi e alla
schermata di gioco.
Quindi importiamo la schermata di gioco qui dalla schermata di gioco delle schermate e ovviamente voglio renderizzare la mia schermata di gioco qui ma non se
la schermata di avvio del gioco è ancora visibile, voglio avere una delle due e una nota a
margine, c'è anche un totale modo diverso di caricare componenti diversi e ci immergeremo in
quello in un modulo separato nel modulo di navigazione.
Ora, mentre tratteremo diverse soluzioni di navigazione in un secondo momento, esiste un modo per eseguire il rendering di una
delle due schermate in questo momento,
ma abbiamo anche un modo per rendere solo una di queste due schermate in questo momento e
per questo, non abbiamo bisogno di uno strumento speciale
o qualcosa del genere, possiamo usare la normale logica di React, possiamo rendere condizionalmente questo contenuto.
Tutto quello che dobbiamo fare per questo è che dobbiamo gestire un certo
stato nel nostro componente dell'app, dobbiamo anche gestire il numero selezionato qui.
Quindi aggiungerò use state qui e poi semplicemente userò il mio stato qui e inizializzerò questo senza alcun valore alla fine e lì, voglio ottenere
il
numero selezionato o il numero utente e ho impostato il numero utente come funzione di aggiornamento qui e inizialmente non è definito e ora
qui ho bisogno
di una funzione in cui
possiamo cambiarlo, come ad esempio il gestore
del gioco,
che suona come
un nome appropriato perché avremo un tale numero se l'utente preme il pulsante di avvio del gioco qui
nella schermata di avvio del gioco.
Quindi il gestore del gioco iniziale otterrà quindi il numero selezionato come input, è un presupposto che dobbiamo
fare qui e impostare il numero utente come quel numero selezionato qui. Ora, ogni volta che è il caso, ogni volta che
abbiamo un numero utente, sappiamo che il gioco è in esecuzione e sappiamo che
possiamo visualizzare la schermata di gioco anziché la schermata di avvio del gioco.
Quindi qui possiamo usare una variabile di contenuto per esempio e dire che il nostro contenuto predefinito è la schermata di avvio
del
gioco e che è normale codice React come lo sai anche da React For Web, puoi memorizzare componenti come questo in
variabili e quindi semplicemente ridimensionare la variabile lì, è anche quello che
facciamo già nella schermata di avvio del gioco con l'output confermato. Quindi la schermata di avvio dei giochi è il nostro
output predefinito
ma ora possiamo aggiungere un controllo if e verificare se il contenuto è true-ish, questo
è ciò che controlla questo controllo, quindi sarà inizialmente false-ish se non è definito, ma
ora se è true, noi posso impostare il numero utente, quindi ho verificato se il numero utente è true-ish, se questo
è true-ish, quindi sappiamo che
è stato selezionato un numero, sarà inizialmente non definito e quindi falso ma se è true-ish, se un è stato
scelto il numero, quindi
imposteremo qui il contenuto in modo che sia la schermata di gioco e quindi eseguiamo il rendering di qualunque cosa sia presente
nel contenuto e che sia la schermata di gioco o la schermata di avvio del gioco.
Quindi ora quando facciamo clic su Avvia gioco qui con un altro prescelto, questo dovrebbe passare qui se e questa è la cosa importante,
se ci assicuriamo che il gestore
di avvio del gioco possa essere attivato dalla schermata di avvio del gioco. Ora, per questo, usiamo un modello React predefinito
per passare un riferimento a questo gestore a quel componente, magari sul puntello onStartGame, che suona come
un nome adatto a me. Inoltriamo il gestore del gioco iniziale,
qui solo il riferimento senza parentesi, solo un riferimento, un puntatore a questa funzione e onStartGame è
ora una proprietà che possiamo usare nella schermata di avvio del gioco.
Quindi qui nella schermata di avvio del gioco, quando clicchiamo sul pulsante di avvio del gioco qui, voglio innescare quel sostegno
alla fine.
Quindi qui, ho onPress e lì alla fine, voglio eseguire onStartGame e inoltrare qui il numero attualmente selezionato che
è gestito nella schermata di avvio del gioco.
Quindi qui, inoltro questo a onStartGame e onStartGame è associato al gestore del gioco iniziale che si aspetta
e quindi riceve quel numero selezionato.
Quindi è così che ci assicuriamo che facendo clic su quel pulsante per avviare la schermata di gioco inneschi questo metodo o questa funzione
qui e quando questa
funzione viene attivata, impostiamo il numero utente, questo assicura che il contenuto sia
la schermata di gioco e quindi dovremmo vedere la schermata di gioco. Ora un pezzo mancante è che nella
schermata di gioco, ho bisogno della scelta dell'utente per generare il mio numero casuale iniziale ed escludere che la scelta
degli utenti sia corretta per quel primo numero casuale e quindi dobbiamo passare una
proprietà denominata scelta dell'utente nella schermata di gioco. Quindi possiamo aggiungere qui il prop di scelta
dell'utente e passare il numero utente che è lo stato che stiamo gestendo nel componente dell'app che
è quel numero selezionato che stiamo memorizzando nello stato
qui, passarlo alla schermata di gioco.
Quindi spero che il flusso di dati sia chiaro, otteniamo quel numero selezionato dalla schermata di avvio del gioco quando viene premuto quel pulsante,
viene premuto il pulsante di avvio del gioco, quindi
lo memorizziamo nello stato del componente dell'app qui nello stato del numero di utilizzo con il aiuto per
impostare il numero utente e quindi usiamo quel numero utente per passarlo alla schermata del gioco che viene visualizzato solo se
abbiamo un numero utente, quindi se il gioco è in esecuzione, se il gioco è stato avviato in modo
che nella schermata di gioco, possiamo usare il numero utente che viene ricevuto sul prop di scelta dell'utente per generare quindi il
nuovo numero casuale che il computer ha indovinato dove questa scelta dell'utente, questo numero utente è escluso, in modo che per la
prima ipotesi del computer, il computer non può indovina immediatamente il numero dell'utente. Parliamo molto, salviamo tutto e
diamo un'occhiata.
Immettere 55 e confermare e fare clic su Avvia gioco e non è possibile trovare una variabile all'avvio del gioco.
Quindi il problema qui è che eseguo, sì, dovrebbero essere oggetti di scena all'avvio del gioco qui, sul pulsante di avvio
del gioco nel componente di avvio del gioco perché ovviamente questa è una proprietà che stiamo
ottenendo, non è una funzione definita
qui, è definita sugli oggetti
di scena, è questo oggetto di scena alla fine.
Quindi un piccolo errore, proviamo di nuovo
dopo aver risolto questo problema, fai clic su
Avvia gioco e sembra buono.
Ora vediamo gli
avversari indovinare e possiamo dare alcuni suggerimenti
qui che in questo momento non hanno alcun effetto ma che presto avranno un effetto e quindi siamo nella schermata successiva, siamo
nella schermata di gioco.
Ora assicuriamoci di poter dare qualche suggerimento al computer qui e assicurarci che il computer abbia la possibilità
di risolvere questo e di indovinare il nostro numero.