Agora, com esse contêiner de entrada definido e com alguns novos estilos cobertos, podemos
fazer algo que mencionei que sempre seria uma boa idéia,
podemos dividir nosso aplicativo em vários componentes.
Esse visual aqui, esse
visual do contêiner de entrada, esse visual do cartão é provavelmente algo que queremos usar também em outras partes
do aplicativo.
Podemos ter itens diferentes que queremos apresentar em um cartão
como esse; considere que você está construindo uma loja on-line onde cada produto
desse cartão está na tela de visão geral. Agora, para evitar repetir essa definição de estilo repetidamente,
podemos terceirizá-la em um componente separado, um componente que realmente não possui muita lógica, mas que
controla o estilo de
seu conteúdo, um componente de apresentação puro. Tecnicamente, ainda é um componente React regular e, portanto, vou criar um novo
arquivo aqui na pasta de componentes e nomeá-lo como card. O nome é com você, mas é essa aparência típica
de cartão, para
que pareça um nome adequado para mim.
Agora aqui, como sempre, importe o React do React e, em seguida, importe a visualização do React Native aqui e crie o
componente do cartão, um componente funcional como este que você no final exporta como padrão e, obviamente, já que se trata de apresentação aqui,
nós será necessária
a folha de estilo para criar um objeto de estilo, porque esse será o
principal elemento desse componente; ele deve
estar presente para envolver-se com qualquer conteúdo e aplicar algum estilo geral.
Então agora eu vou para a tela inicial do jogo e vou pegar todos os estilos aqui do
contêiner de entrada, copiá-los de lá e adicioná-los ao cartão. Aqui vou adicionar uma nova propriedade de cartão
e
usar meus estilos aqui e dentro do componente do cartão,
terei uma marcação muito simples, por assim dizer, código jsx muito simples.
É apenas uma visão que eu retorno aqui, que deve ser envolvida em adereços children, props children
é aquele prop especial no React, que é basicamente o conteúdo que você passa entre as tags
de abertura e fechamento do seu componente personalizado. Portanto, ele pode envolver-se em torno de qualquer conteúdo, porque o
único objetivo deste componente de cartão é aplicar algum estilo ao contêiner ao redor e fazemos isso adicionando o cartão de estilos aqui.
Agora, há apenas uma coisa: existem certos estilos aqui que provavelmente não devem ser definidos de dentro
do cartão,
nem todo cartão pode ter essa largura ou largura máxima e nem todo cartão deve centralizar seu conteúdo.
Portanto, cortarei esses três itens a partir daí e só tenho a sombra e o preenchimento
configurados aqui e quero tornar isso um pouco mais flexível.
Além dos estilos de cartão, seria bom se também pudéssemos atribuir nossos próprios estilos de
fora e talvez substituir alguns dos estilos de cartão. Podemos fazer isso passando um novo objeto para o suporte de estilo e
distribuindo todas as propriedades, todos os pares de valores-chave de nossos cartões aqui para esse novo objeto.
Esse é o operador de propagação, um recurso Javascript moderno que puxa todos os pares de valores-chave de um
objeto e o adiciona a um novo objeto circundante.
Então, copiamos todos os estilos definidos lá para este novo objeto e
estou fazendo isso para que eu também possa adicionar outro par de valores-chave aqui ou outro conjunto de pares
de valores-chave, onde tomo todos os estilos definidos nos estilos de adereços, portanto, no suporte de estilo que passei para meu próprio componente
personalizado,
pego todos os pares de valores-chave definidos lá e os mesclamos neste objeto. Como faço isso neste segundo, isso
substituirá todos os pares de valores-chave configurados no cartão de estilos, para que possamos substituir qualquer estilo
configurado lá de fora quando usarmos nosso componente e
quando adicionarmos estilos adicionais fora do componente, ele também mesclará isso e o considerará e com isso
também podemos atribuir nossos próprios estilos de fora do componente do cartão quando usamos o componente do cartão e
o uso do componente do cartão é algo que faria sentido na próxima etapa.
Então, vamos para a tela inicial do jogo, importe o cartão da pasta de componentes e depois da
pasta do cartão e substitua nossa visualização do contêiner de entrada aqui por cartão, como este, assim, com as tags de
abertura e fechamento.
Agora, novamente, quero definir meus próprios estilos, quero definir minha própria largura, largura máxima e itens de
alinhamento, para manter o contêiner de entrada na folha de
estilo lá em baixo, mas agora me livrar de todos os outros estilos lá, todos os estilos que estão agora configurados
no
cartão, de modo a mantermos apenas a largura e o alinhamento aqui e, em seguida, o adicionamos aqui ao cartão no suporte de estilo aceito ou
que tem efeito, porque no componente do cartão é esse suporte de estilo que Eu mesclo com meus outros estilos,
portanto, para esse suporte de estilo, aponto para o contêiner de entrada de estilos. Agora, com isso, se salvarmos, estou recebendo um erro,
o objeto não
é uma função próxima à folha de estilo React Native.
Então, no cartão. arquivo js como ele aponta aqui, algo está errado, até me dá o número da
linha, é a linha 10, é isso que esse número significa aqui e sim, meu problema aqui é que eu uso a folha de estilo assim, isso é
errado, em
vez disso, precisamos chamar a folha de estilo . criar para definir nossos próprios estilos, então essa
é a sintaxe correta.
Portanto, é um erro de sintaxe, não tecnicamente um erro de sintaxe, mas estou usando o objeto da folha de estilo incorretamente.
Portanto, é um erro do meu lado, a mensagem de erro nos ajudou com isso
e agora temos a mesma aparência de antes, mas temos o cartão reutilizável que agora podemos usar em qualquer lugar onde queremos
ter exatamente esse visual com as sombras e em breve.