Ora che eliminiamo queste nozioni di base e prima di approfondire React Native e anche come possiamo modellare
le nostre app in un modo un po 'più bello perché ovviamente il nostro stile qui
ha sicuramente ancora un potenziale positivo per dirlo in questo modo, prima
di immergerci in tutto ciò, lascia che ti mostri un altro componente interessante che è integrato
in React Native e che mostra anche con quanta facilità puoi aggiungere funzionalità interessanti alle app React Native e
questo è il componente modale.
Lo trovi ovviamente nei documenti ufficiali in quei componenti e nelle API
guida qua e là, troverai un modale laggiù.
Ora è sotto gli altri e qui, questo modale è un bel componente che ti consente di aggiungere
un così bello overlay, overlay a schermo intero con un piccolo sforzo.
Ora aggiungiamo un modale per ospitare effettivamente il nostro input di obiettivo, in questo
momento l'input dell'obiettivo è qui in alto e va bene,
ma in realtà voglio spostarlo in un modale in modo da averlo su un overlay a schermo intero alla
fine e abbiamo solo un pulsante
qui in alto, quindi al posto dell'input obiettivo che apre quel modale.
Quindi andiamo all'input obiettivo e
lì,
voglio racchiuderlo in un modale. Quindi importerò il modale da React
Native perché è un componente fornito
con React Native e lì, voglio usare quel modale intorno alla mia vista qui, quindi proprio
così per ora e ora salviamolo e vediamo se questo
già cambia qualcosa un po 'sì, il
nostro stile è
spento, stiamo perdendo quella imbottitura che abbiamo impostato originariamente, giusto?
In app. js, abbiamo quell'imbottitura generale sulla nostra vista dello schermo
che è quella vista esterna, sicuramente non viene più applicata sulle due piattaforme, sui due dispositivi perché il nostro
contenuto è molto al di fuori di questa schermata, quindi il modale sta già facendo qualcosa
e ovviamente non stiamo vedendo molto. Ora per modale, quindi per questo componente
modale, è possibile impostare una chiave visibile che definisce se questo è attualmente visibile o
meno e che richiede un valore booleano se lo impostiamo su falso per esempio e, successivamente, se diamo
un'occhiata alle nostre
applicazioni, abbiamo ovviamente visto lo schermo vuoto. A proposito, nel caso in cui Android non
dovesse aggiornarsi dopo aver impostato questo su falso, basta chiudere l'app qui con l'aiuto del cassetto delle app e successivamente nel processo laggiù,
il processo di avvio di npm, premere di nuovo a per riavviare questo su Android.
Quindi ora abbiamo uno schermo vuoto quando questo è impostato
su falso, ora ovviamente codifichiamo che questa non è la soluzione.
Invece in app. js, ora voglio avere un pulsante che ci consenta di aprire quel modale
e quindi chiuderemo il modale
dall'interno del modale quando premiamo il pulsante Aggiungi lì. Ora stiamo già importando il pulsante qui nell'app. js e ora che vedo
questo, ovviamente possiamo anche sbarazzarci di queste importazioni che non stiamo usando qui
in questo
momento, quindi lascia il pulsante import qui insieme alle altre importazioni che stiamo usando
e ora qui in cima , possiamo aggiungere il pulsante, è comunque un tag a chiusura
automatica e impostare il titolo per aggiungere forse un nuovo obiettivo, qualcosa del genere. Se lo facciamo, ovviamente dovremmo vedere quel pulsante qui in alto ed eccolo
qui
e ora quando
premiamo quel pulsante, vogliamo mostrare quel modale, giusto? Ora, per questo, dobbiamo gestire più
stato.
Quindi qui oltre a gestire gli obiettivi del corso, ora gestirò anche se siamo attualmente nella modalità di aggiunta
del corso o se non lo siamo.
Quindi inizialmente, non siamo così lo stato iniziale che sto impostando è falso e nominerò
il mio stato
qui e, ovviamente, dipende da te, lo chiamerò AddMode e setIsAddMode.
Ancora una volta questi
nomi dipendono da te, sto solo tenendo una convenzione qui che trovi anche nei documenti ufficiali di React in cui qui proviamo a dare
lo stato che stiamo controllando un nome appropriato e quindi in pratica prendiamo quel nome e aggiungiamo set
di fronte ad esso per chiarire che questa è la funzione per cambiare quello stato.
Quindi setIsAddMode è ciò che alla fine dobbiamo chiamare quando viene premuto questo pulsante e qui
possiamo usare una funzione inline o usare una funzione con nome e aggiungere qui il gestore, qualunque cosa
tu voglia.
Andrò con la funzione inline e chiamerò isAddMode e lo imposterò su true qui
quando viene chiamato questo pulsante in modo da aprire il modale. Ora possiamo prendere lo stato isAddMode che stiamo cambiando e
passarlo all'input dell'obiettivo per poi cambiare la visibilità del modale lì dentro. Quindi qui, potremmo aggiungere un prop visibile, ma quel
nome prop dipende da te perché è sul nostro componente e passo isAddMode, quindi questo è
lo stato che
stiamo controllando, in modalità visibile, quindi viene
passato il valore memorizzato in isAddMode come valore per il puntello visibile.
Ora nell'input dell'obiettivo, ora possiamo usare quell'elica visibile, quindi
qui possiamo usare gli oggetti visibili,
facendo ora riferimento all'elica visibile che abbiamo sull'input dell'obiettivo che in seguito
passiamo all'elica visibile del modale. Se ora lo salviamo e diamo un'occhiata alla
nostra app, se premo aggiungi un nuovo obiettivo qui, in effetti vedrai di nuovo quel contenuto modale qui.
Ora, ovviamente, non sembra così bello qui,
quindi dovremmo cambiare
questo e un'altra cosa che voglio cambiare è che un'animazione sarebbe piacevole qui per l'apertura del modale, giusto?
Quindi qui aggiungiamo il tipo di animazione che è una bella proprietà che possiamo impostare qui e puoi impostarla su una stringa e lì
hai tre opzioni: nessuna è l'impostazione predefinita ma puoi impostarla per farla scorrere e
ora il modale dovrebbe effettivamente apparire facendo scorrere su.
Quindi se premi aggiungi nuovo obiettivo, ora questo si
sposta, anche su Android.
Quindi questa è un'esperienza utente migliore, direi che il prossimo passo è assicurarci che i nostri contenuti
nel modale siano presentati in un modo migliore, magari centrati qui nel mezzo del modale.