1
00:00:02,330 --> 00:00:06,200
Ora a volte può essere ingombrante aggiungere un sacco di

2
00:00:06,200 --> 00:00:09,920
tali controlli e qui abbiamo già tre controlli nell'intestazione,

3
00:00:09,920 --> 00:00:14,070
per esempio, sicuramente qualcosa che possiamo aggiungere ma forse non ottimale.

4
00:00:14,480 --> 00:00:22,970
Invece di mantenere più puliti i nostri oggetti di stile, potremmo impostare qui un'intestazione di base,

5
00:00:23,360 --> 00:00:37,110
ad esempio header base e quindi aggiungere headerIOS e headerAndroid e ora ciò che facciamo è prendere tutti questi stili che cambiano in base alla piattaforma

6
00:00:37,110 --> 00:00:39,600
dallo stile di base, aggiungili

7
00:00:39,860 --> 00:00:44,830
qui a headerIOS e headerAndroid e su headerIOS, manteniamo

8
00:00:44,970 --> 00:00:51,020
solo l'aspetto iOS qui, così bianco, quindi questo colore per il bordo

9
00:00:56,160 --> 00:01:04,100
in basso e una larghezza di pixel di uno per quel bordo e qui su

10
00:01:04,200 --> 00:01:13,200
Android, rimuoviamo questo controllo e manteniamo il colore primario come colore di sfondo e, d'altra parte, ci

11
00:01:13,200 --> 00:01:19,800
liberiamo del nostro bordo usando questi valori o rimuovendolo completamente e non impostandolo

12
00:01:19,800 --> 00:01:20,970
affatto.

13
00:01:20,970 --> 00:01:28,590
Ora dobbiamo solo assicurarci di aggiungere headerIOS o headerAndroid e per questo, possiamo andare qui e impostare

14
00:01:28,690 --> 00:01:35,050
il nostro oggetto stili dove uniamo ora tutti gli stili base dell'intestazione, quindi questi

15
00:01:35,070 --> 00:01:45,500
sono sempre impostati ma ora anche noi può fondersi nel risultato della selezione della piattaforma che ora è un metodo che prende un

16
00:01:45,500 --> 00:01:54,770
oggetto in cui dobbiamo specificare una chiave iOS e puntare al valore o, in questo caso, l'oggetto che vogliamo usare

17
00:01:54,770 --> 00:02:02,270
se siamo su iOS che sono stili. headerIOS e aggiungere una chiave Android e puntare agli

18
00:02:02,270 --> 00:02:05,310
stili che headerAndroid e con ciò stiamo

19
00:02:05,540 --> 00:02:12,380
dicendo a React Native si prega di unire le proprietà del valore, in questo caso, un oggetto

20
00:02:12,380 --> 00:02:15,680
che stiamo selezionando per iOS e per Android.

21
00:02:15,680 --> 00:02:21,410
Quindi dovrai sempre passare un oggetto alla selezione della piattaforma e quindi hai valori diversi per iOS e Android

22
00:02:21,410 --> 00:02:26,390
e il valore qui potrebbe anche essere un numero, semplicemente non funzionerebbe qui perché qui ci

23
00:02:26,390 --> 00:02:32,350
aspettiamo un oggetto in modo che possiamo estrarre tutte le coppie di valori di proprietà e passarle al nostro stile circostante.

24
00:02:32,360 --> 00:02:37,310
Quindi qui un numero non ha senso ma puoi usare select con qualsiasi tipo di valore,

25
00:02:37,370 --> 00:02:38,960
qui abbiamo solo bisogno

26
00:02:39,020 --> 00:02:45,410
di un oggetto, quindi puntiamo agli oggetti headerIOS e headerAndroid. E con ciò, abbiamo un codice più snello, abbiamo

27
00:02:45,680 --> 00:02:51,110
stili più snelli laggiù e quindi abbiamo un codice con uno stile di base in cui utilizziamo la

28
00:02:51,110 --> 00:02:57,230
selezione della piattaforma per selezionare dinamicamente stili diversi in base alla piattaforma su cui stiamo eseguendo e quindi ora, abbiamo

29
00:02:57,230 --> 00:03:04,760
lo stesso aspetto di prima ma ora in un modo più elegante. Un altro posto nella nostra app in cui possiamo trarne

30
00:03:04,760 --> 00:03:11,360
vantaggio è il nostro pulsante principale qui. Il nostro pulsante principale appare e si sente lo stesso su entrambe le piattaforme,

31
00:03:11,480 --> 00:03:14,780
il che non è orribile, ma che potrebbe anche non essere quello che vogliamo.

32
00:03:15,590 --> 00:03:21,590
Se andiamo al nostro pulsante principale. js file, vediamo che usiamo sempre l'opacità tangibile qui ma in realtà

33
00:03:21,590 --> 00:03:23,940
su Android, potremmo voler usare l'effetto a catena.

34
00:03:23,990 --> 00:03:30,740
Ora per fortuna, React Native ha il componente di feedback nativo toccabile incorporato che in realtà ci dà

35
00:03:30,740 --> 00:03:33,830
un oggetto tangibile che ha un effetto

36
00:03:33,920 --> 00:03:38,730
a catena incorporato, quindi vogliamo usarlo su Android e opacità tangibile su iOS.

37
00:03:38,810 --> 00:03:44,300
Ora, naturalmente, possiamo usare l'API della piattaforma che quindi dobbiamo anche importare da React Native per

38
00:03:44,330 --> 00:03:47,510
utilizzare qui un componente diverso basato sulla piattaforma e

39
00:03:47,630 --> 00:03:52,520
per questo possiamo usare una funzionalità davvero accurata React non ha specifici di React

40
00:03:52,520 --> 00:03:54,200
Native ma possiamo usare

41
00:03:54,290 --> 00:04:00,200
in React in generale, possiamo impostare una variabile che inizia con un carattere maiuscolo in modo da poterlo

42
00:04:00,230 --> 00:04:07,430
usare come elemento jsx perché solo le variabili di carattere maiuscolo possono essere usate come elementi jsx e chiamiamo questo, diciamo componente

43
00:04:07,490 --> 00:04:12,170
pulsante, il nome dipende totalmente da te e, per impostazione predefinita, è un'opacità tangibile.

44
00:04:12,170 --> 00:04:19,730
Quindi indico qui l'oggetto di opacità toccabile, senza parentesi angolate, semplicemente indicandolo in questo modo.

45
00:04:19,730 --> 00:04:27,350
Ora possiamo aggiungere un controllo if e verificare se il sistema operativo della piattaforma è uguale ad Android e

46
00:04:27,350 --> 00:04:29,230
importante, controlla anche qualcos'altro

47
00:04:29,240 --> 00:04:37,210
sulla piattaforma, controlla anche se la versione della piattaforma è maggiore o uguale a 21 perché solo l'API Android versione

48
00:04:37,230 --> 00:04:40,040
21 o successiva supporta l'effetto a catena.

49
00:04:40,100 --> 00:04:46,130
Quindi, se entrambi sono veri, imposteremo il componente pulsante su un feedback nativo tangibile, quindi useremo quello

50
00:04:46,130 --> 00:04:50,480
con l'effetto a catena, altrimenti useremo quello con l'effetto di opacità.

51
00:04:50,600 --> 00:04:56,930
Quindi, se siamo su Android e la versione di Android è abbastanza alta, è 21

52
00:04:56,930 --> 00:05:03,350
o successiva, utilizziamo un feedback nativo tangibile. Ora, poiché lo chiamo con un carattere iniziale maiuscolo, possiamo

53
00:05:03,350 --> 00:05:12,260
usarlo qui invece di opacità tangibile nel nostro codice jsx, all'inizio sembra strano ma funzionerà perfettamente. Se ora salviamo questo e questo si

54
00:05:12,500 --> 00:05:22,640
riavvia, vedrai ora qui che hai quell'effetto a catena, puoi vederlo se teniamo premuto, vedi quell'effetto

55
00:05:22,640 --> 00:05:29,450
a catena sul pulsante. Non sembra ancora perfetto perché in realtà è

56
00:05:29,450 --> 00:05:33,350
rettangolare e non rispetta il nostro raggio del bordo e lo

57
00:05:33,350 --> 00:05:40,340
ripareremo ma funziona e d'altra parte qui su iOS, abbiamo l'effetto di opacità come puoi dire se lo premi.

58
00:05:40,340 --> 00:05:47,990
Quindi ora sistemiamo il raggio del bordo e possiamo farlo avvolgendolo con un'altra vista e questo è solo un

59
00:05:47,990 --> 00:05:51,780
piccolo trucco, un po 'di soluzione che devi conoscere.

60
00:05:52,010 --> 00:05:57,490
Lo avvolgiamo con un'altra vista in cui ho impostato uno stile di diciamo contenitore

61
00:05:58,480 --> 00:06:07,430
di pulsanti, aggiungiamo quello stile nel nostro foglio di stile e su quel contenitore di pulsanti qui che ora è avvolto intorno a

62
00:06:07,430 --> 00:06:08,640
tutto, ho

63
00:06:08,780 --> 00:06:17,910
impostato lo stesso raggio del bordo che ho impostato sul pulsante , quindi 25 in questo caso qui e aggiungo un overflow nascosto, il

64
00:06:18,000 --> 00:06:25,320
che significa che qualsiasi componente figlio che andrebbe oltre i confini di questi componenti, quindi del componente con questo

65
00:06:25,320 --> 00:06:31,170
stile è sostanzialmente troncato e questo garantirà che l'effetto a catena che ora è un

66
00:06:31,170 --> 00:06:36,670
il componente figlio di questa vista verrà ritagliato sui bordi arrotondati di questo pulsante.

67
00:06:37,210 --> 00:06:44,070
Quindi ora se lo salviamo e lo riproviamo, vedrai che l'effetto ondulazione riempie solo il pulsante, che

68
00:06:44,070 --> 00:06:50,200
ovviamente sembra molto meglio e su iOS ovviamente, abbiamo ancora lo stesso comportamento di prima.

69
00:06:51,070 --> 00:06:55,750
Quindi usare la piattaforma qui in un controllo if è anche qualcosa che possiamo fare ma

70
00:06:55,780 --> 00:07:01,180
possiamo anche usare questo trucco qui per renderizzare componenti totalmente diversi in base alla piattaforma su cui stiamo

71
00:07:01,180 --> 00:07:01,780
girando.