Vamos garantir que possamos ir para a tela de detalhes do produto, esta
tela aqui e, antes de tudo, no componente da tela
de detalhes do produto, bem, eu configurarei um componente importando
React do React. Então, lá dentro,
provavelmente também precisamos de algumas coisas do React Native, por exemplo, não pode doer
muito ter uma visualização e um texto aqui e também uma folha de estilo e também
o componente de imagem, a propósito, a ordem dessas importações aqui claro que não importa.
Também quero ter um botão aqui porque também quero adicionar um botão adicionar ao carrinho e,
na verdade, também uma exibição de rolagem, porque essa página de detalhes pode ter uma descrição muito longa do produto ou pode ser visualizada em
um dispositivo muito pequeno e portanto, ele definitivamente deve ser rolável para que possamos sempre
ver todo o conteúdo. Com isso aqui,
adicionarei o componente de tela de detalhes do produto, novamente um componente funcional onde recebemos adereços, configurarei minha folha
de estilo aqui com a folha de estilo. crie e armazene-o em uma constante de estilos e,
é claro, exporte a tela de detalhes do produto como padrão. Com isso, vamos começar de maneira simples e retornar uma visualização
aqui com um texto em que dizemos a tela de detalhes do produto, que está lá apenas, para que possamos ver que navegamos com sucesso por lá
e para que possamos realmente usá-lo porque precisamos retornar o
jsx para tem um componente válido porque a primeira coisa que quero fazer é ajustar
a navegação e para isso no ShopNavigator. js na pasta de navegação, podemos
importar a tela de detalhes do
produto aqui da pasta de telas, a pasta da loja e a tela de detalhes do produto. Esse é o
arquivo
em que trabalhamos, é claro, e mapeá-lo para um identificador aqui, ' nomeá-lo-emos detalhes do
produto aqui.
Essas teclas, como você aprendeu na seção de navegação, dependem sempre
de você, então agora mapeamos essa tela.
Esta será a nossa tela inicial, porque este é o primeiro
par de valores-chave, mas é uma tela para a qual podemos ir, podemos navegar para lá
e para lá, precisamos ir para a tela de visão geral de nossos produtos e quando clicarmos em Exibir detalhe, este é,
no final, o sinal de que queremos ir para a tela de detalhes do produto.
Então, aqui nesta função, podemos chamar adereços de navegação de navegação, essa função de navegação que você aprendeu na
seção de navegação e, em seguida, mostrei
uma sintaxe na qual você passa um objeto Javascript onde você configura
um nome de rota, que pode detalhes do produto e isso o levará à tela.
Então agora salvamos isso e
clicamos em ver detalhes, na verdade, vamos para a tela de detalhes do produto. Agora, como uma anotação na seção de navegação, também mostrei, é
claro,
que a sintaxe alternativa é que você apenas passa o nome de tela como primeiro argumento para navegar,
para que você possa
fazer isso também e funcionará como bem. Se também testarmos isso no
Android, é assim que podemos chegar lá.
Agora, obviamente, o objetivo não é apenas ir até lá, mas também encaminhar nossos dados ou nosso ID do produto pelo menos para que
possamos carregar os dados do produto dentro do componente. Portanto, como segundo argumento aqui, passo um objeto Javascript que
será o meu parâmetro para esta ação de navegação e aí você pode ter qualquer par
de valores-chave que desejar, adicionarei um campo de ID do produto aqui, novamente esse nome é totalmente depende de
você e este será itemData. item. ID porque itemData. O item aponta
para um único produto que possui a aparência que configuramos aqui nos modelos e que possui ID
prop, então é claro que podemos acessá-lo aqui e encaminhar. Com isso, na tela de detalhes do produto, podemos
extrair isso, é claro, isso também é algo que você aprendeu anteriormente e que pode praticar aqui.
Podemos obter o nosso ID do produto aqui, basta chamar adereços de navegação, obter param ID do produto e isso
extrairá nosso ID do produto dos parâmetros que recebemos.
Agora podemos usar esse ID para obter nosso produto e, é claro, nossos produtos são armazenados no Redux.
Portanto, no final, precisamos importar o seletor de uso aqui do React Redux, para que possamos usá-lo para selecionar um único
produto, digamos que
o produto selecionado, esse nome constante, é claro também depende de você, agora seja selecionado com a ajuda do seletor
de uso que recebe nosso estado, nosso estado Redux e, em seguida, podemos detalhar a fatia de
produtos, novamente esse nome de fatia é o que você usa aqui nos produtos de redutores combinados no meu caso, e aí podemos obter acesso a
todos os produtos disponíveis, exceto Claro que aqui não
quero carregar todos os produtos disponíveis, mas, em vez disso, posso usar o método
find para encontrar um único produto com essa função que passo para descobrir o que é executado em todos os itens da matriz
em que obtemos o produto em que esta função retorna true e deve retornar true se o ID
do produto que estou vendo for igual ao ID do produto que extraí dos parâmetros de rota.
É assim que selecionamos um único produto e esse produto pode ser usado aqui,
para que possamos produzir o produto selecionado. título por exemplo. Se agora salvarmos isso e visualizarmos os detalhes, de fato,
aqui vejo
a camisa vermelha; se fizer isso no tapete azul, vejo o tapete
azul aqui, então está funcionando. Seria bom ver
que no
cabeçalho também e há duas opções, agora poderíamos usar adereços. conjunto de navegação param aqui e também envolva isso na chamada de efeito de uso, é
claro, seria melhor definir
nosso título com set param e usá-lo aqui nas opções de navegação que precisamos adicionar aos detalhes do produto para extraí-lo
ou, na verdade, um pouco mais fácil, vamos para a visão geral do produto, onde vamos para essa
página e, além de passar o ID do produto, também passamos o título do produto,
porque aqui temos esse item facilmente disponível e o obtemos com a ajuda
do itemData. item. título.
Agora, também definimos esse parâmetro e isso facilita a extração na tela de
detalhes do produto; nas opções de navegação, podemos adicionar opções de navegação na tela
de detalhes do produto e agora é a forma funcional, pois precisamos extrair isso de uma maneira
dinâmica a partir de nossos parâmetros de rota. Então, aqui temos esse objeto de dados de navegação, que
também possui um suporte de navegação, precisamos retornar nosso objeto Javascript, nosso objeto de configuração das opções de navegação aqui, essas devem ser
opções, é claro, e lá, podemos definir o título do cabeçalho como navData. navegação. título do produto getParam ou o que você
escolher como identificador para isso.
Então, aqui estou usando o título do produto porque, na tela de visão geral do produto, estou configurando isso para o título do produto.
Com isso, estamos definindo esse cabeçalho, vamos ver se isso funciona, se tentarmos ir para a tela,
isso parece bom,
agora também vemos o título do produto aqui no cabeçalho. Isso está funcionando.
Agora mencionei anteriormente que não devemos apenas ir lá pressionando os detalhes da exibição,
mas talvez também pressionando o produto em
geral e, para isso, podemos ir ao item do produto e, é claro, temos o botão exibir
detalhes, mas agora podemos agrupar o item inteiro, é claro,
em um toque e, aí, podemos usar a opacidade palpável e envolver esse item inteiro com opacidade palpável, então envolva isso em toda a nossa exibição aqui, esses
botões ainda serão acionados de forma independente, mas agora
também podemos pressionar em qualquer outro lugar e no onPress, agora eu também quero
ativar
o mesmo, o botão de detalhes da exibição, eu quero ativar a função que recebemos na exibição
de detalhes, então simplesmente encaminharemos para a exibição de detalhes. E que com essa mudança simples, podemos pressionar
qualquer lugar desse item para ser levado para a tela de detalhes, também no Android, onde isso
parece um pouco feio e, em geral, seria bom ter esse efeito cascata lá.
Agora você também aprendeu como implementar isso.
Precisamos importar feedback nativo tocável para isso e a API da plataforma. Portanto, esse objeto de plataforma e agora
aqui no item do produto, podemos configurar nosso componente tocável aqui ou o que você quiser nomear , deve ter um
caractere maiúsculo para que possamos usá-lo como um elemento jsx e isso, por padrão,
aponta para uma opacidade
palpável, digamos, mas se o SO da plataforma for igual ao Android e a versão da plataforma for maior ou igual a 21,
que é a versão do Android precisamos apoiar
o efeito cascata, podemos definir cmp palpável igual a feedback nativo palpável e agora podemos substituir a opacidade palpável por lá por
cmp
palpável, então com essa variável que contém dois tipos
diferentes de componentes, dependendo de onde está sendo executado e agora, se faça isso,
ainda temos esse efeito de opacidade aqui, mas temos um efeito cascata no Android.
No entanto, apenas lá embaixo, não na imagem e também não respeitando nossos cantos arredondados, como você pode
ver.
Agora, para corrigir o problema
que não está na imagem, tudo o que precisamos
fazer é alterar algumas configurações, basta adicionar o uso de primeiro plano aqui.
Agora, na opacidade palpável, isso não terá efeito, mas no feedback nativo palpável, para garantir que o
efeito cascata não se aplique ao plano de fundo, mas na verdade ao primeiro plano,
o que significa também aos elementos que são colocados em cima do nosso palpável ou dentro do nosso componente palpável.
Portanto, agora, isso também está na imagem e, para respeitar os cantos, os cantos arredondados, eu
farei isso de maneira
um pouco diferente, adicionarei um componente tocável dentro da minha vista ao redor, em vez de
fora, assim e agora aqui, adicionarei um estouro oculto no estilo do produto que está nessa exibição que agora
está em torno do meu componente tocável. Com isso, porém, minha sombra está perdida, como você pode
ver, e aqui agora recebo um erro de que preciso de um único filho do React. Portanto, vamos realmente ajustar isso um pouco
e vamos adicionar uma visão extra aqui, uma visão extra que envolve tudo,
todo o meu componente tocável dentro dessa visão externa e nessa visão extra, adicionarei um estilo de estilos palpáveis ou qualquer outra
coisa você deseja nomeá-lo e esse estilo palpável agora é adicionado aqui na minha folha de estilo.
Isso agora recebe o objeto
oculto de estouro, então adicionamos isso aqui e agora também recebe o mesmo raio da borda que temos em
todo o carrinho, então o raio da borda de 10 aqui e isso garantirá a manutenção da sombra, para que ainda funciona
porque o estouro oculto teria cortado isso e agora, para livrar-se desse outro erro
aqui, podemos simplesmente envolver mais uma exibição em todo o conteúdo dentro do componente tocável, para que
cumpramos este critério de ter apenas um item filho no componente tocável e agora com isso,
temos o mesmo comportamento de antes no iOS. A propósito, o carrinho de compras não aciona
essa navegação de detalhes que é boa e no Android,
agora também temos o efeito cascata que respeita nossos cantos arredondados, o que nos leva
à visualização de detalhes e o carrinho de compras também não faz o que não deveria .
Então, com isso, agora temos a navegação que precisamos,
temos a aparência que precisamos aqui.
Agora podemos ir para a página de detalhes e agora devemos ter certeza de que essa página de detalhes também tenha a aparência que
deve ter.