Então, irei para a tela de visão geral do produto porque, antes de
adicionar um navegador, quero poder
ver pelo menos algo nessa tela e, portanto, aqui, agora precisamos importar o seletor de uso do React Redux, porque isso nos permitirá
toque na loja Redux e obtenha nossos produtos a partir daí.
Então, aqui, no final, o que podemos fazer é obter nossos produtos e armazená-los em produtos constantes, chamando o
seletor de uso e, como você
aprendeu no módulo anterior sobre gerenciamento de estado no Redux, o seletor de uso assume uma função que
recebe automaticamente o estado , o estado Redux como uma entrada e, em seguida, retorna todos os dados que você deseja obter
de lá e
de lá no estado Redux.
Quero aproveitar a fatia de meus produtos e você deve usar o nome que usa aqui nos redutores combinados para
obter isso. estado, os dados gerenciados com os produtos para o usuário.
Então, aqui vou dizer produtos estatais e agora nessa parte do nosso estado, quero obter produtos
disponíveis, então vamos lá. produtos disponíveis aqui e esta é
esta sintaxe da função de seta curta, na qual a peça no lado direito da
seta é retornada automaticamente.
Então é isso que está agora armazenado nos produtos e, portanto, aqui na lista simples,
é claro que podemos definir o suporte de dados igual aos nossos produtos aqui, que selecionamos porque isso será uma matriz
e é exatamente isso que os dados precisam.
Também adicionarei o extrator de chaves aqui, dependendo da versão do React Native que você estiver usando, você não
precisará disso porque cada produto em nosso aplicativo possui um ID e as versões mais recentes da lista simples também procuram por ID e não apenas
por uma chave, mas no caso de você estar trabalhando com uma versão mais antiga, é necessário configurar esta função extratora de chaves, e
isso aceita uma função que fornece o item
que está sendo visualizado e é preciso informar qual deve ser sua chave exclusiva nessa item
e, claro, esse é o item. id, novamente, as versões
mais recentes do React Native não precisam disso. Agora, com isso, também precisamos fornecer o suporte
do item de renderização que aponta para uma função que renderiza nossos diferentes itens de lista e aqui, começarei
simples e refinaremos isso mais tarde e, por enquanto, importarei o componente de texto de React Native e
produz o título do produto em um componente de texto.
Então, aqui, obtemos os dados do item e o valor de retorno dessa função que precisamos fornecer
para renderizar o item deve retornar
um elemento jsx no final.
Então, aqui vou retornar um elemento de texto e, aí, output itemData. item. title e eu posso fazer isso porque os
dados do item são recebidos pelo React Native, isso tem um suporte de item, isso também é algo que o
React Native fornece e cada item aqui, é claro, é apenas um item em nossos
produtos, portanto, é desse tipo de dados e, portanto, ele tem um suporte de título, é claro, porque é
isso que estou
atribuindo aqui; portanto, teremos um suporte de título aqui que eu possa gerar e, é claro, essa não
é a forma final de como um produto deve ser a lista, mas é o que
eu uso para começar, para que possamos ver algo na tela. Com isso, falando da tela, é claro que é hora de
configurar o navegador para que possamos realmente ver algo na tela e que tenhamos telas.
Portanto, aqui na pasta de navegação, adicionarei meu ShopNavigator. js e, lá, adicionaremos um monte de navegação ao
longo deste módulo, portanto, definitivamente precisaremos importar da navegação do React e, é claro, começarei com um navegador de pilha normal,
que podemos criar com a ajuda do crie a função de navegador de pilha e, em seguida,
vamos simplesmente criá-la aqui e chamarei de navegador de produtos, é o que eu armazeno aqui, o
resultado de criar navegador
de pilha
e o resultado é um componente React, se você se lembra e se lembra também
, o create create navigator usa um objeto Javascript como o primeiro argumento em que mapeamos os
identificadores de tela para componentes React que devem ser carregados como telas.
Então, aqui, é claro, vou começar com a tela de visão geral dos produtos e importá-la da pasta de
telas e da parte da loja e do arquivo de tela de visão geral de produtos e, portanto, a primeira coisa
que quero mapear nesse navegador de
pilha é produtos visão geral ou como você deseja nomear isso, que é mapeado para a tela de visão geral
dos produtos.
Agora, é claro, para este navegador de pilha que eventualmente terá várias telas, também passarei um segundo argumento para criar
o navegador de pilha, que é um objeto que nos permite configurar o navegador inteiro e,
por exemplo, podemos configurar opções de navegação padrão para em todas as telas e lá, quero
configurar a cor de fundo do cabeçalho e assim por diante.
Então, aqui vou configurar um objeto Javascript onde posso definir o estilo do cabeçalho para outro objeto Javascript, onde podemos definir a cor do
plano de fundo para qualquer cor de sua escolha e é agora que a pasta
de constantes entra em ação, onde adicionarei uma cores. arquivo js, onde eu simplesmente quero exportar um
objeto Javascript padrão com uma cor primária e uma cor de destaque e você pode nomear essas chaves como quiser
e agora selecionei algumas cores agradáveis
que quero usar aqui, mas você pode usar a cor que desejar quer.
Minha cor principal será o código hexadecimal de # c2185b e a cor de destaque terá um
código hexadecimal de # ffc107.
Agora, portanto, de volta ao navegador da loja, podemos importar dessa pasta constantes, ainda das cores que
encontramos na pasta constantes assim e aqui, a cor do plano de fundo que configurarei para um estilo
de cabeçalho aqui é cores. primário.
Agora, com isso adicionado, também adicionarei
uma cor de tonalidade de cabeçalho que colore o texto do título, por exemplo, e definirei isso para
branco, porque essa cor principal que configurei é como uma cor rosa-avermelhada bastante forte e, portanto, branco é a
cor que devemos usar para que fique claramente legível e eu realmente quero diferir quanto à aparência do
cabeçalho com base na plataforma em que estamos rodando.
Portanto, é hora de importar a plataforma do React Native e uma observação lateral: neste aplicativo de prática, na verdade, não
vou me concentrar muito nas diferenças de plataforma e no design responsivo; farei isso até
certo ponto para que haja alguma diferença básica entre as diferentes plataformas e que o aplicativo
fica bem em diferentes tamanhos de dispositivo, mas
não o testarei em uma ampla variedade de tamanhos de dispositivo.
Você aprendeu tudo o que precisa para torná-lo o mais responsivo possível,
portanto, fique à vontade para sempre ajustar isso mais do que eu faço aqui neste módulo.
No final, eu só quero ter certeza de que este módulo não leve centenas de
horas, portanto, vou manter isso no mínimo.
Com esse conjunto, a plataforma aqui parece ser importante para mim, porque eu realmente quero ter uma
aparência diferente no cabeçalho, com base no fato de estarmos rodando no iOS ou Android.
Portanto, a cor do plano de fundo nem sempre é a cor principal, mas em vez disso, eu o definirei
apenas se o sistema operacional em que estamos rodando for o
Android, caso contrário, definirei a cor do plano de fundo como uma sequência vazia, o que significa
que o padrão será
adotado e, portanto, para a cor
da tonalidade do cabeçalho, isso também deve ser branco se estiver no Android; caso contrário, não a definirei como uma sequência vazia, mas, em
vez disso, desejo usar a cor principal como cor
de texto no iOS, portanto, se não estamos no Android. Com isso, o navegador de produtos é configurado.
Agora, como você aprendeu no módulo de navegação, não exporta esse navegador; em vez
disso, envolve-o em um contêiner de aplicativo criado com a função de criação de contêiner de
aplicativo obtida na navegação React.
Portanto, agora podemos exportar o contêiner de aplicativo de criação padrão e passar o navegador de produtos, assim.
Agora é a navegação de exportação configurada e é isso que agora
podemos usar no aplicativo. js.
Então, no aplicativo. js, agora podemos importar nosso navegador da loja da
navegação, navegador da loja e agora é isso que eu uso dentro das tags do meu provedor aqui,
para o navegador da loja como este. Isso também significa que podemos nos livrar dessas importações do
React Native porque não usamos mais nenhum desses componentes do React Native nesse componente. Com todo esse trabalho, agora poderemos
realmente executar nosso aplicativo e, esperançosamente, chegar à tela de visão geral de produtos, onde
vemos uma lista básica e não estilizada de títulos de produtos.
Portanto, se eu salvar isso agora, salve todas essas alterações e verifique se o npm começa a
ser executado e se você tem emuladores onde
você carregou isso, recebo um erro que o objeto não é um construtor, avaliando o novo padrão do produto.
O problema deve ser que na pasta do meu modelo aqui, esqueci de exportar minha classe de produto como padrão.
É claro que isso precisa ser
adicionado aqui; caso contrário, você não pode importar
deste arquivo, faz sentido.
Então agora isso funciona e agora
aqui, vejo os títulos dos meus produtos.
Também vemos os diferentes cabeçalhos, o que
não vemos é um título de cabeçalho, porque ainda não adicionei nenhum. Portanto, na tela de visão geral
de produtos, é claro que podemos adicionar nossa tela especial apenas às opções de navegação que serão
mescladas às opções de navegação padrão que configuramos diretamente no navegador usando a tela de visão geral de
produtos, nossa constante aqui que mantém nosso componente e adiciona o propriedade de opções de
navegação e aqui podemos usar opções de navegação estática no momento, adicionar um título de cabeçalho e definir isso para todos
os produtos, por exemplo,
e se agora salvarmos isso, veremos todos os produtos aqui no cabeçalho.
Portanto, agora isso está realmente decente, podemos ver nossos produtos.
É claro que esses produtos realmente não têm a aparência
que deveriam, então o próximo passo será garantir que aqui realmente tenhamos a aparência que precisamos nesta aplicação.