1 00:00:02,290 --> 00:00:08,230 Agora, com esse contêiner de entrada definido e com alguns novos estilos cobertos, podemos 2 00:00:08,270 --> 00:00:12,580 fazer algo que mencionei que sempre seria uma boa idéia, 3 00:00:12,640 --> 00:00:16,380 podemos dividir nosso aplicativo em vários componentes. 4 00:00:16,600 --> 00:00:17,800 Esse visual aqui, esse 5 00:00:17,800 --> 00:00:24,100 visual do contêiner de entrada, esse visual do cartão é provavelmente algo que queremos usar também em outras partes 6 00:00:24,100 --> 00:00:24,890 do aplicativo. 7 00:00:25,060 --> 00:00:28,450 Podemos ter itens diferentes que queremos apresentar em um cartão 8 00:00:28,450 --> 00:00:32,680 como esse; considere que você está construindo uma loja on-line onde cada produto 9 00:00:32,680 --> 00:00:39,160 desse cartão está na tela de visão geral. Agora, para evitar repetir essa definição de estilo repetidamente, 10 00:00:39,160 --> 00:00:45,130 podemos terceirizá-la em um componente separado, um componente que realmente não possui muita lógica, mas que 11 00:00:45,160 --> 00:00:46,950 controla o estilo de 12 00:00:47,080 --> 00:00:53,050 seu conteúdo, um componente de apresentação puro. Tecnicamente, ainda é um componente React regular e, portanto, vou criar um novo 13 00:00:53,050 --> 00:00:58,450 arquivo aqui na pasta de componentes e nomeá-lo como card. O nome é com você, mas é essa aparência típica 14 00:00:58,450 --> 00:00:59,400 de cartão, para 15 00:00:59,410 --> 00:01:01,510 que pareça um nome adequado para mim. 16 00:01:02,220 --> 00:01:11,290 Agora aqui, como sempre, importe o React do React e, em seguida, importe a visualização do React Native aqui e crie o 17 00:01:11,290 --> 00:01:20,830 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, 18 00:01:21,310 --> 00:01:22,900 nós será necessária 19 00:01:22,900 --> 00:01:28,630 a folha de estilo para criar um objeto de estilo, porque esse será o 20 00:01:28,630 --> 00:01:31,120 principal elemento desse componente; ele deve 21 00:01:31,120 --> 00:01:36,200 estar presente para envolver-se com qualquer conteúdo e aplicar algum estilo geral. 22 00:01:37,270 --> 00:01:42,600 Então agora eu vou para a tela inicial do jogo e vou pegar todos os estilos aqui do 23 00:01:42,700 --> 00:01:49,180 contêiner de entrada, copiá-los de lá e adicioná-los ao cartão. Aqui vou adicionar uma nova propriedade de cartão 24 00:01:49,180 --> 00:01:49,790 e 25 00:01:51,220 --> 00:01:54,880 usar meus estilos aqui e dentro do componente do cartão, 26 00:01:55,020 --> 00:01:59,670 terei uma marcação muito simples, por assim dizer, código jsx muito simples. 27 00:01:59,670 --> 00:02:05,900 É apenas uma visão que eu retorno aqui, que deve ser envolvida em adereços children, props children 28 00:02:05,910 --> 00:02:11,880 é aquele prop especial no React, que é basicamente o conteúdo que você passa entre as tags 29 00:02:11,880 --> 00:02:18,570 de abertura e fechamento do seu componente personalizado. Portanto, ele pode envolver-se em torno de qualquer conteúdo, porque o 30 00:02:18,570 --> 00:02:25,400 ú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. 31 00:02:25,510 --> 00:02:32,610 Agora, há apenas uma coisa: existem certos estilos aqui que provavelmente não devem ser definidos de dentro 32 00:02:32,610 --> 00:02:33,790 do cartão, 33 00:02:33,810 --> 00:02:41,580 nem todo cartão pode ter essa largura ou largura máxima e nem todo cartão deve centralizar seu conteúdo. 34 00:02:41,580 --> 00:02:47,220 Portanto, cortarei esses três itens a partir daí e só tenho a sombra e o preenchimento 35 00:02:47,220 --> 00:02:50,890 configurados aqui e quero tornar isso um pouco mais flexível. 36 00:02:50,970 --> 00:02:57,780 Além dos estilos de cartão, seria bom se também pudéssemos atribuir nossos próprios estilos de 37 00:02:57,780 --> 00:03:07,440 fora e talvez substituir alguns dos estilos de cartão. Podemos fazer isso passando um novo objeto para o suporte de estilo e 38 00:03:07,530 --> 00:03:13,730 distribuindo todas as propriedades, todos os pares de valores-chave de nossos cartões aqui para esse novo objeto. 39 00:03:13,800 --> 00:03:20,400 Esse é o operador de propagação, um recurso Javascript moderno que puxa todos os pares de valores-chave de um 40 00:03:20,460 --> 00:03:23,910 objeto e o adiciona a um novo objeto circundante. 41 00:03:24,150 --> 00:03:28,170 Então, copiamos todos os estilos definidos lá para este novo objeto e 42 00:03:28,170 --> 00:03:34,170 estou fazendo isso para que eu também possa adicionar outro par de valores-chave aqui ou outro conjunto de pares 43 00:03:34,170 --> 00:03:41,370 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 44 00:03:41,370 --> 00:03:42,090 personalizado, 45 00:03:42,090 --> 00:03:48,060 pego todos os pares de valores-chave definidos lá e os mesclamos neste objeto. Como faço isso neste segundo, isso 46 00:03:48,240 --> 00:03:53,760 substituirá todos os pares de valores-chave configurados no cartão de estilos, para que possamos substituir qualquer estilo 47 00:03:53,760 --> 00:03:56,700 configurado lá de fora quando usarmos nosso componente e 48 00:03:56,700 --> 00:04:02,100 quando adicionarmos estilos adicionais fora do componente, ele também mesclará isso e o considerará e com isso 49 00:04:02,140 --> 00:04:08,160 também podemos atribuir nossos próprios estilos de fora do componente do cartão quando usamos o componente do cartão e 50 00:04:08,160 --> 00:04:12,730 o uso do componente do cartão é algo que faria sentido na próxima etapa. 51 00:04:12,750 --> 00:04:20,040 Então, vamos para a tela inicial do jogo, importe o cartão da pasta de componentes e depois da 52 00:04:20,040 --> 00:04:28,220 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 53 00:04:28,220 --> 00:04:29,920 abertura e fechamento. 54 00:04:29,930 --> 00:04:35,420 Agora, novamente, quero definir meus próprios estilos, quero definir minha própria largura, largura máxima e itens de 55 00:04:35,510 --> 00:04:39,040 alinhamento, para manter o contêiner de entrada na folha de 56 00:04:39,320 --> 00:04:46,030 estilo lá em baixo, mas agora me livrar de todos os outros estilos lá, todos os estilos que estão agora configurados 57 00:04:46,100 --> 00:04:46,650 no 58 00:04:46,790 --> 00:04:54,920 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 59 00:04:54,980 --> 00:05:01,280 que tem efeito, porque no componente do cartão é esse suporte de estilo que Eu mesclo com meus outros estilos, 60 00:05:01,280 --> 00:05:10,250 portanto, para esse suporte de estilo, aponto para o contêiner de entrada de estilos. Agora, com isso, se salvarmos, estou recebendo um erro, 61 00:05:10,250 --> 00:05:12,330 o objeto não 62 00:05:12,350 --> 00:05:17,350 é uma função próxima à folha de estilo React Native. 63 00:05:17,420 --> 00:05:24,250 Então, no cartão. arquivo js como ele aponta aqui, algo está errado, até me dá o número da 64 00:05:24,260 --> 00:05:30,890 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 é 65 00:05:30,920 --> 00:05:31,640 errado, em 66 00:05:31,640 --> 00:05:35,760 vez disso, precisamos chamar a folha de estilo . criar para definir nossos próprios estilos, então essa 67 00:05:35,780 --> 00:05:37,010 é a sintaxe correta. 68 00:05:37,010 --> 00:05:42,240 Portanto, é um erro de sintaxe, não tecnicamente um erro de sintaxe, mas estou usando o objeto da folha de estilo incorretamente. 69 00:05:42,410 --> 00:05:46,430 Portanto, é um erro do meu lado, a mensagem de erro nos ajudou com isso 70 00:05:46,430 --> 00:05:52,420 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 71 00:05:52,430 --> 00:05:55,280 ter exatamente esse visual com as sombras e em breve.