Portanto, na tela da lista de locais, quero exibir uma lista de locais sem surpresa e, para você
conhecer um componente do React Native, podemos importar
e essa é a lista simples. Lista plana, é claro, é perfeita
para gerar uma lista.
Então, aqui vou retornar a lista simples
agora e quero ter acesso aos meus lugares.
Elas são armazenadas no Redux para
que possamos ou com a ajuda do Redux, para importar o React Redux aqui ou, para ser mais preciso, a partir desse
pacote, importamos o seletor de uso, porque agora em nosso componente, podemos usá-lo para obter acesso aos dados armazenado no Redux.
Então, aqui, eu quero ter acesso aos meus locais com a
ajuda do seletor de uso, isso é muito fácil, passamos nessa função que recebe nossa loja Redux,
nosso estado Redux que está armazenado na loja lá e lá, eu quero obter acesso para a fatia de
lugares e aqui eu uso lugares porque no app. js, usei locais como um identificador aqui, que nos leva à fatia gerenciada com
o redutor de locais e nesse redutor, temos outra chave de
locais, então no final aqui quero acessar o estado. locais. lugares e, com isso, sabemos que
tipo de dados queremos alimentar na lista simples.
Agora, novamente, também adicionarei um extrator de chave aqui para informar à lista simples onde encontrar um ID exclusivo para cada item
e para mim que esteja na propriedade ID de todos os
lugares e, é claro, precisamos adicionar o item de renderização, para que possamos obter dados do item e, em seguida,
produz um componente para cada item que queremos produzir.
Agora, crio um novo componente na pasta de componentes, que
é o PlaceItem. arquivo js. Agora, para economizar tempo, anexei meu PlaceItem. js para esta palestra e você pode simplesmente
substituir o seu ou o seu conteúdo pelo meu, mas é claro que vou orientá-lo no que estou
fazendo lá.
Este é um componente básico, pois também o construímos várias vezes ao longo deste curso. Só tenho
aqui meu próprio componente, capaz de produzir uma imagem, porque precisaremos disso mais tarde, que então tem uma
visualização com dois pedaços de texto que sente-se ao lado desta
imagem, graças ao estilo que apliquei lá em baixo. Lá, eu mostro o título e o endereço desse
local, é claro que são informações que ainda não temos, mas adicionaremos isso ao longo deste módulo e
temos um componente de opacidade sensível ao toque para que possamos pressionar todos os lugares e quando
pressionamos, acionamos uma função que esperamos obter no objeto on select.
Agora, no meu estilo aqui, configurei isso de forma que a imagem e o bloco de texto
fiquem próximos um do outro em uma linha aqui com linha de direção flexível, a imagem é a imagem arredondada,
então é uma imagem arredondada, é um círculo com uma cor de fundo completa, caso ainda não tenhamos uma imagem que
você também possa alterar, por exemplo, essa cor acinzentada. Depois, temos o contêiner de informações, que contém
os dois pedaços de texto que agora estão organizados em uma coluna acima um do
outro e, em seguida, temos o título um pouco maior que o endereço e lá,
eu também quero usar preto como uma cor de texto. Essa é a configuração que vou usar aqui e esse
é o item de local que agora podemos
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.
Então, lá eu quero exibir o item de local como um componente de fechamento automático e agora colocar o item, esse
novo componente precisa de alguns dados de entrada. Precisamos passar um objeto on select que aponte para
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
endereço; portanto, quatro adereços que precisam ser fornecidos. Então, vamos fazer isso aqui. Para a imagem, ainda não
temos imagem, então aqui vou passar nulo por enquanto. Para o título, podemos fazer isso, é
claro, podemos apontar para itemData. item. title porque um único item é apenas um item que
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
como nulo
e, no caso de
select, é claro que podemos
definir isso, lá quero
ir para uma nova página, afinal. Para que possamos fazer isso com uma função anônima inline aqui ou
com uma função nomeada armazenada em uma
constante separada, o que
você quiser, farei isso inline e lá posso usar adereços. navegação. navegar e ir para a tela de detalhes
do local com o identificador de detalhes do local que, obviamente, no meu navegador é esse identificador aqui
e
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
que quero passar, esse é o título do
local e, claro, é itemData. item. title, então exatamente a mesma
coisa que estou inserindo no suporte do título aqui e esse também é o
ID do local que é itemData. item. id e já temos
esse ID. Isso já é algo
que estamos gerando quando adicionamos um novo local. Com isso, temos um item de local que
nos leva à tela de detalhes do local e, como já temos um esqueleto básico
nessa tela, poderemos ver isso.
Uma coisa que adicionarei à tela de detalhes do local, no entanto, é a minha configuração de opções de navegação,
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
nos parâmetros que estou recebendo, porque na lista de locais Estou passando um título de local e um parâmetro
de ID de local para esta nova tela. O título do local é o que eu quero extrair e definir aqui
no meu cabeçalho,
para que eu possa definir o título do cabeçalho como navData. navegação. getParam place title para
que tenhamos esse título no cabeçalho. E agora, com isso, vamos tentar,
salvar tudo e adicionar um novo local, um teste. Clique em Salvar local, somos levados de volta e estamos vendo que, se eu tocar
nele, vamos para a tela de detalhes, onde vemos isso no cabeçalho. Vamos também tentar no Android com um
teste, salvar isso, clicar nele e tudo funciona. Portanto, esse é o fluxo básico para isso, mas
uma coisa que ainda não fizemos é usar algumas funcionalidades nativas.
Então agora é hora de fazermos isso e quero começar com a câmera.