1
00:00:02,230 --> 00:00:08,300
Quindi abbiamo iniziato con l'inserimento del testo, in questo momento non stiamo facendo nulla con i valori immessi dall'utente ma

2
00:00:08,350 --> 00:00:14,020
prima di farlo, assicuriamoci che il pulsante non sia al di sotto di quell'input ma accanto a quello

3
00:00:14,020 --> 00:00:15,520
a destra e per

4
00:00:15,520 --> 00:00:17,700
ancora una volta, dobbiamo lavorare sul layout.

5
00:00:17,710 --> 00:00:21,970
Ecco perché ho questa vista in più qui intorno all'immissione di testo nel pulsante.

6
00:00:21,970 --> 00:00:27,490
Non avremmo bisogno di questo, ma ora con quella vista nidificata, possiamo controllare come questi due

7
00:00:27,490 --> 00:00:31,440
elementi sono allineati tra loro, aggiungendo di nuovo la proprietà

8
00:00:31,660 --> 00:00:38,980
dello stile qui e ora per il layout, per posizionare le cose, React Native usa la flexbox che potresti anche sai

9
00:00:38,980 --> 00:00:45,050
dal web, in caso contrario, in allegato troverai risorse che ti faranno iniziare con il flexbox CSS.

10
00:00:45,220 --> 00:00:49,840
Non è necessario conoscere il flexbox dentro e fuori, ma aiuta a conoscerlo un

11
00:00:49,840 --> 00:00:56,590
po ', il flexbox funziona in modo tale da posizionare gli elementi all'interno di una vista uno accanto all'altro o uno

12
00:00:56,800 --> 00:01:00,200
sopra l'altro, per impostazione predefinita uno sopra l'altro in React

13
00:01:00,230 --> 00:01:06,460
Native e puoi cambiarlo impostando la direzione flessibile dalla colonna che è l'impostazione predefinita per la riga e aggiungendo

14
00:01:06,880 --> 00:01:12,610
semplicemente questa, in questa vista, sostituiamo l'impostazione predefinita che è l'impostazione predefinita, motivo per cui non è necessario

15
00:01:12,610 --> 00:01:18,430
disattivarla dalla colonna e ora già , vedremo che il pulsante nell'input di testo si trova uno accanto

16
00:01:18,430 --> 00:01:19,180
all'altro, non

17
00:01:19,330 --> 00:01:26,100
sembra ancora così bello ma sono seduti uno accanto all'altro. Ora, per migliorare l'aspetto, possiamo anche aggiungere

18
00:01:26,130 --> 00:01:27,960
altro, ad esempio

19
00:01:28,140 --> 00:01:34,300
puoi definire come allineare e distribuire le cose nella loro riga o colonna.

20
00:01:34,650 --> 00:01:41,700
Ad esempio, con un contenuto giustificato, puoi controllare il modo in cui gli elementi sono distribuiti lungo il loro asse

21
00:01:41,700 --> 00:01:45,410
principale e con la riga, l'asse principale è da

22
00:01:45,480 --> 00:01:50,570
sinistra a destra, se quello sarebbe colonna, l'asse principale sarebbe dall'alto verso il basso.

23
00:01:50,630 --> 00:01:57,980
Quindi ora potremmo specificare un valore e qui il mio IDE mi dà anche il completamento automatico che è molto conveniente,

24
00:01:58,130 --> 00:02:05,210
potremmo specificare un valore di spazio tra ad esempio. Ciò significa che tutto lo spazio libero rimanente è tra

25
00:02:05,210 --> 00:02:07,690
i due elementi, quindi ora non sono

26
00:02:07,760 --> 00:02:12,560
seduti uno accanto all'altro, ma invece c'è uno spazio libero tra loro come

27
00:02:12,560 --> 00:02:13,590
puoi dire.

28
00:02:14,590 --> 00:02:18,010
Ora possiamo anche allinearli sul loro asse

29
00:02:18,060 --> 00:02:23,950
trasversale, quindi l'asse principale per la riga di direzione flessibile era da sinistra a

30
00:02:23,950 --> 00:02:31,130
destra, quindi l'asse trasversale è dall'alto verso il basso. Per la colonna di direzione flessibile, l'asse principale sarebbe dall'alto verso il basso e l'asse

31
00:02:31,130 --> 00:02:32,220
trasversale sarebbe da sinistra

32
00:02:32,270 --> 00:02:38,750
a destra, quindi l'asse trasversale è semplicemente l'opposto dell'asse principale, per così dire. Giustifica le posizioni dei contenuti lungo l'asse

33
00:02:38,750 --> 00:02:46,910
principale, con gli elementi di allineamento puoi controllare come gli elementi figlio di questa vista sono allineati lungo l'asse

34
00:02:46,910 --> 00:02:51,670
trasversale e lì hai valori diversi, come ad esempio il centro.

35
00:02:51,980 --> 00:02:58,250
Quindi, in questo caso, poiché abbiamo una riga di direzione flessibile, questo dovrebbe centrare verticalmente tutti gli elementi, il che significa che il pulsante ora

36
00:02:58,250 --> 00:03:05,230
sembra più bello ed è semplicemente centrato lì nel mezzo di questo input. Bene e ora possiamo anche aumentare leggermente la

37
00:03:05,230 --> 00:03:10,150
larghezza di quell'input andando all'input di testo e lì sullo stile, possiamo

38
00:03:10,150 --> 00:03:17,050
anche aggiungere una larghezza di diciamo 200, per dare a questa una larghezza di 200 pixel, il che

39
00:03:17,050 --> 00:03:24,170
significa che questo ora è un po 'più grande. In alternativa, avresti potuto anche scegliere un valore

40
00:03:24,560 --> 00:03:30,830
percentuale come 80%, il che significa che ciò prende l'80% della larghezza disponibile resa disponibile dal

41
00:03:30,890 --> 00:03:38,180
suo componente padre, quindi dalla vista che lo circonda. E ora, con quello, abbiamo dato un'occhiata ai primi importanti fondamenti,

42
00:03:38,450 --> 00:03:44,720
sul layout delle cose in React Native e sullo styling delle cose, ma in questo momento, stiamo facendo tutto

43
00:03:44,720 --> 00:03:51,040
questo con quel concetto chiamato stili in linea, il che significa che stiamo installando gli stili direttamente sugli elementi e

44
00:03:51,050 --> 00:03:52,250
non è l'ideale.