Portanto, com relação ao espaçamento, no componente selecionador de imagens, adicionarei um pouco da margem inferior aqui de 15
para adicionar um espaçamento entre esse componente selecionador de imagens e tudo o mais no formulário, mas o mais importante é
que nós meio que passa essa imagem escolhida para o nosso lugar, nossa nova tela de lugar, porque é
aí que precisamos da imagem no final, não só preciso dela aqui como
uma pré-visualização, mas também nessa outra tela.
Bem, para isso, podemos ir para o manipulador de imagens take e, quando
configuramos isso como uma visualização, é claro que também podemos acessar nossos adereços e assumir que obtemos um digamos na
imagem, que deve apontar para uma função que definimos na nova tela de local que agora podemos executar e,
para essa função, encaminhar meu imageUri também. Portanto, não apenas o armazeno aqui internamente para
ter uma visualização, mas também o encaminhamento para o componente pai, por assim dizer, e isso deve estar na imagem tirada.
Então, tudo o que precisamos fazer para que isso funcione é que precisamos ir para a nova tela de local e adicioná-la à
imagem tirada aqui no seletor de imagens e
agora isso deve apontar para uma função que é executada pelo seletor de imagens uma
vez que fizemos escolha uma imagem.
Então é claro que aqui também quero armazenar esse valor, então adicionarei outro estado aqui e esse é
o valor da imagem ou apenas a imagem e
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
função para isso, a
imagem captada aqui que recebe o
caminho da imagem no final, certo, é isso que encaminhamos a partir do seletor de imagens quando chamamos essa função e aqui
definimos a imagem selecionada para o caminho da imagem que estamos
recebendo como argumento e o manipulador da imagem obtida é agora o que passamos para o seletor de imagens aqui
com a ajuda do suporte na imagem obtida e é assim que nos comunicamos entre
o seletor de imagens e o nova tela de local. Quando agora clicamos no botão Salvar e,
portanto, o manipulador de salvar local é executado. Quando despachamos essa ação de adicionar
local, agora desejo encaminhar a imagem
selecionada, para que esse estado seja constante aqui. É claro que, para isso, precisamos ajustar um pouco o criador
da ação adicionar local, agora ele espera apenas um título, agora também deve esperar uma imagem
e também adicioná-la aqui aos dados
do local e no redutor, agora quero adicione a imagem ao local que está sendo criado, mas
é
importante. No momento, nosso
modelo de local não espera nenhuma imagem; portanto, é hora de mudar isso, adicione um imageUrl, talvez, imageUri seja
mais preciso porque é local e, em seguida, tenha esse URI da imagem set equal to imageUri que estamos chegando aqui e agora com
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
de locais, então aqui ação. placeData. image é o que eu quero encaminhar, então esse
é o novo argumento adicionado ao construtor e à ação do local. placeData. image obviamente refere-se à imagem
que estamos definindo aqui em nosso objeto de ação. Assim, com isso, a imagem está realmente sendo adicionada ao local que
é criado e
com isso na tela da lista de locais onde produzimos o item do local, agora podemos alimentar alguns dados
na imagem e que seriam itemData. item. imageUrl, URL da imagem porque itemData. item refere-se a um
único local que é criado conforme definido em nosso modelo de local e aí temos imageUri e, portanto,
é claro que aqui deve ser imageUri, não URL, mas isso é importante, não é apenas imagem, é
imageUri porque aqui estamos nos referindo
para um objeto de local seguindo nosso modelo de local. Se agora salvarmos isso e dermos uma olhada, isso
deve
realmente funcionar e deve permitir adicionar imagens que também vemos em nossa lista de locais.
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
clicar em salvar local, isso não parece muito
ruim, vemos nossa imagem aqui.
Agora, uma coisa é importante para entender.
Até agora, estamos apenas armazenando essa imagem no caminho padrão que obtemos fora da caixa, que é esse caminho temporário
e, é claro, não é onde queremos armazená-la, porque, como mencionei, isso será limpo periodicamente
e, portanto, eventualmente perderemos nossa imagem, o que obviamente não é o objetivo aqui.