1 00:00:02,300 --> 00:00:05,320 A adição de ícones é super direta em um 2 00:00:05,330 --> 00:00:07,760 aplicativo React Native que usa expo. 3 00:00:08,060 --> 00:00:09,670 A propósito, podemos 4 00:00:09,670 --> 00:00:11,530 nos livrar da importação 5 00:00:11,900 --> 00:00:18,830 de botões, não precisamos mais do botão interno, mas voltamos aos ícones porque um ícone pode ser 6 00:00:18,980 --> 00:00:23,180 adicionado importando algo e agora é @ expo / vector-icons. 7 00:00:23,180 --> 00:00:26,410 Pode ser um nome de pacote um pouco estranho, 8 00:00:26,420 --> 00:00:31,910 mas é exatamente isso, faz parte do kit de ferramentas expo, por assim dizer, é incluído 9 00:00:31,910 --> 00:00:33,260 automaticamente em qualquer 10 00:00:33,500 --> 00:00:40,250 projeto React Native que você criou com o expo e pode importar componentes que ajudam a renderizar ícones e 11 00:00:40,250 --> 00:00:45,920 um componente bastante interessante, existe o componente ionicons. Para isso, você simplesmente precisa saber que existem diferentes conjuntos de 12 00:00:45,920 --> 00:00:52,790 ícones incorporados à expo ou neste pacote de ícones vetoriais para ser mais preciso. Ionicons é um conjunto de ícones gerenciados pela equipe por 13 00:00:52,820 --> 00:00:58,490 trás da ionic no final, então os ícones incluídos nesse conjunto são gerenciados por essa equipe 14 00:00:58,490 --> 00:01:02,450 iônica e eu estou apenas falando sobre os ícones aqui, isso 15 00:01:02,450 --> 00:01:08,300 não tem nada a ver conosco adicionando qualquer coisa, desde iônico ao aplicativo React Native, estamos apenas 16 00:01:08,300 --> 00:01:09,650 usando seus ícones. 17 00:01:09,650 --> 00:01:16,080 Você também tem outros conjuntos de ícones, como ícones ruins, ícones de materiais, portanto, muitos deles podem ser usados e um 18 00:01:16,190 --> 00:01:22,520 ótimo lugar para aprender sobre todos os ícones incluídos e obter uma visão geral de todos os ícones incluídos é 19 00:01:22,520 --> 00:01:27,680 a documentação oficial dos ícones da exposição que você encontra anexado a este vídeo também, um 20 00:01:27,680 --> 00:01:34,270 link para esta documentação e você pode não apenas aprender mais sobre como usá-los, mas também encontrará o link para o 21 00:01:34,270 --> 00:01:40,460 diretório de ícones e uma longa lista de todos os ícones incluídos que você pode use e você sempre vê 22 00:01:40,470 --> 00:01:45,110 a qual pacote de ícones pertence, também é possível procurar por ícones como remover 23 00:01:45,110 --> 00:01:50,030 para encontrar todos os ícones que têm algo a ver com a remoção de coisas 24 00:01:50,030 --> 00:01:55,070 e, em seguida, você vê que há algo no pacote ionicons, algo no material pacote de 25 00:01:55,070 --> 00:01:56,820 ícones e assim por diante. 26 00:01:57,140 --> 00:02:01,820 Agora, os ícones que procurei com antecedência são do pacote ionicons. 27 00:02:01,820 --> 00:02:07,040 Então, aqui, vou importar ionicons do @ expo / vector-icons e agora agora é automaticamente um 28 00:02:07,040 --> 00:02:10,830 componente que podemos usar em nosso código jsx para gerar um ícone 29 00:02:10,940 --> 00:02:15,820 e, se tivéssemos usado ícones de material, esse também seria um componente apenas para produzir 30 00:02:15,820 --> 00:02:16,270 um 31 00:02:16,340 --> 00:02:22,810 ícone de material, mas eu quero usar um ícone de ionicon, então eu vou usá-lo e agora vou descer para o 32 00:02:22,810 --> 00:02:30,040 código jsx e, em vez de usar mais baixo aqui, na verdade, produzo um ionicon, um ícone como esse aqui no meu botão 33 00:02:30,040 --> 00:02:36,250 e a melhor coisa é que um ícone aqui também pode ser aninhado em nosso botão, mesmo que o 34 00:02:36,250 --> 00:02:43,930 que estamos produzindo aqui, adote filhos, seja em vez de um nó de texto, mas com suporte, você pode gerar um componente de ícone nesse 35 00:02:43,930 --> 00:02:46,290 componente de texto também, para que funcione. 36 00:02:47,140 --> 00:02:51,910 Então, voltando ao ionicon aqui, no momento, não estou dizendo nada sobre 37 00:02:52,390 --> 00:02:58,400 o ícone que quero usar e, lá, o ícone que escolhi antecipadamente tem o nome de md-remove. 38 00:02:58,900 --> 00:03:06,430 Agora você diz ao React Native e ao tipo de exposição que deseja usar esse ícone adicionando o nome prop aqui no ionicons 39 00:03:06,520 --> 00:03:12,520 e, em seguida, isso leva uma string com o nome do ícone que você encontra nesse diretório, certo? 40 00:03:12,550 --> 00:03:15,970 Então, aqui eu escolhi este ícone aqui que eu 41 00:03:16,000 --> 00:03:20,440 quero usar, então esse é o nome md-remove que agora usamos aqui. 42 00:03:20,530 --> 00:03:22,520 Esse é o nome do ícone que adicionamos aqui. 43 00:03:22,600 --> 00:03:28,660 Em seguida, você também pode configurar o tamanho do ícone em pixels e aqui eu vou com 24 para ter um bom ícone grande e também 44 00:03:28,660 --> 00:03:33,250 a cor que esse ícone deve ter e aqui, eu vou definir isso para ter uma cor branca. 45 00:03:33,280 --> 00:03:38,920 Agora vou copiar isso e usar o mesmo no botão maior, mas é claro que o ícone é 46 00:03:38,920 --> 00:03:39,320 diferente, 47 00:03:39,340 --> 00:03:45,580 aqui eu escolhi o md-add como um ícone e é claro que você pode explorar essa lista de ícones e 48 00:03:45,610 --> 00:03:50,650 escolher ícones diferentes se você deseja e também pode tentar pacotes de ícones diferentes em vez 49 00:03:50,650 --> 00:03:54,830 de ionicons ou até usar dois pacotes de ícones diferentes no mesmo componente. 50 00:03:54,850 --> 00:03:59,650 Você não precisa se ater a apenas um pacote de ícones, pode misturá-los e combiná-los como quiser, 51 00:03:59,650 --> 00:04:04,150 para que possamos renderizar um ionicon aqui e renderizar um ícone de material aqui, mas é 52 00:04:04,150 --> 00:04:08,350 claro que você deve garantir que a aparência geral do seu aplicativo faça sentido. 53 00:04:08,350 --> 00:04:13,840 Portanto, se você estiver misturando ícones muito descontroladamente, é provável que não pareça tão 54 00:04:13,840 --> 00:04:18,160 bom; normalmente, você deseja manter um conjunto, mas não precisa tecnicamente. 55 00:04:18,190 --> 00:04:23,500 Então, aqui, eu escolhi esses dois ícones e agora com isso, se salvarmos isso, iniciaremos um novo jogo aqui. 56 00:04:23,500 --> 00:04:30,190 Agora, temos um ícone de mais e menos aqui para indicar se os números devem ser mais baixos ou mais altos e 57 00:04:30,190 --> 00:04:36,100 isso é muito bom na minha opinião, porque isso nos dá uma maneira totalmente nova de criar interfaces de usuário 58 00:04:36,430 --> 00:04:41,380 porque, com ícones, realmente temos outra ferramenta importante para criar ótimas experiências para o usuário.