1
00:00:02,200 --> 00:00:04,720
Ci sono un paio di cose in

2
00:00:04,740 --> 00:00:08,950
cui potremmo continuare ma voglio continuare con il contenitore di input, che è il

3
00:00:08,980 --> 00:00:15,340
contenitore attorno a questi input, quindi intorno al testo di selezione di un numero, attorno al input di testo qui e attorno

4
00:00:15,340 --> 00:00:18,970
ai pulsanti e questo contenitore ha un larghezza e allinea gli oggetti,

5
00:00:18,970 --> 00:00:21,820
ma come ho descritto prima, sarebbe bello avere quella carta

6
00:00:21,820 --> 00:00:27,410
per guardare lì e per questo, abbiamo bisogno di alcuni stili più esotici che suonino davvero fantasiosi ma semplicemente

7
00:00:27,410 --> 00:00:30,450
alcune regole di stile che non abbiamo mai usato prima.

8
00:00:30,470 --> 00:00:34,080
Ad esempio, voglio aggiungere un'ombra, una leggera ombra

9
00:00:34,110 --> 00:00:43,310
esterna e lo fai con quattro proprietà principali che puoi usare. Un colore, un offset, un'opacità e un raggio.

10
00:00:43,310 --> 00:00:46,760
Ora un colore dell'ombra dovrebbe essere chiaro, è il colore della tua ombra.

11
00:00:46,760 --> 00:00:50,210
Lo scostamento dell'ombra è quanto lo scostamento dal contenitore e

12
00:00:50,210 --> 00:00:54,290
che effettivamente prende l'oggetto che a sua volta prende una larghezza e un'altezza,

13
00:00:54,290 --> 00:00:59,390
quindi si potrebbe dire che voglio compensare l'ombra di due pixel rispetto alla larghezza e di

14
00:00:59,390 --> 00:01:07,220
due pixel rispetto all'altezza , ciò influenza l'effetto tridimensionale che stai creando. L'opacità descrive quanto sia trasparente questa ombra, se si imposta l'opacità

15
00:01:07,280 --> 00:01:08,990
su 1, allora si

16
00:01:08,990 --> 00:01:15,950
ha un'ombra totalmente in trasparente, quindi un'ombra forte molto visibile e se si aumenta quello o si diminuisce quello che

17
00:01:15,950 --> 00:01:21,800
dovrei dire, se lo si imposta su 0. 1 ad esempio, hai un'ombra

18
00:01:21,950 --> 00:01:28,910
che riesci a malapena a vedere. Il raggio dell'ombra descrive quindi quanto sia nitida

19
00:01:28,910 --> 00:01:35,290
quell'ombra, se ha bordi irregolari o se è un po 'più sfocata, più morbida, cose del genere.

20
00:01:35,330 --> 00:01:40,610
Quindi qui, andrò con un colore dell'ombra di nero, dal modo in cui puoi anche usare

21
00:01:40,610 --> 00:01:47,720
codici esadecimali qui se vuoi e puoi anche usare codici RGBA se preferisci questo, o normali codici RGB in realtà o anche con

22
00:01:47,870 --> 00:01:53,270
un alfa canale per descrivere la trasparenza qui. Anche se la trasparenza qui non avrà

23
00:01:53,270 --> 00:01:59,030
un'influenza diretta, per l'ombra dovrai impostarla con l'opacità dell'ombra. Per altri colori, avrebbe un'influenza ma questa

24
00:01:59,030 --> 00:02:04,100
è solo una nota a margine. In allegato, troverai un link con maggiori

25
00:02:04,100 --> 00:02:09,260
dettagli su come configurare i colori e quali valori di colore accetta React Native perché, ovviamente, è

26
00:02:09,260 --> 00:02:14,030
molto più esaustivo di quello che posso mostrare qui, andrò semplicemente con il nome perché

27
00:02:14,030 --> 00:02:20,420
voglio un nero colore, quindi perché non andare con quella scorciatoia? Ora oltre al colore, qui l'ombra riceverà anche un

28
00:02:20,510 --> 00:02:23,990
offset e come ho detto, offset qui prende un oggetto.

29
00:02:23,990 --> 00:02:31,040
Ora, nel caso ti chiedi come lo so, per uno che mi dice il mio IDE, se comincio a digitare shadow offset

30
00:02:31,040 --> 00:02:36,530
qui, vedi quel suggerimento che ottengo sulla destra, dovresti normalmente ottenere anche questo, ma nel caso in

31
00:02:36,530 --> 00:02:42,830
cui non lo sapessi ottieni questo, i documenti ufficiali sono ovviamente il posto dove andare e lì, sempre sotto guide,

32
00:02:42,830 --> 00:02:49,100
componenti e API, puoi fare clic sul componente di visualizzazione lì o semplicemente fare clic sui documenti API qui

33
00:02:49,100 --> 00:02:57,800
nell'angolo in alto a destra e quindi scegliere la tua vista qua e là, troverai alcuni oggetti di scena e poi puoi trovare un elenco di tutti

34
00:02:57,860 --> 00:03:03,890
gli stili di vista supportati e ovviamente anche come configurarli e lì, ad esempio, hai imparato che l'offset dell'ombra

35
00:03:03,890 --> 00:03:10,040
è un oggetto con un numero e un'altezza. Per il colore, hai imparato che questo prende un

36
00:03:10,040 --> 00:03:14,630
colore ed è esattamente il link che trovi allegato qui, dove ha descritto quale

37
00:03:14,630 --> 00:03:16,740
tipo di colori puoi usare.

38
00:03:17,030 --> 00:03:24,020
Quindi questa è solo una piccola nota a margine, qui userò un offset dell'ombra con una larghezza di zero

39
00:03:24,020 --> 00:03:32,030
ma un'altezza di 2 in modo che la mia ombra sia leggermente spostata verso il basso, per così dire, non tanto a

40
00:03:32,030 --> 00:03:40,310
destra, quindi in realtà non è affatto a destra e quindi aggiungerò anche un raggio d'ombra che è un numero di proviamo sei

41
00:03:40,310 --> 00:03:41,870
e vediamo cosa fa

42
00:03:42,650 --> 00:03:49,970
e, ultimo ma non meno importante, un'opacità dell'ombra di 0. 26 che è relativamente trasparente ma che a mio

43
00:03:49,970 --> 00:03:51,610
avviso sembra abbastanza carino.

44
00:03:51,850 --> 00:03:58,480
Inoltre, darò al mio contenitore di input un colore di sfondo bianco per assicurarmi che sia sempre bianco e

45
00:03:58,480 --> 00:04:03,370
non trasparente, che altrimenti è l'impostazione predefinita in modo che se avessimo un altro

46
00:04:03,370 --> 00:04:08,890
colore di sfondo dietro il contenitore, diciamo come colore di base di l'intero schermo, il contenitore

47
00:04:08,920 --> 00:04:11,100
qui avrebbe sempre uno sfondo bianco.

48
00:04:11,140 --> 00:04:16,180
Ora con ciò, se salvi questo, dovresti vedere un'ombra simile a questa su

49
00:04:16,180 --> 00:04:20,190
iOS ma non vedi alcuna ombra su Android e non è

50
00:04:20,410 --> 00:04:28,120
un bug, invece le proprietà dell'ombra qui funzionano solo su iOS e questo lascia un aspetto importante domanda, come puoi

51
00:04:28,120 --> 00:04:32,820
impostare un'ombra su Android allora? Non è possibile?

52
00:04:33,070 --> 00:04:39,610
È ma lì hai un supporto di stile speciale, l'elica di elevazione. Funziona solo su Android come mostra anche la

53
00:04:39,610 --> 00:04:48,280
descrizione comando, piattaforma Android mentre le proprietà dell'ombra funzionano solo su iOS. Ora l'elevazione richiede semplicemente un numero di diciamo 5 e

54
00:04:48,280 --> 00:04:55,090
quindi utilizza l'elevazione del design del materiale Android predefinito, quindi hai meno controllo lì, ma d'altra parte,

55
00:04:55,090 --> 00:05:00,130
ottieni l'aspetto del design del materiale predefinito a cui i tuoi utenti

56
00:05:00,130 --> 00:05:06,070
potrebbero comunque essere abituati, quindi questo è la cosa buona di questo e ora abbiamo

57
00:05:06,340 --> 00:05:13,590
anche un'ombra qui su Android e su iOS. Su iOS, noterai anche che l'ombra è visibile a sinistra

58
00:05:13,590 --> 00:05:19,840
e a destra del riquadro, anche se ho dato a questo un offset dell'ombra di 0 per la

59
00:05:19,840 --> 00:05:25,480
larghezza, che può essere controllato con il raggio dell'ombra, tuttavia, se imposti l'ombra raggio a zero, poi

60
00:05:25,480 --> 00:05:30,970
vedi che hai solo l'ombra in cui hai definito il suo offset qui, quindi puoi assicurarti

61
00:05:30,970 --> 00:05:37,060
che l'ombra sia davvero lì solo dove vuoi. Se imposti un raggio d'ombra però e per impostazione predefinita,

62
00:05:37,060 --> 00:05:41,350
c'è anche un raggio d'ombra predefinito, ottieni questo effetto di fuoriuscita che è un'ombra più

63
00:05:41,350 --> 00:05:47,860
naturale dopo tutto, quindi qui è in realtà l'effetto che voglio. Ora, con quello, ho aggiunto un'ombra sia su Android

64
00:05:47,920 --> 00:05:53,500
usando l'ombra Android predefinita che su iOS. A proposito su Android, puoi ovviamente cambiare il

65
00:05:53,500 --> 00:05:59,950
livello di elevazione per giocare con diversi livelli di elevazione fino a quando non hai l'aspetto desiderato per la

66
00:05:59,950 --> 00:06:05,530
tua applicazione, in pratica hai abbastanza ombra. Ora oltre ad avere l'ombra qui,

67
00:06:05,530 --> 00:06:11,680
penso che sarebbe bello avere un po 'di imbottitura in questa scatola ora perché gli

68
00:06:11,680 --> 00:06:20,350
oggetti siedono troppo vicino ai bordi, dopotutto siedono direttamente sui bordi. Quindi, per cambiare questo, aggiungerò anche un po 'di padding

69
00:06:20,350 --> 00:06:26,440
qui e quello sarà di padding di 20 e ancora, questo è un valore che puoi

70
00:06:26,440 --> 00:06:33,910
sperimentare, trova il padding che preferisci personalmente e pensi che sia bello e se ci proviamo, ora sembra molto meglio.

71
00:06:33,970 --> 00:06:36,700
Inoltre, gli angoli arrotondati sarebbero

72
00:06:37,120 --> 00:06:45,870
una buona cosa, quindi aggiungerò qui un raggio del bordo di diciamo 10 per avere bordi leggermente arrotondati.

73
00:06:45,870 --> 00:06:52,940
Se ora lo salviamo, questo mi sembra abbastanza dolce su entrambe le piattaforme, su entrambi i dispositivi.

74
00:06:52,940 --> 00:06:54,740
Quindi questo è ora il contenitore

75
00:06:54,770 --> 00:06:58,570
di input, non possiamo vedere l'input e probabilmente i pulsanti dovrebbero avere le stesse

76
00:06:58,820 --> 00:07:00,950
dimensioni ma almeno il contenitore ora sembra buono.