1
00:00:02,070 --> 00:00:07,410
Portanto, na tela da lista de locais, quero exibir uma lista de locais sem surpresa e, para você

2
00:00:07,550 --> 00:00:09,780
conhecer um componente do React Native, podemos importar

3
00:00:09,780 --> 00:00:14,010
e essa é a lista simples. Lista plana, é claro, é perfeita

4
00:00:14,040 --> 00:00:15,620
para gerar uma lista.

5
00:00:15,780 --> 00:00:18,570
Então, aqui vou retornar a lista simples

6
00:00:18,900 --> 00:00:21,890
agora e quero ter acesso aos meus lugares.

7
00:00:21,930 --> 00:00:23,970
Elas são armazenadas no Redux para

8
00:00:23,970 --> 00:00:30,960
que possamos ou com a ajuda do Redux, para importar o React Redux aqui ou, para ser mais preciso, a partir desse

9
00:00:30,960 --> 00:00:37,740
pacote, importamos o seletor de uso, porque agora em nosso componente, podemos usá-lo para obter acesso aos dados armazenado no Redux.

10
00:00:37,740 --> 00:00:41,630
Então, aqui, eu quero ter acesso aos meus locais com a

11
00:00:41,640 --> 00:00:47,190
ajuda do seletor de uso, isso é muito fácil, passamos nessa função que recebe nossa loja Redux,

12
00:00:47,190 --> 00:00:53,490
nosso estado Redux que está armazenado na loja lá e lá, eu quero obter acesso para a fatia de

13
00:00:53,490 --> 00:00:59,880
lugares e aqui eu uso lugares porque no app. js, usei locais como um identificador aqui, que nos leva à fatia gerenciada com

14
00:01:00,240 --> 00:01:02,880
o redutor de locais e nesse redutor, temos outra chave de

15
00:01:03,000 --> 00:01:09,870
locais, então no final aqui quero acessar o estado. locais. lugares e, com isso, sabemos que

16
00:01:09,870 --> 00:01:12,660
tipo de dados queremos alimentar na lista simples.

17
00:01:12,660 --> 00:01:19,800
Agora, novamente, também adicionarei um extrator de chave aqui para informar à lista simples onde encontrar um ID exclusivo para cada item

18
00:01:19,800 --> 00:01:23,480
e para mim que esteja na propriedade ID de todos os

19
00:01:23,490 --> 00:01:29,820
lugares e, é claro, precisamos adicionar o item de renderização, para que possamos obter dados do item e, em seguida,

20
00:01:29,820 --> 00:01:32,920
produz um componente para cada item que queremos produzir.

21
00:01:33,060 --> 00:01:38,730
Agora, crio um novo componente na pasta de componentes, que

22
00:01:38,790 --> 00:01:47,910
é o PlaceItem. arquivo js. Agora, para economizar tempo, anexei meu PlaceItem. js para esta palestra e você pode simplesmente

23
00:01:48,180 --> 00:01:53,040
substituir o seu ou o seu conteúdo pelo meu, mas é claro que vou orientá-lo no que estou

24
00:01:53,040 --> 00:01:53,790
fazendo lá.

25
00:01:53,910 --> 00:01:59,520
Este é um componente básico, pois também o construímos várias vezes ao longo deste curso. Só tenho

26
00:01:59,520 --> 00:02:05,460
aqui meu próprio componente, capaz de produzir uma imagem, porque precisaremos disso mais tarde, que então tem uma

27
00:02:05,520 --> 00:02:09,240
visualização com dois pedaços de texto que sente-se ao lado desta

28
00:02:09,270 --> 00:02:15,930
imagem, graças ao estilo que apliquei lá em baixo. Lá, eu mostro o título e o endereço desse

29
00:02:15,930 --> 00:02:21,900
local, é claro que são informações que ainda não temos, mas adicionaremos isso ao longo deste módulo e

30
00:02:21,900 --> 00:02:27,720
temos um componente de opacidade sensível ao toque para que possamos pressionar todos os lugares e quando

31
00:02:27,720 --> 00:02:31,400
pressionamos, acionamos uma função que esperamos obter no objeto on select.

32
00:02:31,440 --> 00:02:36,990
Agora, no meu estilo aqui, configurei isso de forma que a imagem e o bloco de texto

33
00:02:36,990 --> 00:02:43,230
fiquem próximos um do outro em uma linha aqui com linha de direção flexível, a imagem é a imagem arredondada,

34
00:02:43,230 --> 00:02:49,860
então é uma imagem arredondada, é um círculo com uma cor de fundo completa, caso ainda não tenhamos uma imagem que

35
00:02:49,860 --> 00:02:56,310
você também possa alterar, por exemplo, essa cor acinzentada. Depois, temos o contêiner de informações, que contém

36
00:02:56,310 --> 00:03:01,590
os dois pedaços de texto que agora estão organizados em uma coluna acima um do

37
00:03:02,010 --> 00:03:07,290
outro e, em seguida, temos o título um pouco maior que o endereço e lá,

38
00:03:07,290 --> 00:03:14,210
eu também quero usar preto como uma cor de texto. Essa é a configuração que vou usar aqui e esse

39
00:03:14,210 --> 00:03:17,330
é o item de local que agora podemos

40
00:03:17,330 --> 00:03:27,850
importar para a tela da lista de locais, para que possamos importar itens de local dos componentes, insira o item e faça a saída aqui nos itens de renderização.

41
00:03:27,850 --> 00:03:34,780
Então, lá eu quero exibir o item de local como um componente de fechamento automático e agora colocar o item, esse

42
00:03:34,780 --> 00:03:40,630
novo componente precisa de alguns dados de entrada. Precisamos passar um objeto on select que aponte para

43
00:03:40,630 --> 00:03:47,560
uma função que deve ser executada quando tocarmos em um ícone. Precisamos passar um adereço de imagem, um adereço de título e um adereço de

44
00:03:47,560 --> 00:03:53,730
endereço; portanto, quatro adereços que precisam ser fornecidos. Então, vamos fazer isso aqui. Para a imagem, ainda não

45
00:03:53,740 --> 00:03:59,500
temos imagem, então aqui vou passar nulo por enquanto. Para o título, podemos fazer isso, é

46
00:03:59,590 --> 00:04:06,010
claro, podemos apontar para itemData. item. title porque um único item é apenas um item que

47
00:04:06,010 --> 00:04:13,100
segue nosso modelo de local e que, obviamente, possui um suporte de título, para que possamos acessá-lo com segurança. Para o endereço, ainda não o temos, portanto, definirei

48
00:04:13,100 --> 00:04:14,470
como nulo

49
00:04:14,780 --> 00:04:16,260
e, no caso de

50
00:04:16,280 --> 00:04:18,440
select, é claro que podemos

51
00:04:18,440 --> 00:04:19,940
definir isso, lá quero

52
00:04:19,970 --> 00:04:25,070
ir para uma nova página, afinal. Para que possamos fazer isso com uma função anônima inline aqui ou

53
00:04:25,070 --> 00:04:26,750
com uma função nomeada armazenada em uma

54
00:04:27,200 --> 00:04:28,300
constante separada, o que

55
00:04:28,610 --> 00:04:35,440
você quiser, farei isso inline e lá posso usar adereços. navegação. navegar e ir para a tela de detalhes

56
00:04:35,450 --> 00:04:40,580
do local com o identificador de detalhes do local que, obviamente, no meu navegador é esse identificador aqui

57
00:04:43,380 --> 00:04:43,950
e

58
00:04:43,980 --> 00:04:50,610
ali, também quero passar alguns dados extras, alguns parâmetros, então vou passar um segundo argumento aqui para navegar e lá são duas informações

59
00:04:50,610 --> 00:04:52,860
que quero passar, esse é o título do

60
00:04:52,860 --> 00:04:57,680
local e, claro, é itemData. item. title, então exatamente a mesma

61
00:04:57,750 --> 00:05:01,770
coisa que estou inserindo no suporte do título aqui e esse também é o

62
00:05:01,770 --> 00:05:06,650
ID do local que é itemData. item. id e já temos

63
00:05:06,720 --> 00:05:08,890
esse ID. Isso já é algo

64
00:05:08,910 --> 00:05:14,640
que estamos gerando quando adicionamos um novo local. Com isso, temos um item de local que

65
00:05:14,640 --> 00:05:19,800
nos leva à tela de detalhes do local e, como já temos um esqueleto básico

66
00:05:19,950 --> 00:05:21,890
nessa tela, poderemos ver isso.

67
00:05:21,960 --> 00:05:28,170
Uma coisa que adicionarei à tela de detalhes do local, no entanto, é a minha configuração de opções de navegação,

68
00:05:28,170 --> 00:05:34,950
em que preciso dessa função dinâmica que retorna um objeto de configuração, porque quero definir o título do cabeçalho com base

69
00:05:34,950 --> 00:05:41,040
nos parâmetros que estou recebendo, porque na lista de locais Estou passando um título de local e um parâmetro

70
00:05:41,040 --> 00:05:47,070
de ID de local para esta nova tela. O título do local é o que eu quero extrair e definir aqui

71
00:05:47,070 --> 00:05:47,890
no meu cabeçalho,

72
00:05:47,940 --> 00:05:56,040
para que eu possa definir o título do cabeçalho como navData. navegação. getParam place title para

73
00:05:56,070 --> 00:06:02,910
que tenhamos esse título no cabeçalho. E agora, com isso, vamos tentar,

74
00:06:02,910 --> 00:06:11,230
salvar tudo e adicionar um novo local, um teste. Clique em Salvar local, somos levados de volta e estamos vendo que, se eu tocar

75
00:06:11,230 --> 00:06:18,100
nele, vamos para a tela de detalhes, onde vemos isso no cabeçalho. Vamos também tentar no Android com um

76
00:06:18,700 --> 00:06:26,070
teste, salvar isso, clicar nele e tudo funciona. Portanto, esse é o fluxo básico para isso, mas

77
00:06:26,070 --> 00:06:30,300
uma coisa que ainda não fizemos é usar algumas funcionalidades nativas.

78
00:06:30,570 --> 00:06:34,710
Então agora é hora de fazermos isso e quero começar com a câmera.