1
00:00:02,220 --> 00:00:08,250
Quindi ora con questi primi passaggi di base, se ora compilo un numero qui e continuiamo,

2
00:00:08,250 --> 00:00:10,330
questo mi sembra buono qui,

3
00:00:10,420 --> 00:00:12,980
tutto funziona, se ora iniziamo un gioco,

4
00:00:12,990 --> 00:00:19,560
allora voglio anche ridurre questo spazio che abbiamo qui e voglio anche assicurarmi che la mia scatola sia

5
00:00:19,560 --> 00:00:20,020
laggiù,

6
00:00:20,040 --> 00:00:23,240
quindi questo registro di ipotesi che abbiamo, che anche

7
00:00:23,250 --> 00:00:24,490
questo sembra migliore.

8
00:00:25,050 --> 00:00:29,820
Ora questo è qualcosa che possiamo fare ovviamente sullo schermo del gioco perché quello è lo schermo

9
00:00:29,820 --> 00:00:31,350
che stiamo attualmente visualizzando lì.

10
00:00:31,410 --> 00:00:37,410
Ora per uno ovviamente, è la spaziatura, questo margine superiore sul nostro contenitore inferiore che è questo contenitore, margine superiore è questa distanza

11
00:00:37,590 --> 00:00:43,370
tra il numero qui e il contenitore e voglio cambiarlo. Ora per cambiarlo, possiamo

12
00:00:43,510 --> 00:00:44,720
usare

13
00:00:44,760 --> 00:00:47,120
nuovamente l'API dimensioni.

14
00:00:47,280 --> 00:00:54,300
Quindi, qui, importa nuovamente le dimensioni da React Native e ora laggiù,

15
00:00:54,510 --> 00:01:03,630
possiamo calcolare questo margine in modo dinamico. Quello che possiamo fare qui è che possiamo nuovamente ottenere le dimensioni della

16
00:01:03,870 --> 00:01:09,630
nostra finestra e quindi qui, la larghezza o in questo caso, probabilmente l'altezza e quindi dividere questo

17
00:01:09,630 --> 00:01:17,430
per qualcosa ma questo sarebbe molto ingombrante, potremmo dividere questo per 20 per esempio , entro le 20 e vedi se sembra buono ma

18
00:01:17,430 --> 00:01:21,990
questo è davvero un gioco d'ipotesi, potrebbe non essere quello che vogliamo davvero.

19
00:01:22,230 --> 00:01:28,320
Potremmo invece verificare quanta altezza abbiamo a disposizione e quindi utilizzare una

20
00:01:28,320 --> 00:01:34,920
spaziatura diversa in base a quella. Potremmo verificare se la nostra altezza è maggiore di 600, in tal caso,

21
00:01:35,310 --> 00:01:41,490
vogliamo avere una spaziatura di 20, altrimenti ne abbiamo una su 10. Quindi possiamo anche usare le dimensioni che stiamo

22
00:01:41,490 --> 00:01:46,920
calcolando in una condizione if, in questo caso in un'espressione ternaria qui, ma puoi

23
00:01:46,920 --> 00:01:49,890
usarla anche in un normale controllo if.

24
00:01:49,970 --> 00:01:56,300
Quindi ora possiamo tornare qui e quello che vediamo ora è che quando iniziamo il gioco, non abbiamo un enorme

25
00:01:56,300 --> 00:02:01,580
spazio qui sullo schermo più piccolo, sull'iPhone che è uno schermo più grande, tuttavia abbiamo sicuramente

26
00:02:01,670 --> 00:02:05,960
un divario più grande e per vederlo più chiaramente, puoi ovviamente giocarci su

27
00:02:06,050 --> 00:02:12,690
e per esempio usare 30 per schermi più piccoli e 30 per schermi più grandi e 5 per schermi più

28
00:02:12,800 --> 00:02:15,170
piccoli e ora dovresti assolutamente vederlo.

29
00:02:15,350 --> 00:02:17,680
Qui abbiamo un piccolo gap

30
00:02:17,840 --> 00:02:20,450
e qui, abbiamo un gap più grande.

31
00:02:20,750 --> 00:02:23,540
Quindi possiamo anche usarlo in caso di condizioni.

32
00:02:23,540 --> 00:02:29,060
Ora, con questo, lo riporterò qui a 20 e 5, ma ora spero che questo mostri anche un altro

33
00:02:29,060 --> 00:02:30,110
modo di usarlo.

34
00:02:30,110 --> 00:02:34,700
Puoi usarlo in condizioni che ovviamente ti offrono molta flessibilità nei casi in cui

35
00:02:34,700 --> 00:02:40,670
non vuoi usare la larghezza in un calcolo dinamico ma hai diversi valori hardcoded che vuoi usare in

36
00:02:40,670 --> 00:02:46,730
base ai diversi punti di interruzione che vuoi impostato, un po 'come lo sai dai CSS, dove hai anche

37
00:02:46,730 --> 00:02:51,080
query multimediali e quindi puoi renderizzare cose diverse in base a query

38
00:02:51,080 --> 00:02:51,830
multimediali diverse.

39
00:02:52,070 --> 00:02:57,740
Inoltre, non sei limitato all'utilizzo dell'API delle dimensioni laggiù nel tuo foglio di stile, ovviamente, puoi usarlo ovunque

40
00:02:57,740 --> 00:03:04,100
dove puoi usare Javascript, quindi praticamente ovunque nei tuoi componenti. Puoi anche collegare stili completamente diversi in

41
00:03:04,130 --> 00:03:10,070
base alla larghezza o altezza disponibili. Potremmo anche usare le dimensioni qui

42
00:03:10,100 --> 00:03:18,050
finestra dove assegno il mio stile e, ad esempio, controlla la mia altezza qui, controlla se è maggiore di 600

43
00:03:18,050 --> 00:03:25,400
e, in tal caso, usa il contenitore di pulsanti di stili e, in caso contrario, usa il contenitore di

44
00:03:25,520 --> 00:03:31,520
pulsanti di stili piccolo se avessimo questo classe. Non ce l'ho qui, quindi me ne sbarazzerò, ma è un

45
00:03:31,670 --> 00:03:37,280
altro modo di usarlo, puoi usarlo ovunque esegua Javascript. Ovviamente puoi anche usarlo qui, potresti avere un

46
00:03:37,280 --> 00:03:45,690
if check qui prima di restituire il tuo codice jsx e controllare ottenere l'altezza della finestra, se è maggiore di 600 e in tal

47
00:03:45,690 --> 00:03:49,830
caso, diciamo, restituisci un codice jsx totalmente diverso e quindi questo codice

48
00:03:49,830 --> 00:03:55,910
da allora in poi non funzionerà mai se ritorni qui e solo se non ce la fai in

49
00:03:55,910 --> 00:03:57,230
questo se controlla,

50
00:03:57,230 --> 00:04:02,560
quindi se hai un dispositivo che non è alto come questo, allora lo fai lì.

51
00:04:02,600 --> 00:04:09,260
Quindi sei davvero flessibile qui e usi quella flessibilità per creare i layout che desideri perché è di questo che

52
00:04:09,410 --> 00:04:14,020
si tratta e ciò che ti dà molta flessibilità per le tue app.

53
00:04:14,120 --> 00:04:15,440
Quindi questa è la

54
00:04:15,440 --> 00:04:19,210
spaziatura qui, ora volevo anche cambiare i miei elementi di registro laggiù, è

55
00:04:19,340 --> 00:04:21,560
anche qualcosa che possiamo facilmente fare ovviamente.

56
00:04:21,740 --> 00:04:28,400
Abbiamo le nostre voci di elenco lì e sulle voci di elenco, impostiamo una larghezza del 100% perché impostiamo la larghezza della nostra

57
00:04:28,400 --> 00:04:32,330
lista qui con il contenitore dell'elenco e che è impostato sul 60%.

58
00:04:32,600 --> 00:04:36,750
Ora il 60% sembra piuttosto buono su dispositivi più grandi, penso, ma su

59
00:04:36,910 --> 00:04:40,280
dispositivi più piccoli, potremmo andare più grandi di così.

60
00:04:40,280 --> 00:04:48,050
Ora possiamo ovviamente tentare di nuovo di risolverlo con regole diverse qui in cui impostiamo una larghezza massima e una larghezza minima

61
00:04:48,050 --> 00:04:55,370
e forse possiamo anche usare l'API delle dimensioni per calcolare questo in modo dinamico o usiamo ancora un controllo if.

62
00:04:55,910 --> 00:05:03,500
Qui potremmo dire di nuovo dimensioni ottenere finestra, ottenere la larghezza disponibile in questo caso e

63
00:05:03,500 --> 00:05:07,340
se questo è maggiore di 500, allora

64
00:05:07,340 --> 00:05:15,220
voglio usare il 60%, altrimenti voglio usare l'80%. Quindi ora visualizziamo semplicemente un contenitore elenco più ampio e più

65
00:05:15,220 --> 00:05:18,070
ampio in base alla larghezza disponibile sul dispositivo

66
00:05:18,250 --> 00:05:19,340
su cui

67
00:05:19,420 --> 00:05:24,490
siamo in esecuzione e in realtà usiamo 350 qui invece di 500 perché stiamo

68
00:05:24,490 --> 00:05:26,350
parlando della larghezza, non dell'altezza.

69
00:05:26,380 --> 00:05:31,630
Quindi ora qui se eseguiamo questo su iPhone, abbiamo la stessa larghezza di prima ma sullo schermo più

70
00:05:32,080 --> 00:05:33,820
piccolo, abbiamo oggetti più grandi.

71
00:05:33,820 --> 00:05:37,650
Quindi è anche qualcosa che possiamo fare e ovviamente puoi giocare con il punto di interruzione

72
00:05:37,690 --> 00:05:39,140
che stai effettivamente impostando qui.

73
00:05:39,160 --> 00:05:41,290
puoi provare diverse dimensioni di breakpoint qui.

74
00:05:41,320 --> 00:05:43,420
Naturalmente potresti anche avere più punti

75
00:05:43,420 --> 00:05:48,940
di interruzione, puoi avere espressioni ternarie nidificate qui o prima di scrivere troppe espressioni nidificate, semplicemente imposta qui diversi

76
00:05:48,940 --> 00:05:56,500
oggetti di stile che poi carichi con differenti se controlli che usi lassù. Giusto per darvi un esempio per questo,

77
00:05:56,500 --> 00:06:03,820
potremmo avere un contenitore di elenchi grande qua e là, impostiamo uno flessibile e impostiamo

78
00:06:03,820 --> 00:06:09,320
la nostra larghezza di diciamo 80% perché questo è quello grande e

79
00:06:09,450 --> 00:06:13,380
qui abbiamo quello normale con il 60% .

80
00:06:13,380 --> 00:06:18,400
Ora non ho alcuna condizione se laggiù ma ho due diversi oggetti di

81
00:06:18,400 --> 00:06:22,320
stile e ora abbiamo solo bisogno di attaccare diversi

82
00:06:22,680 --> 00:06:31,780
oggetti di stile lassù, non qui ma qui ovviamente, in questa vista. Bene, per fare questo, possiamo semplicemente impostare una variabile di stile del contenitore

83
00:06:31,780 --> 00:06:38,740
elenco qui per esempio e puntare al contenitore elenco stili che è il nostro predefinito, quindi aggiungere un controllo if qui

84
00:06:38,830 --> 00:06:46,750
dove controlliamo se le dimensioni ottengono la larghezza della finestra e ora se la larghezza qui diciamo più piccolo di 350, quindi se abbiamo

85
00:06:46,750 --> 00:06:51,910
un piccolo dispositivo, allora vogliamo avere il contenitore grande elenco, quindi possiamo impostare lo stile

86
00:06:51,910 --> 00:06:53,470
contenitore elenco, questa variabile

87
00:06:53,470 --> 00:06:55,960
uguale al contenitore elenco stili grande per

88
00:06:55,960 --> 00:07:01,960
puntare a questo oggetto stile e ora possiamo usare quell'oggetto stile qui nella vista in cui abbiamo bisogno

89
00:07:01,960 --> 00:07:07,180
dello stile del contenitore elenco, ora utilizziamo la variabile che contiene un oggetto stile contenitore elenco

90
00:07:07,330 --> 00:07:13,060
diverso in base alla larghezza del nostro dispositivo. E se ora lo salviamo e lo eseguiamo di

91
00:07:13,060 --> 00:07:19,270
nuovo, vedi che sull'iPhone con il dispositivo più grande dove abbiamo più larghezza, abbiamo il contenitore più piccolo e qui

92
00:07:19,270 --> 00:07:24,200
sul telefono Android con il dispositivo più piccolo, con meno larghezza, otteniamo il contenitore più grande.

93
00:07:24,280 --> 00:07:26,980
Quindi è lo stesso risultato di prima

94
00:07:27,070 --> 00:07:32,080
ma un po 'più leggibile e ora potremmo avere più di questi se controlli qui

95
00:07:32,080 --> 00:07:34,900
dove memorizziamo stili diversi qui nello stile del

96
00:07:34,900 --> 00:07:42,070
contenitore elenco che poi utilizziamo laggiù, questo può essere più leggibile che avere espressioni ternarie nidificate laggiù nell'oggetto foglio di stile.

97
00:07:42,070 --> 00:07:47,650
Quindi è così che puoi giocare con questo ed essere consapevole di quella flessibilità dell'API dimensioni è

98
00:07:47,770 --> 00:07:48,970
davvero cruciale qui.