1
00:00:02,230 --> 00:00:08,300
Então, começamos com a entrada de texto. No momento, não estamos fazendo nada com os valores inseridos pelo usuário,

2
00:00:08,350 --> 00:00:14,020
mas antes de fazer isso, vamos garantir que o botão não esteja abaixo da entrada, mas ao

3
00:00:14,020 --> 00:00:15,520
lado dela à direita

4
00:00:15,520 --> 00:00:17,700
e por novamente, precisamos trabalhar no layout.

5
00:00:17,710 --> 00:00:21,970
É por isso que tenho essa visão extra aqui em torno da entrada de texto no botão.

6
00:00:21,970 --> 00:00:27,490
Nós não precisaríamos disso, mas agora com essa visualização aninhada, podemos controlar como esses dois

7
00:00:27,490 --> 00:00:31,440
itens são alinhados entre si, adicionando novamente a propriedade style

8
00:00:31,660 --> 00:00:38,980
aqui e agora para o layout, o posicionamento e as coisas, o React Native usa flexbox que você também pode Se

9
00:00:38,980 --> 00:00:45,050
você não conhece, na Web, em anexo, você encontrará recursos para começar a usar o CSS flexbox.

10
00:00:45,220 --> 00:00:49,840
Você não precisa entrar e sair do flexbox, mas isso ajuda a saber um pouco,

11
00:00:49,840 --> 00:00:56,590
o trabalho do flexbox faz com que posicione os elementos dentro de uma vista próximos um do outro ou acima um do

12
00:00:56,800 --> 00:01:00,200
outro, por padrão, acima um do outro em React Native e

13
00:01:00,230 --> 00:01:06,460
você pode mudar isso definindo a direção flexível da coluna que é o padrão para a linha e apenas adicionando isso.

14
00:01:06,880 --> 00:01:12,610
Nesta exibição, substituímos o padrão que é o padrão e é por isso que não precisamos desativá-lo da coluna

15
00:01:12,610 --> 00:01:18,430
e agora já , veremos que o botão na entrada de texto fica ao lado do outro, ainda não

16
00:01:18,430 --> 00:01:19,180
parece tão

17
00:01:19,330 --> 00:01:26,100
bom, mas eles estão sentados um ao lado do outro. Agora, para melhorar a aparência, também podemos adicionar

18
00:01:26,130 --> 00:01:27,960
mais, por exemplo,

19
00:01:28,140 --> 00:01:34,300
você pode definir como as coisas são alinhadas e distribuídas em suas linhas ou colunas.

20
00:01:34,650 --> 00:01:41,700
Por exemplo, com o conteúdo justificado, é possível controlar como os itens são distribuídos ao longo do eixo principal e,

21
00:01:41,700 --> 00:01:45,410
com a linha, o eixo principal é da esquerda para

22
00:01:45,480 --> 00:01:50,570
a direita, se for a coluna, o eixo principal será de cima para baixo.

23
00:01:50,630 --> 00:01:57,980
Portanto, agora podemos especificar um valor e, aqui, meu IDE ainda me fornece preenchimento automático, o que é muito conveniente,

24
00:01:58,130 --> 00:02:05,210
podemos especificar um valor de espaço entre, por exemplo. O que isso significa é que todo o espaço livre restante fica entre

25
00:02:05,210 --> 00:02:07,690
os dois elementos, então eles não estão sentados

26
00:02:07,760 --> 00:02:12,560
diretamente um ao lado do outro, mas, em vez disso, há algum espaço livre entre eles, como

27
00:02:12,560 --> 00:02:13,590
você pode ver.

28
00:02:14,590 --> 00:02:18,010
Agora também podemos alinhá-los em seus eixos transversais,

29
00:02:18,060 --> 00:02:23,950
de modo que o eixo principal da linha de direção flexível foi da esquerda para a

30
00:02:23,950 --> 00:02:31,130
direita, o eixo transversal é de cima para baixo. Para a coluna de direção flexível, o eixo principal seria de cima para baixo e o eixo transversal

31
00:02:31,130 --> 00:02:32,220
seria da esquerda para a

32
00:02:32,270 --> 00:02:38,750
direita, portanto o eixo transversal é simplesmente o oposto do eixo principal, por assim dizer. Justifique as posições do conteúdo ao longo do

33
00:02:38,750 --> 00:02:46,910
eixo principal. Com os itens de alinhamento, você pode controlar como os elementos filhos dessa visualização são alinhados ao longo do eixo

34
00:02:46,910 --> 00:02:51,670
transversal e aí você tem valores diferentes, como por exemplo, o centro.

35
00:02:51,980 --> 00:02:58,250
Portanto, neste caso, como temos a linha de direção flexível, isso deve centralizar verticalmente todos os itens, o que significa que o botão

36
00:02:58,250 --> 00:03:05,230
agora parece melhor e é simplesmente centralizado lá no meio desta entrada. Bem, e agora também podemos aumentar um

37
00:03:05,230 --> 00:03:10,150
pouco a largura dessa entrada, indo para a entrada de texto e,

38
00:03:10,150 --> 00:03:17,050
no estilo, também podemos adicionar uma largura, digamos 200, para obter uma largura de 200 pixels, o

39
00:03:17,050 --> 00:03:24,170
que significa que isso agora é um pouco maior. Como alternativa, a propósito, você também pode ter

40
00:03:24,560 --> 00:03:30,830
escolhido um valor percentual como 80%, o que significa que isso ocupa 80% da largura disponível disponibilizada

41
00:03:30,890 --> 00:03:38,180
por seu componente pai, portanto, pela visualização que o cerca. E agora, com isso, vimos os primeiros fundamentos importantes, sobre

42
00:03:38,450 --> 00:03:44,720
o layout do React Native e o estilo, mas agora estamos fazendo tudo isso com esse conceito

43
00:03:44,720 --> 00:03:51,040
chamado estilos inline, o que significa que estamos configurando os estilos diretamente nos elementos e isso não é

44
00:03:51,050 --> 00:03:52,250
o ideal.