Passiamo alla schermata dei filtri e lì in questo momento, ho solo il mio
contenuto fittizio, la schermata del filtro e ovviamente
non è quello che voglio lì, invece lì voglio avere del testo in alto in realtà dove dico filtri disponibili / restrizioni
o qualcosa del genere in cui voglio puntare a un determinato oggetto di stile con
stili, chiamiamolo titolo forse perché sarà il nostro titolo principale qui e sotto quello, voglio avere i miei filtri
diversi.
Ora come appare un filtro? Abbiamo bisogno di alcuni interruttori, alcune caselle di controllo, qualcosa del
genere che ci consenta di attivare e disattivare un filtro e un'etichetta per questo.
Ora ciò significa che probabilmente una vista ha senso raggruppare l'etichetta e che si scambiano
insieme e probabilmente li posizionano
fianco a fianco e darò alla vista uno stile di contenitore del filtro, qualcosa del genere e lì dentro, come ho detto, voglio avere un testo con un'etichetta, ad esempio dire
glutenFree lì e accanto a questo, un interruttore e per fortuna React
Native ha un interruttore incorporato, si chiama switch. Il componente switch rende un bel
switch che possiamo usare, quindi qui possiamo
semplicemente usare switch in questo modo e renderlo sullo schermo. Dovremo configurarlo, ma per iniziare, possiamo
usarlo in questo modo. Ora per uno stile di base, per il titolo e il contenitore
del filtro qui,
andiamo qui, aggiungiamo il contenitore
del filtro e il titolo qui e il titolo è piuttosto semplice. Lì, voglio usare la famiglia di caratteri
open sans grassetto e una dimensione del carattere di 22, un margine in tutte le direzioni di 20 e
anche impostare l'allineamento del testo al centro per centrare questo. A proposito, lo schermo generale non dovrebbe più centrare gli elementi sull'asse
principale, quindi il centraggio verticale non dovrebbe
più avvenire e per questo,
possiamo semplicemente sbarazzarci di giustificare il centro contenuti e il contenitore filtro d'altra parte dovrebbe posizionare l'interruttore
e il testo uno accanto all'altro di fila.
Quindi qui possiamo impostare la direzione di flessione su riga, giustificare il contenuto forse aggiungendo spazio attorno e allineare gli elementi sull'asse trasversale al
centro, in modo che sia centrato verticalmente. Ora diamo un'occhiata a questo, se salviamo questo e
andiamo alla schermata del filtro, questo è ciò che abbiamo ottenuto. Qui abbiamo un interruttore e come vedi in questo momento sta
sempre saltando indietro, è
qualcosa di cui ci prenderemo cura in un secondo ma in generale, lo vediamo e qui sui filtri per Android, abbiamo
un interruttore Android che salta anche ma che è già prestabilito per Android, quindi in realtà è un altro
componente
integrato in React Native che ha un aspetto predefinito per Android. Quindi non è poi
così male.
Una cosa che voglio cambiare è per il contenitore del filtro, voglio assegnare
una larghezza fissa di diciamo l'80% e in realtà cambiarlo qui nello spazio tra,
non
spazio intorno perché penso che ora sia un po 'più bello, sì sicuramente, anche su Android e ora, possiamo assicurarci che questo interruttore funzioni davvero
e che non salti indietro quando lo attiviamo. Per questo, è necessario sapere che per gli switch, è necessario
gestire manualmente il loro stato e che in realtà non è nuovo, in React è spesso il caso che per
questi componenti di input, sia necessario memorizzare ciò che l'utente immette e reinserirlo nel componente per riflettere ciò nell'interfaccia
utente aggiornata e lo
facciamo con la gestione dello stato.
Quindi importiamo per usare lo hook di stato da React in modo da poter gestire
lo stato qui in questo componente funzionale e che qui, avrò il mio stato di glutine e chiamerò questo è GlutenFree e setterò lo stato d'uso isGlutenFree,
inizialmente è falso e ora acceso
che switch qui,
hai una proprietà value, che è una proprietà incorporata nello switch integrato in cui inserisco isGlutenFree, quindi questo richiede
un valore booleano che indica se lo switch è reso attivo o meno, quindi se è contrassegnato come
selezionato o non selezionato, dovrei dire e hai una proprietà onValueChange che accetta una funzione
che si attiva ogni volta che l'utente
fa clic su tale interruttore. Questa funzione qui ottiene il nuovo
valore, quindi se l'interruttore era nella modalità falsa, nella modalità deselezionata, il nuovo valore sarà vero e viceversa ovviamente
e possiamo usarlo per aggiornare il nostro stato e impostare isGlutenFree per il nuovo valore e poiché
anche questo stato viene reinserito, ora il nostro switch dovrebbe essere modificabile e dovrebbe rimanere in
quella modalità aggiornata.
Quindi ora se diamo un'occhiata a questo, ora possiamo davvero attivare questo interruttore e questo è un miglioramento.
Lo stile dell'interruttore non è quello che voglio comunque, usa un po 'di
colore predefinito, ovviamente vorrei usare i miei colori che uso sempre nell'app
e per questo, ovviamente possiamo importare i nostri colori costantemente,
quindi importa i colori da costanti / colori e l'interruttore ha un'altra proprietà che ci aiuta con lo stile qui, possiamo aggiungere il colore della traccia che
ci consente di personalizzare i colori per quell'interruttore, quindi il colore di sfondo e così via
e il colore della traccia prendono un oggetto come un valore, quindi abbiamo un oggetto che passiamo qui a questa associazione dinamica in
cui è possibile impostare un colore di sfondo per il falso stato, quindi se è inattivo, se è
deselezionato e qui sto bene con il valore predefinito, questo sembra buono per ma puoi anche
impostarne uno
per il caso vero che è il caso in cui è
selezionato e lì voglio usare i colori, il colore primario e ovviamente puoi prendere qualsiasi colore desideri.
E se lo facciamo e torno ai filtri, ora usiamo il nostro colore qui, che ovviamente è più
in linea con il resto
di questa applicazione e, ovviamente, funzionerà anche qui su Android. Possiamo anche impostare il colore del pollice che è il colore di
questo pollice qui che è verde qui su Android e questo richiede solo una stringa, una stringa di colore, quindi ad esempio
un codice esadecimale, lì possiamo anche puntare a colori colore primario e se lo facciamo, su iOS, ora ha
questo colore e lo stesso
su Android.
Ora ovviamente su iOS, questo non sembra davvero buono, lì
vorrei mantenere l'impostazione predefinita e la soluzione è piuttosto semplice,
possiamo ancora usare la buona vecchia piattaforma API, importare questo e poi qui quando si assegna
un colore del pollice , Controllo la piattaforma. sistema operativo uguale ad Android, nel qual caso voglio usare il colore primario per il
pollice, altrimenti lo imposterò su una stringa vuota, il che significa che utilizzerà il valore predefinito che è bianco su iOS.
E con questo, qui abbiamo lo stesso aspetto di prima che mi piace su iOS
ma, naturalmente, puoi anche
perfezionare questo alle tue esigenze e su Android, avremo ancora l'aspetto che abbiamo visto prima, se vado al filtro
schermo qui che sembra buono anche lì. Quindi questo è lo switch e
come possiamo aggiungerlo, ora dobbiamo solo ripetere questo per tutti gli
altri switch, quindi tutti gli altri filtri intendo. Quindi posso copiare quella vista e aggiungerla di
nuovo senza
lattosio o per vegan ma se ti ritrovi a copiare e incollare più e più
volte mentre stiamo provando a farlo qui, è sempre un buon caso per creare un componente separato o un funzione
che rende questo codice riutilizzabile.
E qui, ancora una volta creerò un componente separato in quello stesso file perché lo uso davvero solo
lì
dentro, di nuovo potresti anche scegliere un file separato se lo desideri.
Lo chiamerò switch filtro e questo ottiene alcuni oggetti di scena e
in questo componente, alla fine restituisco questo codice, impostiamo un for con la vista e il testo e così via
e
ovviamente ora il testo deve essere dinamico. Lì potremmo impostare questo come etichetta degli oggetti di
scena e dipende da te ciò che scegli qui perché sarai tu a passare i valori degli oggetti
di scena in seguito in ogni caso e ovviamente qui, ciò che accade su ValueChange e anche ciò che passiamo a valore differisce.
Quindi qui, questo dovrebbe essere lo stato degli oggetti di scena per esempio o il valore degli oggetti di scena o qualunque cosa tu voglia usare e
qui per onValueChange, indicherò semplicemente gli oggetti di scena. onChange per esempio, ma ancora una volta tutti
questi nomi di oggetti di scena dipendono totalmente da te perché sarai
tu a usare quel componente e lo useremo ora qui, come questo, quindi componente autochiudente, dove ora possiamo impostare un'etichetta perché mi aspetto
un supporto per l'etichetta qui, se lo hai chiamato in
modo diverso, devi nominarlo in
modo diverso qui ovviamente e l'etichetta ovviamente è GlutenFree perché sto per sostituire questo interruttore qui.
Quindi dobbiamo passare in uno stato perché ho aggiunto un prop di stato qui per gestire il mio valore,
se lo hai chiamato in modo diverso, devi nominarlo in modo
diverso anche lì e qui indicherò isGlutenFree, al mio
stato e alle esigenze di
onChange da fornire perché qui sto usando il prop onChange per collegarlo a onValueChange.
Quindi questo dovrebbe puntare a una funzione e ovviamente qui, terrò semplicemente questa funzione
qui e dato che uso solo onChange qui per inoltrarlo a onValueChange, otteniamo anche il nuovo argomento value qui.
Ora possiamo liberarci di questa vista laggiù e semplicemente usare il nostro componente di commutazione del filtro e ora
semplicemente ripetere ciò che è ovviamente molto più facile.
Quindi ora qui possiamo avere anche Lattosio, Vegani e Vegetariani e ora dobbiamo
aggiungere tre nuovi stati, quindi qui lasciatemi replicare, abbiamo Lattosio Libero e impostiamo Lattosio
Gratuito, qui abbiamo Isgano e impostiamo
Isgano e qui abbiamo
Isgiante impostare isVegetarian.
Ora dobbiamo solo assicurarci di usare gli stati nei posti giusti, quindi per il secondo interruttore
del filtro in cui abbiamo il filtro lattosio, inoltro lo stato
isLactoseFree e aggiorno il set isLactoseFree ovviamente. Per il passaggio vegan, inoltro
isVegan e lo aggiorniamo con set isVegan e per i vegetariani, inoltriamo isVegetarian e
aggiorniamo set isVegetarian, in questo modo.
OK,
dovrebbe essere così, se ora lo salviamo, dovremmo avere una schermata di filtro con i nostri diversi filtri che possiamo
impostare in modo indipendente perché abbiamo stati indipendenti. Penso che sarebbe bello avere un
po 'di spazio tra queste righe, quindi implementiamo questo. Sul nostro contenitore di filtri qui, possiamo semplicemente aggiungere
un margine verticale di diciamo 10 o 50 forse, un po 'di più e questo dovrebbe assicurarci di avere un
po' di spazio
lì, sì e questo sembra abbastanza carino.