1
00:00:02,110 --> 00:00:07,000
Portanto, em uma nova tela de local, quero poder adicionar um local e, para isso,

2
00:00:07,030 --> 00:00:12,190
primeiro adicionarei o componente de entrada de texto que, obviamente, não tem nada a ver com os

3
00:00:12,190 --> 00:00:19,330
recursos nativos do dispositivo, mas também precisamos disso porque, em lá, agora podemos adicionar uma entrada de texto que permita ao usuário digitar o

4
00:00:19,330 --> 00:00:24,350
título e, portanto, também adicionarei um componente de texto aqui onde digo título, que deve atuar como

5
00:00:24,370 --> 00:00:25,360
um rótulo para

6
00:00:25,360 --> 00:00:32,450
essa entrada de texto aqui e no geral, também quero uma visualização de rolagem aqui para agrupar todo o meu conteúdo, porque não sei

7
00:00:32,520 --> 00:00:37,540
qual dispositivo o usuário usará, mas adicionaremos mais do que apenas um título, também adicionaremos um

8
00:00:37,540 --> 00:00:43,120
seletor de imagens e um seletor de local este módulo e, portanto, poder rolar esta página é realmente importante.

9
00:00:43,180 --> 00:00:48,820
Portanto, agora temos o rótulo do título e a entrada de texto que pertence a ele, que por enquanto não fará

10
00:00:48,820 --> 00:00:52,450
nada, mas que em breve permitirá que o usuário insira um título.

11
00:00:52,540 --> 00:00:55,840
Também quero ter certeza de que esse formulário possa ser enviado,

12
00:00:56,170 --> 00:01:02,500
é claro, o que também quero fazer é adicionar um componente de botão aqui e, após a entrada de texto, terei meu botão

13
00:01:02,500 --> 00:01:10,450
onde digo salvar espaço para Por exemplo, adicione uma cor aqui e defina-a em Cores. primário e, para isso, você precisa importar as

14
00:01:10,540 --> 00:01:15,730
cores constantes aqui e o onPress posteriormente enviará este formulário,

15
00:01:15,820 --> 00:01:19,750
por enquanto não estou fazendo nada aqui.

16
00:01:19,750 --> 00:01:25,030
A entrada de texto, é claro, também pode ser configurada, embora a

17
00:01:25,030 --> 00:01:29,920
configuração mais básica seja boa aqui, não preciso alterar o tipo

18
00:01:29,920 --> 00:01:31,360
de teclado, etc.

19
00:01:31,360 --> 00:01:37,330
Portanto, para esta visualização aqui, por exemplo, quero adicionar um estilo de formulário aqui, para um identificador de estilo, para que

20
00:01:37,330 --> 00:01:41,140
eu possa estilizar o formulário geral. Para o título

21
00:01:41,140 --> 00:01:50,980
aqui, adicionarei um estilo de rótulo e para a entrada de texto, também quero adicionar meus próprios estilos e usarei a

22
00:01:51,100 --> 00:01:55,210
entrada de texto identificadora aqui. Com isso, vamos para a folha de

23
00:01:55,210 --> 00:02:00,180
estilo e certifique-se de adicionar um pouco de estilo aqui. Para o formulário geral, adicionarei uma margem

24
00:02:00,220 --> 00:02:05,350
em todas as direções de 30 para que não fique diretamente nas bordas da tela.

25
00:02:06,160 --> 00:02:07,480
Para o rótulo,

26
00:02:07,780 --> 00:02:15,640
quero definir um tamanho de fonte digamos 18 e também adicionar uma margem na parte inferior de 15 para que tenhamos algum

27
00:02:15,640 --> 00:02:20,530
espaçamento entre o rótulo e a entrada de texto e na própria entrada

28
00:02:20,860 --> 00:02:27,670
de texto, para que seja possível capaz de vê-lo, vou adicionar uma borda inferior e definir sua cor para

29
00:02:27,670 --> 00:02:36,460
este cinza claro aqui com este código hexadecimal de #ccc e uma largura inferior da borda aqui de 1 e também ter uma margem

30
00:02:36,490 --> 00:02:43,060
na parte inferior, para o conteúdo abaixo dele, o botão agora com 15 anos e o que também

31
00:02:43,060 --> 00:02:48,300
adicionarei aqui é um pouco de preenchimento vertical, apenas quatro e um pouco de

32
00:02:48,670 --> 00:02:52,100
preenchimento horizontal, apenas dois. Se eu salvar isso, vamos dar uma olhada.

33
00:02:52,150 --> 00:02:57,310
Se eu for para a tela de novos locais, é isso que eu tenho e isso não parece

34
00:02:57,400 --> 00:03:03,360
muito ruim, também no Android, isso é algo com o qual podemos trabalhar, acho, e é com isso que podemos construir.

35
00:03:03,460 --> 00:03:05,970
Agora, é claro, essa entrada não está

36
00:03:05,980 --> 00:03:13,390
fazendo nada, é claro que quero capturar o que o usuário digitou e manter isso simples, aqui não adicionarei validação

37
00:03:13,390 --> 00:03:15,770
super complexa ou algo assim,

38
00:03:15,790 --> 00:03:22,030
em vez disso, capturarei o valor e é isso. É claro que você pode adicionar validação, adicionar

39
00:03:22,330 --> 00:03:23,360
um redutor,

40
00:03:23,370 --> 00:03:28,680
como fizemos no módulo de entrada do usuário, onde aprendeu como gerenciar formas mais

41
00:03:28,690 --> 00:03:36,490
complexas de todas as formas; aqui, novamente, manterei isso muito simples e, portanto, apenas importarei o gancho de estado de uso

42
00:03:36,490 --> 00:03:40,660
de React aqui para que eu possa capturar meus valores aqui.

43
00:03:40,660 --> 00:03:49,360
Então, aqui, terei meu valor de título e defino a função de valor de título e usarei use state para inicializar isso

44
00:03:49,350 --> 00:03:53,140
em uma string vazia. Em seguida, adicionarei uma função aqui,

45
00:03:53,230 --> 00:03:59,800
o manipulador de alteração de título, que recebe o texto que o usuário digitou e onde l

46
00:03:59,800 --> 00:04:08,750
Depois, basta definir meu valor de título para esse texto e, é claro, você pode adicionar validação, mas, novamente, para simplificar, não farei

47
00:04:08,750 --> 00:04:09,470
isso.

48
00:04:09,470 --> 00:04:15,380
É o manipulador de mudança de título que agora deve estar vinculado ao suporte de texto on change aqui, na entrada

49
00:04:15,380 --> 00:04:16,040
de texto;

50
00:04:16,040 --> 00:04:22,190
portanto, apontarei para o manipulador de mudança de título e ligarei o valor dessa entrada, é claro, ao meu valor de título, porque

51
00:04:22,190 --> 00:04:25,070
é onde eu armazeno a entrada do usuário e, com

52
00:04:25,190 --> 00:04:33,050
isso, temos uma entrada do usuário totalmente funcional aqui, onde também capturo os valores. Agora, com isso, conseguimos o título,

53
00:04:33,050 --> 00:04:35,530
também temos um lugar

54
00:04:35,570 --> 00:04:37,640
para salvar.

55
00:04:37,640 --> 00:04:40,110
Sempre que pressionarmos esse botão, eu quero

56
00:04:40,190 --> 00:04:46,370
salvá-lo, para que eu tenha meu manipulador de lugar de salvamento, que é uma função que eu quero

57
00:04:46,370 --> 00:04:47,680
vincular a esse

58
00:04:47,720 --> 00:04:54,050
botão de lugar de salvamento. Portanto, aqui, em vez de ter essa função anônima vazia, aponto para salvar coloque

59
00:04:54,050 --> 00:04:58,920
o manipulador neste botão Salvar local e agora quero garantir que este local seja

60
00:04:59,030 --> 00:05:01,540
salvo e, por isso, usarei novamente o Redux.

61
00:05:01,910 --> 00:05:10,880
Então, instalarei o Redux com o npm install --save redux e também o React Redux e também instalarei o Redux

62
00:05:10,880 --> 00:05:13,660
Thunk para que possamos usá-lo também.

63
00:05:13,670 --> 00:05:19,170
Por enquanto não preciso disso porque não estou falando com um servidor, mas mais tarde,

64
00:05:19,170 --> 00:05:24,230
quando adicionarmos recursos nativos de dispositivos, você verá que também temos alguns recursos assíncronos

65
00:05:24,230 --> 00:05:29,750
e onde podemos esperar a conclusão antes na verdade, despachamos uma ação que é exatamente onde

66
00:05:29,750 --> 00:05:34,470
o Redux Thunk pode nos ajudar. Portanto, com esses três pacotes instalados, agora podemos configurar o Redux.