1 00:00:02,230 --> 00:00:08,380 Quindi abbiamo dato uno sguardo dettagliato a dimensioni, orientamenti e rendering di stili e layout diversi in base alla 2 00:00:08,380 --> 00:00:14,030 larghezza e altezza disponibili e anche a come reagire alle variazioni di larghezza e altezza quando si 3 00:00:14,080 --> 00:00:17,010 ruota il dispositivo, ad esempio, cose molto importanti. 4 00:00:17,680 --> 00:00:22,900 Vediamo ora come è possibile eseguire il rendering di stili o layout diversi o di ciò che si desidera 5 00:00:23,080 --> 00:00:25,660 in base alla piattaforma su cui si sta eseguendo. 6 00:00:25,660 --> 00:00:31,120 Al momento abbiamo sostanzialmente un'app identica su iOS e Android con un'eccezione e questo è il 7 00:00:31,120 --> 00:00:32,240 nostro pulsante qui. 8 00:00:32,320 --> 00:00:38,320 I pulsanti sembrano diversi perché il componente pulsante che stiamo utilizzando è un componente inserito in React Native 9 00:00:38,320 --> 00:00:46,060 ed è uno dei rarissimi, in realtà l'unico componente offerto da React Native che si regola automaticamente in base alla piattaforma su cui è 10 00:00:46,060 --> 00:00:49,310 in esecuzione la tua app, nessun altro componente lo fa 11 00:00:49,390 --> 00:00:56,290 davvero, ma ovviamente puoi scrivere codice per adattare i tuoi stili, la logica del layout, qualunque cosa tu voglia in base 12 00:00:56,320 --> 00:01:01,000 alla piattaforma su cui stai girando. Per vedere un esempio, andiamo al 13 00:01:01,000 --> 00:01:04,170 nostro componente header e lì, lavoriamo sul modo in 14 00:01:04,180 --> 00:01:08,020 cui presentiamo questo header. Su Android potremmo avere 15 00:01:08,020 --> 00:01:12,810 questo colore di sfondo e quindi del testo davanti, su iOS potremmo voler 16 00:01:12,820 --> 00:01:19,240 avere un colore di sfondo bianco e avere solo un bordo sottile nella parte inferiore e invece 17 00:01:19,240 --> 00:01:21,750 avere il testo nel nostro colore primario, 18 00:01:21,760 --> 00:01:25,270 che sarebbe un aspetto iOS più tipico dopo tutto. 19 00:01:25,360 --> 00:01:31,810 Ora per scoprire su quale piattaforma stai eseguendo, React Native ti ha coperto, ha l'oggetto piattaforma in cui 20 00:01:32,110 --> 00:01:37,630 le dimensioni ti aiutano a scoprire le dimensioni del dispositivo su cui stai correndo, la 21 00:01:37,630 --> 00:01:41,750 piattaforma ti aiuta a scoprire la piattaforma del dispositivo stai correndo. 22 00:01:41,910 --> 00:01:45,270 Quindi ora qui negli stili che stavi creando, 23 00:01:45,270 --> 00:01:48,660 potremmo rendere un colore di sfondo diverso basato su quello. 24 00:01:48,810 --> 00:01:53,310 Possiamo usare la piattaforma e ora lì, hai un paio di proprietà 25 00:01:53,310 --> 00:02:01,170 che puoi usare e per esempio hai la proprietà del sistema operativo e il sistema operativo è fondamentalmente il sistema operativo 26 00:02:01,170 --> 00:02:02,220 ed è 27 00:02:02,220 --> 00:02:05,670 uno dei valori che vedi qui, soprattutto iOS o Android. 28 00:02:05,700 --> 00:02:12,000 Quindi qui possiamo verificare se questo è uguale a diciamo Android e in questo caso, ho impostato il 29 00:02:12,000 --> 00:02:13,570 mio colore di sfondo 30 00:02:13,770 --> 00:02:20,130 su colori primari ma se non è Android e quindi se è iOS, ho impostato questo per dire bianco. 31 00:02:20,130 --> 00:02:28,800 Ora, se lo facciamo e lo salviamo, vediamo un'intestazione bianca qui sul dispositivo iOS e un'intestazione colorata 32 00:02:28,980 --> 00:02:31,090 sul dispositivo Android. 33 00:02:31,260 --> 00:02:36,960 Ora, ovviamente, non è necessario impostare alcun listener sulla piattaforma e non offre tale funzionalità 34 00:02:37,140 --> 00:02:42,090 perché la piattaforma non può cambiare mentre l'app è in esecuzione, ovviamente 35 00:02:42,090 --> 00:02:43,800 lo stesso sistema operativo. 36 00:02:43,830 --> 00:02:46,240 Ora finiamo lo styling per iOS. 37 00:02:46,650 --> 00:02:53,340 Ho detto che voglio avere un bordo sottile nella parte inferiore, quindi possiamo aggiungere un 38 00:02:53,340 --> 00:03:01,410 colore inferiore del bordo e controllare la piattaforma e se il sistema operativo è uguale a iOS, quindi voglio 39 00:03:01,410 --> 00:03:07,950 impostare il colore inferiore del bordo per dire questo grigiastro colore, altrimenti lo invierò 40 00:03:07,980 --> 00:03:16,350 al bianco o al trasparente in realtà in modo che non possiamo vederlo su Android e aggiungere un bordo inferiore 41 00:03:16,770 --> 00:03:25,590 con di diciamo e lì facciamo anche quel controllo per iOS di diciamo un pixel su iOS e zero su Android. 42 00:03:25,590 --> 00:03:31,410 Quindi ora non dovremmo vedere nulla su Android ma abbiamo quel bordo sottile qui su iOS. 43 00:03:31,530 --> 00:03:39,530 Ultimo ma non meno importante, coloriamo il testo andando al testo del titolo qui e il testo del titolo si fonde effettivamente in tutti gli stili che abbiamo impostato 44 00:03:39,590 --> 00:03:42,400 sul puntello di stile, quindi qui sul testo del 45 00:03:42,770 --> 00:03:48,950 titolo, possiamo aggiungere un puntello di stile e puntare agli stili. titolo qui o come si desidera 46 00:03:48,960 --> 00:03:55,440 nominarlo e aggiungere un oggetto stile titolo qui nel nostro foglio di stile in cui 47 00:03:55,860 --> 00:04:01,380 impostiamo il colore che è il colore del testo basato anche sulla piattaforma. 48 00:04:01,770 --> 00:04:08,970 Se si tratta di iOS, supponiamo di impostarlo su colori. primario e altrimenti, impostiamolo su bianco, prima era 49 00:04:08,970 --> 00:04:09,830 nero, 50 00:04:09,840 --> 00:04:11,700 ora impostiamolo su bianco. 51 00:04:11,700 --> 00:04:18,990 Ora abbiamo un titolo bianco qui su Android ma un titolo colorato qui su iOS e questo è quanto è facile impostare diversi stili 52 00:04:18,990 --> 00:04:22,600 in base alla piattaforma su cui si sta eseguendo, come si 53 00:04:22,620 --> 00:04:23,400 può vedere.