1
00:00:02,240 --> 00:00:04,430
Ora questa è anche una buona pratica

2
00:00:04,460 --> 00:00:09,440
per te, puoi mettere in pausa il video qui e provare a posizionare questi due pulsanti uno accanto all'altro

3
00:00:09,440 --> 00:00:15,190
da solo, solo i due pulsanti, non l'ingresso e i due pulsanti, ma questi due pulsanti dovrebbero essere in un nuova riga

4
00:00:15,200 --> 00:00:17,430
sotto l'ingresso ma poi sedersi l'una accanto all'altra.

5
00:00:17,570 --> 00:00:23,610
Dopo la breve pausa che puoi utilizzare per mettere in pausa il video, ovviamente lo faremo insieme.

6
00:00:23,650 --> 00:00:25,440
Quindi hai avuto successo?

7
00:00:25,450 --> 00:00:26,950
Proviamolo insieme.

8
00:00:26,990 --> 00:00:34,670
La chiave qui è usare flexbox e un'altra vista perché, come ho già detto in precedenza e, come è davvero importante capire,

9
00:00:34,670 --> 00:00:41,530
visualizzare i componenti è il componente principale per l'organizzazione di altri componenti o per essere utilizzato come contenitore che è

10
00:00:41,530 --> 00:00:43,570
possibile anche definire come stile,

11
00:00:43,600 --> 00:00:49,610
ma qui in questo caso, per organizzare altri componenti. Quindi sposterò i due pulsanti all'interno di quella

12
00:00:49,720 --> 00:00:55,720
vista e ora possiamo assegnare uno stile a quella vista e quello stile ovviamente sarà

13
00:00:55,750 --> 00:00:59,660
definito qui nel nostro oggetto stile e chiamerò questo contenitore

14
00:00:59,710 --> 00:01:06,400
di pulsanti, dipende da te, questo nome e lì dentro, voglio impostare una direzione flessibile della riga

15
00:01:06,400 --> 00:01:13,360
per farli sedere uno accanto all'altro e quindi, imposterò giustificare il contenuto dello spazio tra per avere lo

16
00:01:13,360 --> 00:01:16,330
spazio libero tra i due pulsanti.

17
00:01:16,340 --> 00:01:25,190
Ora aggiungiamo lo stile qui a quella vista, il contenitore dei pulsanti degli stili e salviamo questo e ora ecco i

18
00:01:25,190 --> 00:01:32,420
pulsanti ma avere lo spazio libero ha un effetto qui, che sarà ancora più chiaro su Android, che

19
00:01:32,420 --> 00:01:34,900
al momento non ha alcun

20
00:01:35,000 --> 00:01:37,880
effetto, in modo che lo spazio tra

21
00:01:37,910 --> 00:01:41,820
non abbia alcun effetto, lasciatemelo mostrare rapidamente su Android.

22
00:01:42,030 --> 00:01:42,410
Vedi,

23
00:01:42,420 --> 00:01:43,890
non c'è spazio libero.

24
00:01:43,920 --> 00:01:47,790
Il motivo è semplicemente che non abbiamo alcuna larghezza assegnata al nostro contenitore di pulsanti

25
00:01:47,790 --> 00:01:48,200
e

26
00:01:48,210 --> 00:01:50,100
quindi, come hai appreso, prende solo la

27
00:01:50,370 --> 00:01:52,660
larghezza dei bambini e che è semplicemente la larghezza

28
00:01:52,710 --> 00:01:53,820
dei due pulsanti

29
00:01:53,940 --> 00:01:56,570
aggiunti insieme, quindi non c'è spazio libero per aggiungere tra.

30
00:01:56,610 --> 00:02:01,410
Quindi abbiamo un po 'di spazio libero in mezzo, dobbiamo semplicemente assegnare un con al contenitore dei pulsanti

31
00:02:01,530 --> 00:02:05,800
e ora quella larghezza dipende ovviamente da te. Dato che l'input ha l'80%,

32
00:02:05,820 --> 00:02:14,340
potremmo andare anche qui con l'80% o forse con il 60% per renderlo un po 'più stretto dell'input sopra, in

33
00:02:14,400 --> 00:02:20,130
modo che i pulsanti non si trovino sui bordi dell'input ma ovviamente a

34
00:02:20,130 --> 00:02:21,090
te

35
00:02:21,090 --> 00:02:27,060
e quindi ora con questo se questo si ricarica e lo guardiamo su Android

36
00:02:27,060 --> 00:02:33,390
usando questo comodo modo di chiuderlo e riavviarlo, ora dovremmo vedere un po 'di spazio

37
00:02:33,390 --> 00:02:34,930
libero tra questi due

38
00:02:34,950 --> 00:02:36,730
pulsanti, sì, sta bene.

39
00:02:36,770 --> 00:02:38,700
E ovviamente puoi giocare con quello,

40
00:02:38,730 --> 00:02:42,830
puoi anche in alternativa aggiungere stili ai pulsanti, puoi anche aggiungere

41
00:02:42,840 --> 00:02:49,440
oggetti di stile qui e aggiungere un margine a sinistra e a destra di ciascun pulsante, che avrebbe

42
00:02:49,440 --> 00:02:50,510
funzionato anche.

43
00:02:50,520 --> 00:02:56,250
Puoi anche giocare con altri valori qui, come lo spazio intorno per avere lo spazio libero a sinistra e a destra

44
00:02:56,250 --> 00:02:58,710
dei pulsanti e non solo tra di loro.

45
00:02:58,770 --> 00:03:03,000
Queste sono tutte cose che puoi fare, andrò con lo spazio qui intorno e darò un'ultima occhiata a

46
00:03:03,000 --> 00:03:06,000
questo, ma alla fine è ovviamente semplicemente qualcosa che dipende da te.

47
00:03:06,030 --> 00:03:11,400
Importante qui è ovviamente che tu capisca come puoi ottenere qualcosa con l'aiuto di una vista

48
00:03:11,550 --> 00:03:15,390
che avvolgi i tuoi pulsanti e la tua flexbox quindi e

49
00:03:15,600 --> 00:03:18,900
con ciò, direi che qui abbiamo un aspetto decente.

50
00:03:19,110 --> 00:03:26,550
Ora un'ultima cosa, davvero l'ultima cosa che ora voglio ancora fare è ridimensionare questi pulsanti perché non sono ugualmente dimensionati e

51
00:03:26,550 --> 00:03:31,380
penso che sembrerebbe un po 'più bello se avessero le stesse dimensioni.

52
00:03:31,410 --> 00:03:37,920
Ora su un pulsante, non puoi aggiungere un puntello di stile e impostare una larghezza, non importa se stai

53
00:03:37,950 --> 00:03:40,700
usando stili incorporati o l'oggetto foglio

54
00:03:40,710 --> 00:03:44,050
di stile, ed è qualcosa che devi sapere che è

55
00:03:44,100 --> 00:03:51,860
il motivo per cui lo sto coprendo qui, devi avvolgere il tuo pulsante in una vista separata, come se lo facessi qui

56
00:03:52,070 --> 00:03:59,270
e quindi dare a quella vista un pulsante, ad esempio qui potremmo aggiungere un pulsante stili, facendo riferimento a una proprietà

57
00:03:59,270 --> 00:04:05,990
pulsante laggiù, a ciascuna vista e lì su questo proprietà del pulsante che sto aggiungendo ora, potresti aggiungere una

58
00:04:05,990 --> 00:04:08,780
larghezza di diciamo 40% e che sarà il

59
00:04:08,780 --> 00:04:15,440
40% del genitore di quella vista, quindi il 40% di quella vista contenitore pulsante che a sua volta occupa

60
00:04:16,220 --> 00:04:20,580
il 60% dell'intera larghezza disponibile e possiamo farlo anche sull'altro pulsante, ovviamente.

61
00:04:20,600 --> 00:04:28,010
Quindi è solo qualcosa che devi sapere se aggiungi le viste circostanti qui, attorno ai tuoi pulsanti.

62
00:04:28,010 --> 00:04:34,490
Ora con questo se riavviamo di nuovo Android, dovremmo avere pulsanti di uguali dimensioni che ovviamente

63
00:04:34,580 --> 00:04:36,710
sono qualcosa che desideri.

64
00:04:36,710 --> 00:04:42,980
Ovviamente avresti potuto usare un valore in pixel qui invece di valori percentuali, ma ora con quello, sono davvero

65
00:04:43,220 --> 00:04:44,710
felice, penso che

66
00:04:44,780 --> 00:04:48,590
ora sia davvero un'app che sta bene, si comporta bene e

67
00:04:48,710 --> 00:04:51,320
sì, è un buon inizio con React Native.

68
00:04:51,320 --> 00:04:57,140
Ora, ovviamente, c'è molto di più che possiamo imparare e in cui ci immergeremo, molto di più che possiamo fare

69
00:04:57,140 --> 00:05:02,540
per quanto riguarda lo stile perché, come già accennato, questa non è certamente l'app più bella che tu abbia

70
00:05:03,110 --> 00:05:05,990
mai costruito, ma abbiamo coperto molti fondamentali fondamentali Qui.