1
00:00:02,200 --> 00:00:08,410
Portanto, com relação ao espaçamento, no componente selecionador de imagens, adicionarei um pouco da margem inferior aqui de 15

2
00:00:08,410 --> 00:00:15,160
para adicionar um espaçamento entre esse componente selecionador de imagens e tudo o mais no formulário, mas o mais importante é

3
00:00:15,160 --> 00:00:21,520
que nós meio que passa essa imagem escolhida para o nosso lugar, nossa nova tela de lugar, porque é

4
00:00:21,520 --> 00:00:25,870
aí que precisamos da imagem no final, não só preciso dela aqui como

5
00:00:25,870 --> 00:00:28,370
uma pré-visualização, mas também nessa outra tela.

6
00:00:28,600 --> 00:00:33,910
Bem, para isso, podemos ir para o manipulador de imagens take e, quando

7
00:00:34,000 --> 00:00:41,590
configuramos isso como uma visualização, é claro que também podemos acessar nossos adereços e assumir que obtemos um digamos na

8
00:00:41,620 --> 00:00:48,760
imagem, que deve apontar para uma função que definimos na nova tela de local que agora podemos executar e,

9
00:00:48,780 --> 00:00:54,700
para essa função, encaminhar meu imageUri também. Portanto, não apenas o armazeno aqui internamente para

10
00:00:54,700 --> 00:01:01,730
ter uma visualização, mas também o encaminhamento para o componente pai, por assim dizer, e isso deve estar na imagem tirada.

11
00:01:01,920 --> 00:01:08,250
Então, tudo o que precisamos fazer para que isso funcione é que precisamos ir para a nova tela de local e adicioná-la à

12
00:01:08,250 --> 00:01:10,350
imagem tirada aqui no seletor de imagens e

13
00:01:10,410 --> 00:01:14,510
agora isso deve apontar para uma função que é executada pelo seletor de imagens uma

14
00:01:14,550 --> 00:01:16,410
vez que fizemos escolha uma imagem.

15
00:01:16,680 --> 00:01:22,950
Então é claro que aqui também quero armazenar esse valor, então adicionarei outro estado aqui e esse é

16
00:01:23,820 --> 00:01:27,300
o valor da imagem ou apenas a imagem e

17
00:01:27,390 --> 00:01:38,540
a imagem definida, talvez a imagem selecionada e o nome da imagem selecionada sejam de sua responsabilidade, o que inicialmente é nulo ou indefinido como este e agora podemos adicionar uma nova

18
00:01:38,540 --> 00:01:40,280
função para isso, a

19
00:01:40,280 --> 00:01:42,470
imagem captada aqui que recebe o

20
00:01:42,470 --> 00:01:50,240
caminho da imagem no final, certo, é isso que encaminhamos a partir do seletor de imagens quando chamamos essa função e aqui

21
00:01:50,240 --> 00:01:53,990
definimos a imagem selecionada para o caminho da imagem que estamos

22
00:01:54,230 --> 00:02:01,370
recebendo como argumento e o manipulador da imagem obtida é agora o que passamos para o seletor de imagens aqui

23
00:02:01,370 --> 00:02:06,800
com a ajuda do suporte na imagem obtida e é assim que nos comunicamos entre

24
00:02:06,920 --> 00:02:14,140
o seletor de imagens e o nova tela de local. Quando agora clicamos no botão Salvar e,

25
00:02:14,140 --> 00:02:20,850
portanto, o manipulador de salvar local é executado. Quando despachamos essa ação de adicionar

26
00:02:20,860 --> 00:02:24,010
local, agora desejo encaminhar a imagem

27
00:02:24,100 --> 00:02:32,380
selecionada, para que esse estado seja constante aqui. É claro que, para isso, precisamos ajustar um pouco o criador

28
00:02:32,380 --> 00:02:38,740
da ação adicionar local, agora ele espera apenas um título, agora também deve esperar uma imagem

29
00:02:38,740 --> 00:02:40,950
e também adicioná-la aqui aos dados

30
00:02:40,990 --> 00:02:47,430
do local e no redutor, agora quero adicione a imagem ao local que está sendo criado, mas

31
00:02:47,440 --> 00:02:48,370
é

32
00:02:48,520 --> 00:02:50,150
importante. No momento, nosso

33
00:02:50,170 --> 00:02:57,220
modelo de local não espera nenhuma imagem; portanto, é hora de mudar isso, adicione um imageUrl, talvez, imageUri seja

34
00:02:57,250 --> 00:03:06,490
mais preciso porque é local e, em seguida, tenha esse URI da imagem set equal to imageUri que estamos chegando aqui e agora com

35
00:03:06,490 --> 00:03:15,640
esse redutor ajustado, de volta aos locais, agora obtemos esses dados de imagem extras em nossa ação e precisamos repassá-los para o novo construtor

36
00:03:15,640 --> 00:03:21,670
de locais, então aqui ação. placeData. image é o que eu quero encaminhar, então esse

37
00:03:21,670 --> 00:03:28,750
é o novo argumento adicionado ao construtor e à ação do local. placeData. image obviamente refere-se à imagem

38
00:03:28,750 --> 00:03:35,840
que estamos definindo aqui em nosso objeto de ação. Assim, com isso, a imagem está realmente sendo adicionada ao local que

39
00:03:35,840 --> 00:03:37,160
é criado e

40
00:03:37,280 --> 00:03:42,920
com isso na tela da lista de locais onde produzimos o item do local, agora podemos alimentar alguns dados

41
00:03:42,920 --> 00:03:50,360
na imagem e que seriam itemData. item. imageUrl, URL da imagem porque itemData. item refere-se a um

42
00:03:50,420 --> 00:03:56,750
único local que é criado conforme definido em nosso modelo de local e aí temos imageUri e, portanto,

43
00:03:56,780 --> 00:04:03,090
é claro que aqui deve ser imageUri, não URL, mas isso é importante, não é apenas imagem, é

44
00:04:03,220 --> 00:04:05,200
imageUri porque aqui estamos nos referindo

45
00:04:05,230 --> 00:04:12,740
para um objeto de local seguindo nosso modelo de local. Se agora salvarmos isso e dermos uma olhada, isso

46
00:04:12,740 --> 00:04:13,410
deve

47
00:04:13,580 --> 00:04:19,250
realmente funcionar e deve permitir adicionar imagens que também vemos em nossa lista de locais.

48
00:04:19,340 --> 00:04:30,680
Então, aqui, se eu clicar em tirar imagem e tirar essa imagem fictícia aqui, assim, cortar isso e também adicionar um título aqui e

49
00:04:30,980 --> 00:04:34,700
clicar em salvar local, isso não parece muito

50
00:04:34,880 --> 00:04:37,710
ruim, vemos nossa imagem aqui.

51
00:04:38,120 --> 00:04:40,770
Agora, uma coisa é importante para entender.

52
00:04:40,880 --> 00:04:47,240
Até agora, estamos apenas armazenando essa imagem no caminho padrão que obtemos fora da caixa, que é esse caminho temporário

53
00:04:47,240 --> 00:04:52,160
e, é claro, não é onde queremos armazená-la, porque, como mencionei, isso será limpo periodicamente

54
00:04:52,160 --> 00:04:57,050
e, portanto, eventualmente perderemos nossa imagem, o que obviamente não é o objetivo aqui.