1 00:00:02,390 --> 00:00:08,060 Passiamo alla schermata dei filtri e lì in questo momento, ho solo il mio 2 00:00:08,060 --> 00:00:11,420 contenuto fittizio, la schermata del filtro e ovviamente 3 00:00:11,510 --> 00:00:20,060 non è quello che voglio lì, invece lì voglio avere del testo in alto in realtà dove dico filtri disponibili / restrizioni 4 00:00:20,060 --> 00:00:25,910 o qualcosa del genere in cui voglio puntare a un determinato oggetto di stile con 5 00:00:25,910 --> 00:00:33,560 stili, chiamiamolo titolo forse perché sarà il nostro titolo principale qui e sotto quello, voglio avere i miei filtri 6 00:00:33,560 --> 00:00:34,250 diversi. 7 00:00:34,250 --> 00:00:41,180 Ora come appare un filtro? Abbiamo bisogno di alcuni interruttori, alcune caselle di controllo, qualcosa del 8 00:00:41,180 --> 00:00:45,210 genere che ci consenta di attivare e disattivare un filtro e un'etichetta per questo. 9 00:00:45,230 --> 00:00:50,840 Ora ciò significa che probabilmente una vista ha senso raggruppare l'etichetta e che si scambiano 10 00:00:50,840 --> 00:00:52,970 insieme e probabilmente li posizionano 11 00:00:52,970 --> 00:01:04,560 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 12 00:01:04,560 --> 00:01:09,300 glutenFree lì e accanto a questo, un interruttore e per fortuna React 13 00:01:10,050 --> 00:01:16,080 Native ha un interruttore incorporato, si chiama switch. Il componente switch rende un bel 14 00:01:16,080 --> 00:01:19,140 switch che possiamo usare, quindi qui possiamo 15 00:01:19,140 --> 00:01:28,180 semplicemente usare switch in questo modo e renderlo sullo schermo. Dovremo configurarlo, ma per iniziare, possiamo 16 00:01:28,210 --> 00:01:36,520 usarlo in questo modo. Ora per uno stile di base, per il titolo e il contenitore 17 00:01:36,520 --> 00:01:37,780 del filtro qui, 18 00:01:37,780 --> 00:01:39,490 andiamo qui, aggiungiamo il contenitore 19 00:01:39,490 --> 00:01:48,040 del filtro e il titolo qui e il titolo è piuttosto semplice. Lì, voglio usare la famiglia di caratteri 20 00:01:48,120 --> 00:01:58,410 open sans grassetto e una dimensione del carattere di 22, un margine in tutte le direzioni di 20 e 21 00:01:58,550 --> 00:02:08,580 anche impostare l'allineamento del testo al centro per centrare questo. A proposito, lo schermo generale non dovrebbe più centrare gli elementi sull'asse 22 00:02:08,610 --> 00:02:11,530 principale, quindi il centraggio verticale non dovrebbe 23 00:02:11,700 --> 00:02:14,330 più avvenire e per questo, 24 00:02:14,460 --> 00:02:21,610 possiamo semplicemente sbarazzarci di giustificare il centro contenuti e il contenitore filtro d'altra parte dovrebbe posizionare l'interruttore 25 00:02:21,640 --> 00:02:24,970 e il testo uno accanto all'altro di fila. 26 00:02:24,970 --> 00:02:34,060 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 27 00:02:34,060 --> 00:02:40,080 centro, in modo che sia centrato verticalmente. Ora diamo un'occhiata a questo, se salviamo questo e 28 00:02:40,080 --> 00:02:46,290 andiamo alla schermata del filtro, questo è ciò che abbiamo ottenuto. Qui abbiamo un interruttore e come vedi in questo momento sta 29 00:02:46,290 --> 00:02:47,460 sempre saltando indietro, è 30 00:02:47,460 --> 00:02:53,130 qualcosa di cui ci prenderemo cura in un secondo ma in generale, lo vediamo e qui sui filtri per Android, abbiamo 31 00:02:53,130 --> 00:02:58,380 un interruttore Android che salta anche ma che è già prestabilito per Android, quindi in realtà è un altro 32 00:02:58,380 --> 00:02:58,920 componente 33 00:02:58,920 --> 00:03:05,300 integrato in React Native che ha un aspetto predefinito per Android. Quindi non è poi 34 00:03:05,300 --> 00:03:07,240 così male. 35 00:03:07,250 --> 00:03:13,070 Una cosa che voglio cambiare è per il contenitore del filtro, voglio assegnare 36 00:03:13,070 --> 00:03:19,430 una larghezza fissa di diciamo l'80% e in realtà cambiarlo qui nello spazio tra, 37 00:03:19,430 --> 00:03:20,480 non 38 00:03:20,480 --> 00:03:32,030 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 39 00:03:32,030 --> 00:03:39,440 e che non salti indietro quando lo attiviamo. Per questo, è necessario sapere che per gli switch, è necessario 40 00:03:39,440 --> 00:03:46,130 gestire manualmente il loro stato e che in realtà non è nuovo, in React è spesso il caso che per 41 00:03:46,670 --> 00:03:53,120 questi componenti di input, sia necessario memorizzare ciò che l'utente immette e reinserirlo nel componente per riflettere ciò nell'interfaccia 42 00:03:53,210 --> 00:03:54,790 utente aggiornata e lo 43 00:03:55,130 --> 00:03:57,080 facciamo con la gestione dello stato. 44 00:03:57,100 --> 00:04:03,040 Quindi importiamo per usare lo hook di stato da React in modo da poter gestire 45 00:04:03,290 --> 00:04:13,770 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, 46 00:04:14,660 --> 00:04:16,930 inizialmente è falso e ora acceso 47 00:04:17,150 --> 00:04:18,800 che switch qui, 48 00:04:22,330 --> 00:04:29,650 hai una proprietà value, che è una proprietà incorporata nello switch integrato in cui inserisco isGlutenFree, quindi questo richiede 49 00:04:29,650 --> 00:04:36,640 un valore booleano che indica se lo switch è reso attivo o meno, quindi se è contrassegnato come 50 00:04:36,640 --> 00:04:42,550 selezionato o non selezionato, dovrei dire e hai una proprietà onValueChange che accetta una funzione 51 00:04:42,550 --> 00:04:45,160 che si attiva ogni volta che l'utente 52 00:04:45,160 --> 00:04:49,520 fa clic su tale interruttore. Questa funzione qui ottiene il nuovo 53 00:04:49,610 --> 00:04:56,480 valore, quindi se l'interruttore era nella modalità falsa, nella modalità deselezionata, il nuovo valore sarà vero e viceversa ovviamente 54 00:04:56,480 --> 00:05:02,750 e possiamo usarlo per aggiornare il nostro stato e impostare isGlutenFree per il nuovo valore e poiché 55 00:05:03,110 --> 00:05:09,050 anche questo stato viene reinserito, ora il nostro switch dovrebbe essere modificabile e dovrebbe rimanere in 56 00:05:09,290 --> 00:05:10,800 quella modalità aggiornata. 57 00:05:10,820 --> 00:05:17,430 Quindi ora se diamo un'occhiata a questo, ora possiamo davvero attivare questo interruttore e questo è un miglioramento. 58 00:05:17,450 --> 00:05:21,800 Lo stile dell'interruttore non è quello che voglio comunque, usa un po 'di 59 00:05:21,800 --> 00:05:26,010 colore predefinito, ovviamente vorrei usare i miei colori che uso sempre nell'app 60 00:05:26,180 --> 00:05:30,020 e per questo, ovviamente possiamo importare i nostri colori costantemente, 61 00:05:30,020 --> 00:05:39,140 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 62 00:05:39,710 --> 00:05:45,130 ci consente di personalizzare i colori per quell'interruttore, quindi il colore di sfondo e così via 63 00:05:45,140 --> 00:05:52,910 e il colore della traccia prendono un oggetto come un valore, quindi abbiamo un oggetto che passiamo qui a questa associazione dinamica in 64 00:05:52,910 --> 00:05:59,030 cui è possibile impostare un colore di sfondo per il falso stato, quindi se è inattivo, se è 65 00:05:59,030 --> 00:06:04,490 deselezionato e qui sto bene con il valore predefinito, questo sembra buono per ma puoi anche 66 00:06:04,490 --> 00:06:05,270 impostarne uno 67 00:06:05,660 --> 00:06:09,570 per il caso vero che è il caso in cui è 68 00:06:09,740 --> 00:06:15,680 selezionato e lì voglio usare i colori, il colore primario e ovviamente puoi prendere qualsiasi colore desideri. 69 00:06:15,680 --> 00:06:22,580 E se lo facciamo e torno ai filtri, ora usiamo il nostro colore qui, che ovviamente è più 70 00:06:22,580 --> 00:06:24,740 in linea con il resto 71 00:06:24,740 --> 00:06:33,340 di questa applicazione e, ovviamente, funzionerà anche qui su Android. Possiamo anche impostare il colore del pollice che è il colore di 72 00:06:33,340 --> 00:06:41,290 questo pollice qui che è verde qui su Android e questo richiede solo una stringa, una stringa di colore, quindi ad esempio 73 00:06:42,410 --> 00:06:49,530 un codice esadecimale, lì possiamo anche puntare a colori colore primario e se lo facciamo, su iOS, ora ha 74 00:06:49,530 --> 00:06:51,270 questo colore e lo stesso 75 00:06:55,710 --> 00:06:56,820 su Android. 76 00:06:59,660 --> 00:07:03,420 Ora ovviamente su iOS, questo non sembra davvero buono, lì 77 00:07:03,420 --> 00:07:07,480 vorrei mantenere l'impostazione predefinita e la soluzione è piuttosto semplice, 78 00:07:07,500 --> 00:07:13,620 possiamo ancora usare la buona vecchia piattaforma API, importare questo e poi qui quando si assegna 79 00:07:13,620 --> 00:07:21,000 un colore del pollice , Controllo la piattaforma. sistema operativo uguale ad Android, nel qual caso voglio usare il colore primario per il 80 00:07:21,480 --> 00:07:26,410 pollice, altrimenti lo imposterò su una stringa vuota, il che significa che utilizzerà il valore predefinito che è bianco su iOS. 81 00:07:26,510 --> 00:07:31,650 E con questo, qui abbiamo lo stesso aspetto di prima che mi piace su iOS 82 00:07:31,650 --> 00:07:33,300 ma, naturalmente, puoi anche 83 00:07:33,300 --> 00:07:40,140 perfezionare questo alle tue esigenze e su Android, avremo ancora l'aspetto che abbiamo visto prima, se vado al filtro 84 00:07:40,140 --> 00:07:45,650 schermo qui che sembra buono anche lì. Quindi questo è lo switch e 85 00:07:45,950 --> 00:07:50,060 come possiamo aggiungerlo, ora dobbiamo solo ripetere questo per tutti gli 86 00:07:50,120 --> 00:07:55,700 altri switch, quindi tutti gli altri filtri intendo. Quindi posso copiare quella vista e aggiungerla di 87 00:07:55,700 --> 00:07:56,430 nuovo senza 88 00:07:56,990 --> 00:08:01,960 lattosio o per vegan ma se ti ritrovi a copiare e incollare più e più 89 00:08:02,090 --> 00:08:08,900 volte mentre stiamo provando a farlo qui, è sempre un buon caso per creare un componente separato o un funzione 90 00:08:08,900 --> 00:08:10,680 che rende questo codice riutilizzabile. 91 00:08:10,730 --> 00:08:15,590 E qui, ancora una volta creerò un componente separato in quello stesso file perché lo uso davvero solo 92 00:08:15,590 --> 00:08:16,040 lì 93 00:08:16,040 --> 00:08:19,150 dentro, di nuovo potresti anche scegliere un file separato se lo desideri. 94 00:08:19,390 --> 00:08:23,720 Lo chiamerò switch filtro e questo ottiene alcuni oggetti di scena e 95 00:08:23,720 --> 00:08:30,820 in questo componente, alla fine restituisco questo codice, impostiamo un for con la vista e il testo e così via 96 00:08:30,820 --> 00:08:31,410 e 97 00:08:31,610 --> 00:08:37,100 ovviamente ora il testo deve essere dinamico. Lì potremmo impostare questo come etichetta degli oggetti di 98 00:08:37,100 --> 00:08:41,810 scena e dipende da te ciò che scegli qui perché sarai tu a passare i valori degli oggetti 99 00:08:43,050 --> 00:08:48,930 di scena in seguito in ogni caso e ovviamente qui, ciò che accade su ValueChange e anche ciò che passiamo a valore differisce. 100 00:08:48,930 --> 00:08:57,230 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 101 00:08:57,310 --> 00:09:03,490 qui per onValueChange, indicherò semplicemente gli oggetti di scena. onChange per esempio, ma ancora una volta tutti 102 00:09:03,490 --> 00:09:08,140 questi nomi di oggetti di scena dipendono totalmente da te perché sarai 103 00:09:08,140 --> 00:09:16,870 tu a usare quel componente e lo useremo ora qui, come questo, quindi componente autochiudente, dove ora possiamo impostare un'etichetta perché mi aspetto 104 00:09:16,870 --> 00:09:20,730 un supporto per l'etichetta qui, se lo hai chiamato in 105 00:09:20,800 --> 00:09:22,990 modo diverso, devi nominarlo in 106 00:09:22,990 --> 00:09:29,230 modo diverso qui ovviamente e l'etichetta ovviamente è GlutenFree perché sto per sostituire questo interruttore qui. 107 00:09:29,380 --> 00:09:35,830 Quindi dobbiamo passare in uno stato perché ho aggiunto un prop di stato qui per gestire il mio valore, 108 00:09:35,830 --> 00:09:39,610 se lo hai chiamato in modo diverso, devi nominarlo in modo 109 00:09:39,620 --> 00:09:42,970 diverso anche lì e qui indicherò isGlutenFree, al mio 110 00:09:42,970 --> 00:09:45,120 stato e alle esigenze di 111 00:09:45,130 --> 00:09:49,840 onChange da fornire perché qui sto usando il prop onChange per collegarlo a onValueChange. 112 00:09:49,840 --> 00:09:55,990 Quindi questo dovrebbe puntare a una funzione e ovviamente qui, terrò semplicemente questa funzione 113 00:09:55,990 --> 00:10:03,550 qui e dato che uso solo onChange qui per inoltrarlo a onValueChange, otteniamo anche il nuovo argomento value qui. 114 00:10:04,870 --> 00:10:10,480 Ora possiamo liberarci di questa vista laggiù e semplicemente usare il nostro componente di commutazione del filtro e ora 115 00:10:10,510 --> 00:10:13,270 semplicemente ripetere ciò che è ovviamente molto più facile. 116 00:10:13,270 --> 00:10:23,450 Quindi ora qui possiamo avere anche Lattosio, Vegani e Vegetariani e ora dobbiamo 117 00:10:24,490 --> 00:10:34,740 aggiungere tre nuovi stati, quindi qui lasciatemi replicare, abbiamo Lattosio Libero e impostiamo Lattosio 118 00:10:34,740 --> 00:10:39,210 Gratuito, qui abbiamo Isgano e impostiamo 119 00:10:39,270 --> 00:10:42,720 Isgano e qui abbiamo 120 00:10:48,010 --> 00:10:51,000 Isgiante impostare isVegetarian. 121 00:10:51,020 --> 00:10:57,740 Ora dobbiamo solo assicurarci di usare gli stati nei posti giusti, quindi per il secondo interruttore 122 00:10:57,760 --> 00:11:02,220 del filtro in cui abbiamo il filtro lattosio, inoltro lo stato 123 00:11:02,250 --> 00:11:09,100 isLactoseFree e aggiorno il set isLactoseFree ovviamente. Per il passaggio vegan, inoltro 124 00:11:09,160 --> 00:11:17,980 isVegan e lo aggiorniamo con set isVegan e per i vegetariani, inoltriamo isVegetarian e 125 00:11:17,980 --> 00:11:22,060 aggiorniamo set isVegetarian, in questo modo. 126 00:11:25,410 --> 00:11:25,880 OK, 127 00:11:25,970 --> 00:11:31,790 dovrebbe essere così, se ora lo salviamo, dovremmo avere una schermata di filtro con i nostri diversi filtri che possiamo 128 00:11:31,790 --> 00:11:36,770 impostare in modo indipendente perché abbiamo stati indipendenti. Penso che sarebbe bello avere un 129 00:11:36,770 --> 00:11:43,610 po 'di spazio tra queste righe, quindi implementiamo questo. Sul nostro contenitore di filtri qui, possiamo semplicemente aggiungere 130 00:11:43,610 --> 00:11:50,570 un margine verticale di diciamo 10 o 50 forse, un po 'di più e questo dovrebbe assicurarci di avere un 131 00:11:50,570 --> 00:11:51,970 po' di spazio 132 00:11:52,130 --> 00:11:54,550 lì, sì e questo sembra abbastanza carino.