1
00:00:02,240 --> 00:00:04,430
Agora esta também é uma boa prática

2
00:00:04,460 --> 00:00:09,440
para você, você pode pausar o vídeo aqui e tentar posicionar esses dois botões um ao lado do outro,

3
00:00:09,440 --> 00:00:15,190
apenas os dois botões, não a entrada e os dois botões, mas esses dois botões devem estar em um nova linha abaixo

4
00:00:15,200 --> 00:00:17,430
da entrada, mas depois sentar ao lado do outro.

5
00:00:17,570 --> 00:00:23,610
Após a breve pausa que você pode usar para pausar o vídeo, nós vamos fazer isso juntos.

6
00:00:23,650 --> 00:00:25,440
Então você teve sucesso?

7
00:00:25,450 --> 00:00:26,950
Vamos tentar juntos.

8
00:00:26,990 --> 00:00:34,670
A chave aqui é usar flexbox e outra view porque novamente como eu mencionei anteriormente e como é realmente importante

9
00:00:34,670 --> 00:00:41,530
entender, view components são seu componente principal para organizar outros componentes ou para ser usado como um container

10
00:00:41,530 --> 00:00:43,570
que você também pode estilizar

11
00:00:43,600 --> 00:00:49,610
mas aqui neste caso, para organizar outros componentes. Então, eu vou mover os dois botões dentro dessa

12
00:00:49,720 --> 00:00:55,720
visão e agora podemos atribuir um estilo a essa visão e esse estilo de curso será definido

13
00:00:55,750 --> 00:00:59,660
aqui em nosso objeto de estilo e eu vou nomear esse

14
00:00:59,710 --> 00:01:06,400
contêiner de botão, isso é com você, este nome e lá, eu quero definir uma direção flexível da linha

15
00:01:06,400 --> 00:01:13,360
para tê-los sentar ao lado do outro e, em seguida, vou definir justificar o conteúdo do espaço entre para ter

16
00:01:13,360 --> 00:01:16,330
o espaço livre entre os dois botões.

17
00:01:16,340 --> 00:01:25,190
Agora vamos adicionar o estilo aqui para aquela view, styles button container e salvar isso e agora aqui estão os botões mas para

18
00:01:25,190 --> 00:01:32,420
ter o espaço livre tem um efeito aqui, que ficará ainda mais claro no Android pelo jeito, que

19
00:01:32,420 --> 00:01:34,900
atualmente não está tendo nenhum efeito,

20
00:01:35,000 --> 00:01:37,880
de modo que o espaço entre não

21
00:01:37,910 --> 00:01:41,820
está tendo nenhum efeito, deixe-me mostrar rapidamente isso no Android.

22
00:01:42,030 --> 00:01:42,410
Você

23
00:01:42,420 --> 00:01:43,890
vê, não há espaço livre.

24
00:01:43,920 --> 00:01:47,790
A razão para isso é simplesmente que não temos largura atribuída ao nosso contêiner de

25
00:01:47,790 --> 00:01:48,200
botão

26
00:01:48,210 --> 00:01:50,100
e, portanto, como você aprendeu, só é

27
00:01:50,370 --> 00:01:52,660
preciso a largura dos filhos e isso é simplesmente

28
00:01:52,710 --> 00:01:53,820
a largura dos dois

29
00:01:53,940 --> 00:01:56,570
botões adicionados juntos, portanto, não há espaço livre para adicione entre.

30
00:01:56,610 --> 00:02:01,410
Então nós temos algum espaço livre no meio, nós simplesmente precisamos atribuir um com ao container de botão

31
00:02:01,530 --> 00:02:05,800
e agora essa largura é claro para você. Como a entrada tem 80%,

32
00:02:05,820 --> 00:02:14,340
poderíamos ir com 80% aqui também ou talvez com 60% para ter um pouco mais estreito que a entrada acima, para

33
00:02:14,400 --> 00:02:20,130
que os botões não fiquem nas bordas da entrada, mas sim claro até você

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

35
00:02:21,090 --> 00:02:27,060
portanto, agora com isso, se isso recarrega e nós temos um olhar para isso no

36
00:02:27,060 --> 00:02:33,390
Android usando este modo conveniente de fechá-lo e reiniciá-lo, agora devemos ver algum espaço livre entre

37
00:02:33,390 --> 00:02:34,930
esses dois botões, sim

38
00:02:34,950 --> 00:02:36,730
que está parecendo bom.

39
00:02:36,770 --> 00:02:38,700
E é claro que você pode

40
00:02:38,730 --> 00:02:42,830
brincar com isso, você também pode, alternativamente, adicionar estilos aos botões, você

41
00:02:42,840 --> 00:02:49,440
pode adicionar props de estilo aqui e adicionar uma margem à esquerda e à direita de cada botão, que

42
00:02:49,440 --> 00:02:50,510
também funcionaria.

43
00:02:50,520 --> 00:02:56,250
Você também pode brincar com outros valores aqui, como espaço ao redor para ter o espaço livre à esquerda e à

44
00:02:56,250 --> 00:02:58,710
direita dos botões e não apenas entre eles.

45
00:02:58,770 --> 00:03:03,000
Estas são todas as coisas que você pode fazer, eu irei com o espaço por aqui e dar uma olhada final

46
00:03:03,000 --> 00:03:06,000
nisso, mas no final das contas isso é simplesmente algo que depende de você.

47
00:03:06,030 --> 00:03:11,400
Importante aqui é claro que você entende como você pode conseguir algo com a ajuda de

48
00:03:11,550 --> 00:03:15,390
uma visão que você envolve seus botões e flexbox então e com

49
00:03:15,600 --> 00:03:18,900
isso, eu diria que temos um olhar decente aqui.

50
00:03:19,110 --> 00:03:26,550
Agora, uma última coisa, realmente a última coisa que eu ainda quero fazer é redimensionar esses botões porque eles não são do mesmo tamanho

51
00:03:26,550 --> 00:03:31,380
e eu acho que seria um pouco mais legal se eles tivessem o mesmo tamanho.

52
00:03:31,410 --> 00:03:37,920
Agora, em um botão, você não pode adicionar um estilo prop e definir uma largura, não importa se você

53
00:03:37,950 --> 00:03:40,700
está usando estilos embutidos ou o

54
00:03:40,710 --> 00:03:44,050
objeto de folha de estilo, e isso é algo que

55
00:03:44,100 --> 00:03:51,860
você precisa saber, e é por isso que estou cobrindo aqui. você tem que embrulhar seu botão em uma visão separada, como se

56
00:03:52,070 --> 00:03:59,270
eu estivesse fazendo aqui e então dê a esse ponto um botão, por exemplo aqui nós poderíamos adicionar estilos botão, referindo-se a

57
00:03:59,270 --> 00:04:05,990
uma propriedade de botão lá embaixo, para cada visão e lá neste propriedade de botão que eu estou adicionando agora,

58
00:04:05,990 --> 00:04:08,780
você poderia adicionar uma largura de digamos 40%

59
00:04:08,780 --> 00:04:15,440
e que será 40% do pai dessa visão, então 40% dessa visão de contêiner de botão que leva 60% de

60
00:04:16,220 --> 00:04:20,580
toda a largura disponível e podemos fazer isso no outro botão, é claro.

61
00:04:20,600 --> 00:04:28,010
Então, isso é apenas algo que você precisa saber, se você adicionar suas vistas ao redor aqui, em torno de seus botões.

62
00:04:28,010 --> 00:04:34,490
Agora, com isso, se reiniciarmos o Android novamente, devemos ter botões com o mesmo tamanho, o que, com certeza,

63
00:04:34,580 --> 00:04:36,710
é algo que você deseja.

64
00:04:36,710 --> 00:04:42,980
É claro que você também poderia ter usado um valor de pixel aqui, em vez de valores percentuais, mas agora estou

65
00:04:43,220 --> 00:04:44,710
muito feliz, acho que

66
00:04:44,780 --> 00:04:48,590
agora é realmente um aplicativo que parece bom, se comportando bem e sim,

67
00:04:48,710 --> 00:04:51,320
é um bom começo com o React Native.

68
00:04:51,320 --> 00:04:57,140
Agora, obviamente, há muito mais que podemos aprender e mergulhar, muito mais podemos fazer em relação ao

69
00:04:57,140 --> 00:05:02,540
estilo, porque, como já mencionado, esse certamente não é o aplicativo mais bonito que você

70
00:05:03,110 --> 00:05:05,990
já criou, mas abordamos vários fundamentos importantes Aqui.