1 00:00:02,350 --> 00:00:05,320 Con ciò, abbiamo aggiunto le schede e sì, 2 00:00:05,330 --> 00:00:06,970 sui preferiti, non stiamo 3 00:00:06,970 --> 00:00:08,370 ancora facendo nulla, 4 00:00:08,380 --> 00:00:14,070 è qualcosa che seguiremo ma abbiamo almeno schede. Prima di lavorare sui preferiti, lavoriamo un po 5 00:00:14,070 --> 00:00:19,620 'di più sulle schede perché in questo momento, abbiamo schede su Android che non sembrano proprio come 6 00:00:19,620 --> 00:00:25,080 ci aspetteremmo che le schede Android sembrino, assomigliano più alle schede iOS se mi chiedi . 7 00:00:25,080 --> 00:00:27,840 Certo che funziona e puoi mantenerlo se questo è 8 00:00:27,840 --> 00:00:33,090 lo stile che desideri, niente di sbagliato in questo, ma sarebbe meglio avere un aspetto più specifico di 9 00:00:33,090 --> 00:00:39,300 Android forse e per questo, abbiamo un navigatore separato che possiamo creare, anche se dobbiamo installare un pacchetto aggiuntivo per questo 10 00:00:39,390 --> 00:00:41,180 prima di tutto, quindi facciamolo. 11 00:00:41,860 --> 00:00:45,660 Permettetemi di uscire da quel server qui ed eseguire npm 12 00:00:45,660 --> 00:00:53,490 install --save e ora questo è reagire-navigazione-materiale-schede-in basso, a proposito c'è anche reagire-navigazione-materiale-schede-in-alto, non mi immergerò in quello questo 13 00:00:53,490 --> 00:00:58,920 corso qui ma in allegato trovi anche un link dove puoi saperne di 14 00:00:59,130 --> 00:01:04,170 più su quel navigatore alternativo. Useremo il navigatore delle schede 15 00:01:04,170 --> 00:01:09,130 in basso del materiale qui e installeremo questo pacchetto, ecco come iniziamo. 16 00:01:09,150 --> 00:01:13,800 Quindi aspettiamo che l'installazione finisca e, successivamente, installiamo un altro 17 00:01:13,890 --> 00:01:25,240 pacchetto di cui avremo bisogno anche con npm install --save e che è reagente-nativo-carta. Quindi installiamo anche questo e una volta terminata l'installazione, riavviamo il server 18 00:01:25,240 --> 00:01:26,680 expo con 19 00:01:26,680 --> 00:01:28,720 npm start perché ora 20 00:01:28,810 --> 00:01:32,400 abbiamo installato pacchetti che ci aiutano a rendere 21 00:01:32,560 --> 00:01:37,940 un navigatore a schede alternativo ed è per fortuna davvero semplice 22 00:01:37,970 --> 00:01:43,780 da usare e ha praticamente lo stesso o molto opzioni di configurazione simili 23 00:01:43,780 --> 00:01:48,730 a quelle del navigatore in basso, specialmente quando si tratta 24 00:01:48,730 --> 00:01:54,730 di impostare icone e così via. In allegato, trovi tutti i documenti per 25 00:01:55,000 --> 00:01:56,160 questo navigatore 26 00:01:56,290 --> 00:02:05,080 alternativo e per quello ancora un altro navigatore alternativo che ho citato e usiamolo importando da questo pacchetto di navigatore 27 00:02:05,080 --> 00:02:12,770 di recente-reazione-materiale-fondo-schede appena installato qui e da lì possiamo importare il creare funzione di navigazione della scheda 28 00:02:12,830 --> 00:02:14,310 inferiore materiale qui. 29 00:02:14,450 --> 00:02:18,950 Ora assicurati di avere anche importazioni dalla piattaforma perché ora ne avremo bisogno 30 00:02:18,950 --> 00:02:21,980 perché voglio usare questo navigatore al posto del navigatore 31 00:02:21,980 --> 00:02:31,070 Crea scheda inferiore solo se siamo su Android. Quindi qui possiamo verificare se la piattaforma. os è uguale ad Android e in quel 32 00:02:31,070 --> 00:02:36,830 caso, voglio usare quella nuova funzione di navigazione nella scheda inferiore del materiale che ho 33 00:02:36,830 --> 00:02:37,680 appena importato, 34 00:02:37,740 --> 00:02:44,060 altrimenti dopo i due punti, useremo il navigatore della scheda inferiore che abbiamo impostato nella lezione precedente. 35 00:02:44,060 --> 00:02:50,880 Quindi questo ovviamente ci lascia con una domanda: come funziona il navigatore della scheda inferiore materiale? Come lo configuriamo? 36 00:02:50,990 --> 00:02:56,750 E la buona notizia qui è, generalmente funziona come il navigatore in basso. 37 00:02:56,750 --> 00:03:01,100 Ci sono alcuni dettagli che puoi configurare sul navigatore delle schede 38 00:03:01,100 --> 00:03:05,670 stesso, quindi ad esempio quale colore assumere, quando e così via differisce 39 00:03:05,690 --> 00:03:12,210 ma riguardo al modo in cui imposti le tue schede e abbini le schermate e le icone 40 00:03:12,350 --> 00:03:18,650 delle impostazioni, è esattamente lo stesso e quindi noi puoi effettivamente prendere l'intera configurazione dello schermo qui, 41 00:03:18,650 --> 00:03:24,350 tagliarlo da qui e archiviarlo in una costante separata qui che chiamerò tabScreenConfig, puoi nominarlo 42 00:03:24,350 --> 00:03:25,990 come vuoi perché 43 00:03:26,240 --> 00:03:33,070 può essere riutilizzato e ora usa tabScreenConfig come primo argomento sia nel navigatore della scheda inferiore e nel 44 00:03:33,080 --> 00:03:40,010 navigatore della scheda inferiore materiale, proprio come questo e questo ci lascia solo con un secondo argomento alternativo che 45 00:03:40,160 --> 00:03:45,290 passiamo al navigatore della scheda inferiore materiale e solo al navigatore della scheda inferiore. 46 00:03:45,290 --> 00:03:51,330 Questo secondo argomento che passiamo, questo oggetto che passiamo come secondo argomento, come hai appreso, ci consente di configurare 47 00:03:51,330 --> 00:03:56,730 il navigatore delle schede stesso, ad esempio impostare opzioni della barra delle schede come il colore 48 00:03:56,990 --> 00:04:05,480 di tinta attivo e che differisce un po 'perché per il navigatore della scheda inferiore del materiale , non impostiamo le opzioni della barra delle schede per 49 00:04:05,480 --> 00:04:07,950 configurare il nostro colore di tinta attivo, 50 00:04:07,970 --> 00:04:14,530 invece abbiamo direttamente un colore di tinta attivo qui in questo oggetto stesso, nel navigatore della scheda inferiore, lo avevamo in 51 00:04:14,570 --> 00:04:17,330 un oggetto nidificato, nelle opzioni della barra di schede 52 00:04:17,330 --> 00:04:18,950 , non l'abbiamo qui. 53 00:04:18,950 --> 00:04:24,590 Invece qui, impostiamo solo il colore di tinta attivo come quello sui colori di accento e ci 54 00:04:24,590 --> 00:04:29,660 sono anche altre impostazioni, ad esempio puoi impostare lo spostamento su vero e mostrerò cosa 55 00:04:29,660 --> 00:04:30,800 fa questo e 56 00:04:30,890 --> 00:04:39,550 cosa fa falso in un secondo e con quello, per ora è tutto. Se ora lo salviamo, questo ricostruirà il nostro progetto e lo ricaricherà sullo 57 00:04:39,550 --> 00:04:42,980 schermo e abbiamo le stesse schede di prima su iOS, 58 00:04:42,980 --> 00:04:43,550 che 59 00:04:43,550 --> 00:04:45,140 non sono cambiate ma 60 00:04:45,140 --> 00:04:48,440 su Android, ora abbiamo quel navigatore di schede con 61 00:04:48,500 --> 00:04:53,200 aspetto più materiale qui dove possiamo ora cambia anche in questo modo ed è 62 00:04:53,240 --> 00:04:59,270 questo effetto di spostamento che vedi qui, che le schede crescono, che l'etichetta esiste solo sulla scheda che 63 00:04:59,270 --> 00:05:00,740 è attiva e se 64 00:05:00,860 --> 00:05:05,990 imposti lo spostamento su false qui a proposito, semplicemente non hai questo effetto, quindi hai 65 00:05:05,990 --> 00:05:08,390 sempre le tue etichette anche su Android. 66 00:05:08,390 --> 00:05:12,490 Quindi ora è un aspetto che assomiglia un po 'di 67 00:05:12,650 --> 00:05:19,990 più ad Android, ed è quindi un aspetto che vorrei avere qui e puoi farlo ancora di più. 68 00:05:20,070 --> 00:05:23,690 Diciamo che vogliamo cambiare l'intero colore di sfondo della barra delle 69 00:05:23,830 --> 00:05:25,150 schede qui a 70 00:05:25,320 --> 00:05:30,800 seconda della scheda selezionata e avere un buon effetto a catena che cambia questo lungo il percorso. 71 00:05:31,110 --> 00:05:36,360 Per questo, possiamo andare alla nostra configurazione dello schermo e lì alle opzioni di navigazione e lì, abbiamo l'icona 72 00:05:36,360 --> 00:05:37,780 della barra delle schede. 73 00:05:37,800 --> 00:05:42,760 Possiamo anche impostare un colore della barra delle schede qui quando questa scheda è 74 00:05:42,810 --> 00:05:51,160 selezionata per così dire e, ad esempio, impostarla sul colore primario dei colori e ora importante, questo ha effetto solo se si imposta lo 75 00:05:51,200 --> 00:05:58,850 spostamento su true, altrimenti questo puntello di colore della barra delle schede che sto impostando qui non avrà alcun effetto perché solo 76 00:05:58,850 --> 00:06:05,390 l'effetto di spostamento supporta questo e quello che ora avremo, l'effetto che ora avremo è che se lo salvo, 77 00:06:06,640 --> 00:06:12,810 ottengo lo stesso aspetto su iOS perché c'è la barra delle schede il colore non ha alcun effetto 78 00:06:13,030 --> 00:06:17,770 ma ora vedi, abbiamo davvero il nostro colore primario come sfondo se i pasti 79 00:06:17,770 --> 00:06:21,980 sono selezionati, se selezioniamo i preferiti, che cambiano con l'altro colore. 80 00:06:22,030 --> 00:06:27,940 Ora questo cambio di rotta non sembra così bello e quindi possiamo semplicemente cambiarlo dando anche al nostro schermo 81 00:06:27,940 --> 00:06:30,950 dei preferiti il suo colore della barra delle schede. 82 00:06:30,970 --> 00:06:36,430 Quindi potremmo dire nelle opzioni di navigazione della schermata dei preferiti accanto all'icona della barra delle schede, impostiamo il 83 00:06:36,900 --> 00:06:44,340 colore della barra delle schede lì sul colore dell'accento e quello che ora avremo è una barra delle schede di colore diverso che passa dal nostro colore 84 00:06:44,340 --> 00:06:51,250 primario per i pasti qui a questo colore di accento per i preferiti con questo piacevole effetto a catena e naturalmente il rovescio della medaglia 85 00:06:51,250 --> 00:06:56,910 è che non vediamo l'icona perché il colore di accento per il colore della barra delle schede non è una 86 00:06:56,910 --> 00:06:57,740 buona scelta 87 00:06:57,750 --> 00:07:01,020 se il nostro colore di tinta è anche un colore di accento. 88 00:07:01,020 --> 00:07:06,270 Quindi, se utilizziamo questo effetto, potremmo voler usare il bianco qui come un colore di tinta che possiamo 89 00:07:06,270 --> 00:07:13,020 sempre vedere sia sul colore principale che su quello di accento e quindi qui per il colore di tinta attivo, potremmo voler usare il 90 00:07:13,020 --> 00:07:18,750 bianco invece del nostro accento colore perché il bianco funzionerà per entrambe le schede, quindi non importa se la barra 91 00:07:18,750 --> 00:07:24,540 delle schede viene quindi colorata nel colore primario, quel viola scuro o nel colore accento, quell'arancione e quindi ora vedete 92 00:07:24,540 --> 00:07:26,640 che abbiamo questo effetto qui e questa 93 00:07:26,640 --> 00:07:32,610 piacevole increspatura cambia in l'altra scheda qui per i preferiti. E penso che sia un cambiamento piuttosto dolce e 94 00:07:32,730 --> 00:07:39,120 facile da implementare che rende questo aspetto fantastico su Android e sicuramente ci dà un aspetto simile ad 95 00:07:39,240 --> 00:07:45,660 Android più caratteristico pur mantenendo l'aspetto iOS predefinito che ti aspetteresti su quella piattaforma, è davvero facile da 96 00:07:45,660 --> 00:07:47,730 implementare come te Posso dire. 97 00:07:47,820 --> 00:07:52,700 Ora una breve nota a margine, se non vuoi usare questo effetto di 98 00:07:52,710 --> 00:07:58,020 spostamento che voglio usare qui ma se non vuoi usarlo, ovviamente potresti notare che il colore 99 00:07:58,020 --> 00:08:06,350 di sfondo delle tue schede su Android è non è il tuo colore principale ma invece è un po 'più chiaro di viola, viola-bluastro. 100 00:08:06,360 --> 00:08:09,060 Ora, in genere, potresti voler cambiare anche questo ovviamente e 101 00:08:09,060 --> 00:08:12,060 come vedi, il colore della barra delle schede semplicemente non ha 102 00:08:12,060 --> 00:08:14,080 alcun effetto, funziona solo con lo spostamento. 103 00:08:14,310 --> 00:08:21,330 Ora se vuoi cambiare il colore di sfondo per l'intera barra delle schede nel caso senza spostamento, tutto ciò 104 00:08:21,330 --> 00:08:29,570 che devi fare è qui sulla configurazione del navigatore delle schede stesso perché influisce ora sull'intera barra delle schede, puoi impostare una proprietà 105 00:08:29,570 --> 00:08:30,410 di stile 106 00:08:30,410 --> 00:08:36,980 barra e che è semplicemente un oggetto di stile in cui è possibile ad esempio impostare il colore 107 00:08:36,980 --> 00:08:43,240 di sfondo su colori primari, come questo e questo cambia semplicemente il colore di sfondo della 108 00:08:43,240 --> 00:08:47,180 barra di navigazione per la nostra barra inferiore Android qui. 109 00:08:47,180 --> 00:08:52,750 Quindi è così che puoi cambiare questo se non vuoi usare qui il modello di spostamento, 110 00:08:52,790 --> 00:08:53,860 l'aspetto del cambio. 111 00:08:54,080 --> 00:08:56,000 Attiverò di nuovo lo spostamento, tuttavia, 112 00:08:56,010 --> 00:09:01,370 lo imposteremo di nuovo perché mi piace molto questa barra delle schede di colore diverso, penso 113 00:09:01,370 --> 00:09:07,100 che sia davvero bello con quell'effetto a catena che cambia il colore ed è così facile implementare 114 00:09:07,130 --> 00:09:08,660 diversi barre delle schede. 115 00:09:08,660 --> 00:09:13,820 Ancora una volta, ci sono un sacco di opzioni di configurazione sia per la barra delle schede stessa che per le 116 00:09:13,820 --> 00:09:18,590 opzioni di navigazione delle schermate che hai all'interno della barra delle schede e quindi trovi i documenti ufficiali allegati 117 00:09:18,590 --> 00:09:22,490 in cui puoi immergerti in ogni singola opzione ed esplorare e giocare con loro.