Na tela de detalhes do produto, já começamos a trabalhar nisso, mas não estamos produzindo
nada útil lá, agora é hora
de mudar isso.
Para isso, substituirei o código jsx que estamos usando atualmente por uma visualização de rolagem, porque, como
mencionei anteriormente, exibiremos nossa imagem lá,
nossa descrição do produto e essa pode ser uma descrição muito
longa ou simplesmente vendo isso em
um dispositivo menor ou no modo paisagem,
então, definitivamente, queremos ter algum conteúdo rolável lá e, a propósito, não precisamos
de uma lista simples aqui porque o conteúdo não será
infinitamente longo, sabemos praticamente que ele não será com tanto tempo de antecedência, para que a
visualização de rolagem seja perfeitamente adequada e, nessa visualização de rolagem, agora você pode adicionar um componente de imagem que produza a imagem do
produto na parte superior, digamos, e abaixo disso, podemos adicionar nosso botão para permitir adicione isso a um carrinho e abaixo disso, podemos ter nosso texto, como exibir o preço e, talvez, o
texto da descrição. Portanto, para a imagem, precisamos
configurar o suporte de origem e esse é um objeto que possui uma propriedade URI e, é claro, temos
nosso produto selecionado aqui, portanto, a fonte é apenas selecionadaProduct. imageUrl porque o produto selecionado é
do tipo que definimos em nosso modelo de produtos. No botão aqui, podemos adicionar um título de
adicionar ao carrinho, porque no final é o que esse botão deve fazer e o onPress não faz
nada por enquanto, mas mais tarde iremos adicioná-lo ao carrinho. Então, aqui eu quero exibir o preço,
não precisamos
exibir o título, porque isso já faz parte
do cabeçalho, então vemos o título lá, mas aqui eu quero exibir o preço em
dólares, referindo-se ao produto selecionado. preço para fixar 2 o
que eu fiz antes e depois lá
embaixo também a descrição, então aqui nós selecionamosProduto. descrição, assim.
Ok,
então está bom, agora
é hora de um estilo, é claro.
Por exemplo, para a imagem, definitivamente teremos que definir uma largura e uma altura, porque é uma
imagem de rede, então aqui adicionarei o estilo da imagem que devo adicionar à minha folha de estilo.
Agora, para os textos aqui, este texto deve ter um estilo de preço,
talvez o que devemos adicionar e, então, aqui, este texto deve ter um estilo de descrição, talvez, pareça um nome adequado.
Agora, na folha de estilo, temos que adicionar todas essas coisas, então vamos começar a imagem.
Aí adicionarei uma largura de 100%, isso deve
levar a largura total disponível e uma altura de 300 talvez, e é claro
que você pode brincar com
isso, também pode usar um valor percentual para isso ou usar a API de dimensões para tipo de calcular isso dinamicamente.
Posteriormente, eu quero meu preço, esse texto de preço deve
ter um tamanho de fonte 20, porque as pessoas devem poder vê-lo, uma cor dessa cor acinzentada, essa
cor acinzentada escura que eu já usei anteriormente e um alinhamento de texto no centro para
que ele esteja sempre
centralizado, também uma margem no eixo vertical de 20, talvez, em torno dele, de 20 e, posteriormente, a descrição.
A descrição realmente pode ter um tamanho de fonte digamos 14, vamos ver se isso funciona e, também, usar
o centro de alinhamento de texto, algo assim. Se salvarmos isso, vamos dar
uma olhada nisso, não parece tão ruim. Agora, para o botão, quero definir uma cor diferente, então adicionarei cores aqui e
as definirei nas cores que precisamos importar, é claro, da nossa pasta de constantes, Colors. primário e agora, se salvarmos isso,
isso parecerá muito bom. No Android, você vê que o botão fica diretamente abaixo da imagem
e que é um botão de largura total.
É o mesmo aqui para iOS, lá
simplesmente não o vemos,
mas se eu tocar aqui, você também verá que esse botão é pressionado e, na verdade, não é o que eu quero aqui.
Então, o que farei é envolver esse botão em uma exibição que darei um estilo de, digamos, ações, mesmo que seja apenas uma
ação aqui, você pode ter vários botões aqui para coisas diferentes.
Então, adicionarei minha chave de ações aqui à folha de estilo
e, aí, podemos definir uma margem no eixo vertical de 10 para cima e para baixo e alinhar
seus itens
no centro que, porque a direção flexível padrão é a coluna, centraliza horizontalmente e agora temos mais espaçamento
aqui e vemos isso ainda melhor no
Android, mais espaçamento e o botão agora não estica como seria, sua configuração de alinhamento
padrão mais, mas ocupa apenas a largura necessária e está alinhada no centro.
Portanto, esta é
a
configuração que eu vou seguir, é claro que você ainda pode ajustar isso de
maneiras diferentes, se desejar, para
mim isso não parece muito ruim, vamos ver também como um item diferente, talvez também este,
sim , isso tudo parece muito bom.
Agora, para um texto mais longo aqui, porém, você vê que não é tão bonito assim, deve haver mais espaçamento.
Na verdade, na descrição, também adicionarei uma pequena margem horizontal, digamos 20, para que tenhamos um espaçamento em torno disso, para
que, se dermos uma outra olhada nisso, você vê agora que isso automaticamente salta para uma nova linha que
deveria .
Ok,
está ótimo, agora
temos a tela de detalhes do produto.
Agora, antes de continuarmos, quero trazer minhas próprias fontes e usá-las porque não estou feliz com as fontes
padrão.