1
00:00:02,340 --> 00:00:08,370
Agora que tiramos esses fundamentos do caminho e antes de mergulharmos mais fundo no React Native e

2
00:00:08,370 --> 00:00:13,920
também como podemos estilizar nossos aplicativos de uma maneira um pouco mais bonita, porque obviamente o

3
00:00:13,950 --> 00:00:18,260
nosso estilo aqui definitivamente ainda tem algum potencial para colocá-lo assim, antes

4
00:00:18,420 --> 00:00:23,790
de mergulharmos em tudo isso, deixe-me mostrar-lhe outro componente empolgante embutido no React Native e

5
00:00:23,790 --> 00:00:29,970
que também mostra a facilidade com que você pode adicionar recursos interessantes aos aplicativos React Native e esse

6
00:00:30,150 --> 00:00:32,010
é o componente modal.

7
00:00:32,010 --> 00:00:38,310
Você encontra, é claro, nos documentos oficiais em que componentes e APIs guia aqui

8
00:00:38,310 --> 00:00:42,650
e ali, você encontrará um modal lá em baixo.

9
00:00:43,420 --> 00:00:50,470
Agora está sob outros e aqui, este modal é um bom componente que permite que você adicione uma

10
00:00:50,740 --> 00:00:55,780
sobreposição tão boa, sobreposição de tela cheia com um pouco de esforço.

11
00:00:55,900 --> 00:01:00,490
Agora vamos adicionar um modal para realmente hospedar nossa entrada de meta, agora a entrada

12
00:01:00,490 --> 00:01:04,020
de meta está aqui no topo e está tudo bem, mas eu

13
00:01:04,540 --> 00:01:10,480
realmente quero mover isso para um modal para que ele tenha uma sobreposição de tela cheia no final e nós

14
00:01:10,660 --> 00:01:12,790
só temos um botão aqui no

15
00:01:12,790 --> 00:01:16,480
topo, então no lugar da entrada de meta que abre aquele modal.

16
00:01:16,630 --> 00:01:19,000
Então, vamos para a entrada do objetivo

17
00:01:19,000 --> 00:01:19,780
e

18
00:01:19,810 --> 00:01:25,000
lá, eu quero envolver isso em um modal. Então eu vou importar o modal do

19
00:01:25,000 --> 00:01:27,600
React Native porque é um componente que

20
00:01:27,640 --> 00:01:34,020
vem com o React Native e lá, eu quero usar esse modal em torno da minha view

21
00:01:34,040 --> 00:01:38,080
aqui, então como agora e agora vamos salvar isso e vamos

22
00:01:38,180 --> 00:01:41,150
ver se isso já muda alguma coisa um

23
00:01:41,180 --> 00:01:42,740
pouco sim, nosso

24
00:01:42,740 --> 00:01:46,700
estilo está desligado, estamos perdendo aquele preenchimento que montamos originalmente, certo?

25
00:01:46,710 --> 00:01:52,370
No aplicativo. js, temos esse preenchimento geral em nossa visualização de

26
00:01:52,370 --> 00:01:58,430
tela, que é essa visão externa, certamente não está sendo aplicada nas duas plataformas, nos dois dispositivos porque nosso conteúdo

27
00:01:58,430 --> 00:02:03,800
está muito fora dessa tela, de modo que o modal já está fazendo alguma coisa e é

28
00:02:03,800 --> 00:02:08,480
claro que não estamos vendo muito isso. Agora para modal, então para este

29
00:02:09,020 --> 00:02:14,030
componente modal, você pode definir uma chave visível que define se esta é atualmente visível

30
00:02:14,030 --> 00:02:19,730
ou não e que usa um booleano se definirmos isto como false por exemplo e depois disso

31
00:02:19,730 --> 00:02:21,020
se olharmos nossas

32
00:02:21,080 --> 00:02:25,880
aplicações, nós é claro visto tela vazia. By the way, no caso de Android não

33
00:02:25,900 --> 00:02:32,660
deve atualizar para você depois de definir isso para false, basta fechar o aplicativo aqui com a ajuda da gaveta do aplicativo e, posteriormente, em seu

34
00:02:32,660 --> 00:02:37,080
processo lá em baixo, o processo de inicialização npm, pressione a novamente para reiniciar este no Android.

35
00:02:37,100 --> 00:02:39,650
Então, agora temos uma tela vazia quando isso está

36
00:02:39,650 --> 00:02:42,410
definido como falso, agora, obviamente, codificar isso não é a solução.

37
00:02:42,410 --> 00:02:47,990
Em vez disso, no aplicativo. js, agora eu quero ter um botão que nos permita abrir esse modal e,

38
00:02:47,990 --> 00:02:49,340
em seguida, vamos fechar o modal

39
00:02:49,350 --> 00:02:55,760
de dentro do modal quando pressionamos o botão add lá. Agora já estamos importando o botão aqui no aplicativo. js e agora que eu

40
00:02:55,760 --> 00:03:00,530
vejo isso, podemos, claro, também se livrar dessas importações que não estamos usando

41
00:03:00,560 --> 00:03:01,480
aqui agora,

42
00:03:01,550 --> 00:03:06,400
então apenas deixe o botão import aqui junto com as outras importações que estamos

43
00:03:06,490 --> 00:03:12,260
usando e agora aqui no topo , podemos adicionar o botão, que é uma tag de

44
00:03:12,260 --> 00:03:22,160
fechamento automático e definir o título para adicionar uma nova meta, talvez, algo assim. Se fizermos isso, é claro que devemos ver esse botão aqui no topo e

45
00:03:22,160 --> 00:03:22,750
aqui

46
00:03:22,750 --> 00:03:24,040
está e agora

47
00:03:24,140 --> 00:03:31,000
quando pressionamos esse botão, queremos mostrar esse modal, certo? Agora, para isso, precisamos gerenciar mais

48
00:03:31,000 --> 00:03:31,920
estado.

49
00:03:31,990 --> 00:03:38,350
Então, aqui, além de gerenciar as metas do curso, agora também vou gerenciar se estamos no modo

50
00:03:38,410 --> 00:03:41,220
adicionar no curso ou se não estamos.

51
00:03:41,260 --> 00:03:48,220
Então, inicialmente, não estamos assim, o estado inicial que estou definindo é falso e eu vou nomear

52
00:03:48,220 --> 00:03:50,100
o meu estado aqui

53
00:03:50,140 --> 00:03:55,460
e, claro, isso é totalmente com você, vou nomeá-lo como AddMode e setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Mais uma vez esses

55
00:03:56,860 --> 00:04:03,220
nomes são com você, eu estou apenas tendo uma convenção aqui que você também encontra nos documentos oficiais do React, onde aqui tentamos

56
00:04:03,220 --> 00:04:08,110
dar ao estado que estamos controlando um nome adequado e então basicamente pegamos esse nome e adicionamos set

57
00:04:08,110 --> 00:04:12,430
na frente dele para deixar claro que esta é a função de mudar esse estado.

58
00:04:12,430 --> 00:04:17,230
Então setIsAddMode é o que nós, no final, precisamos chamar quando este botão é pressionado e

59
00:04:17,230 --> 00:04:22,750
aqui podemos usar uma função inline ou usar uma função nomeada e apenas adicionar o manipulador aqui, o que

60
00:04:22,750 --> 00:04:23,700
você quiser.

61
00:04:24,130 --> 00:04:28,450
Eu irei com a função inline e chamará o set isAddMode e configurarei isto para true

62
00:04:28,480 --> 00:04:35,800
aqui quando este botão for chamado para que possamos abrir o modal. Agora podemos pegar o estado isAddMode que estamos mudando e passar

63
00:04:35,800 --> 00:04:43,760
isso para a entrada de meta para depois mudar a visibilidade do modal lá. Então, aqui, poderíamos adicionar um objeto visível, mas o nome do

64
00:04:43,760 --> 00:04:50,120
prop depende de você, porque ele está no nosso próprio componente e eu passo o isAddMode, então

65
00:04:50,120 --> 00:04:51,680
é o estado que

66
00:04:51,680 --> 00:04:54,800
estamos controlando, para o modo visível, então o

67
00:04:54,800 --> 00:04:59,660
valor armazenado em isAddMode é passado como um valor para o prop visível.

68
00:04:59,660 --> 00:05:03,710
Agora, na entrada do objetivo, podemos, portanto, usar agora esse objeto

69
00:05:03,710 --> 00:05:06,670
visível, então aqui podemos usar adereços visíveis, agora

70
00:05:06,740 --> 00:05:12,080
nos referindo ao objeto visível que alcançamos na entrada do objetivo e então encaminhamos para

71
00:05:12,230 --> 00:05:17,170
o objeto visível do modal. Se agora salvarmos isso e analisarmos nosso

72
00:05:17,310 --> 00:05:22,440
aplicativo, se eu pressionar adicionar novo objetivo aqui, você verá esse conteúdo modal aqui novamente.

73
00:05:22,590 --> 00:05:25,020
Agora, obviamente, não parece tão bonito aqui,

74
00:05:25,020 --> 00:05:26,590
então devemos mudar isso

75
00:05:26,700 --> 00:05:33,450
e uma outra coisa que eu quero mudar é que uma animação seria legal aqui para abrir o modal, certo?

76
00:05:33,450 --> 00:05:40,740
Então, vamos adicionar o tipo de animação que é uma boa propriedade que podemos definir aqui e você pode definir isso para uma string e

77
00:05:40,740 --> 00:05:45,210
lá você tem três opções - nenhuma é a padrão, mas você pode definir isso

78
00:05:45,420 --> 00:05:48,450
como slide e agora o modal deve aparecer deslizando acima.

79
00:05:48,490 --> 00:05:51,760
Então, se você pressionar adicionar novo objetivo, agora isso desliza

80
00:05:51,760 --> 00:05:53,430
para cima, também no Android.

81
00:05:53,430 --> 00:05:59,130
Então, essa é uma experiência de usuário muito melhor, eu diria, o próximo passo é garantirmos que nosso conteúdo

82
00:05:59,130 --> 00:06:04,410
no modal seja apresentado de uma maneira mais agradável, talvez centralizada aqui no meio do modal.