A adição de ícones é super direta em um
aplicativo React Native que usa expo.
A propósito, podemos
nos livrar da importação
de botões, não precisamos mais do botão interno, mas voltamos aos ícones porque um ícone pode ser
adicionado importando algo e agora é @ expo / vector-icons.
Pode ser um nome de pacote um pouco estranho,
mas é exatamente isso, faz parte do kit de ferramentas expo, por assim dizer, é incluído
automaticamente em qualquer
projeto React Native que você criou com o expo e pode importar componentes que ajudam a renderizar ícones e
um componente bastante interessante, existe o componente ionicons. Para isso, você simplesmente precisa saber que existem diferentes conjuntos de
ícones incorporados à expo ou neste pacote de ícones vetoriais para ser mais preciso. Ionicons é um conjunto de ícones gerenciados pela equipe por
trás da ionic no final, então os ícones incluídos nesse conjunto são gerenciados por essa equipe
iônica e eu estou apenas falando sobre os ícones aqui, isso
não tem nada a ver conosco adicionando qualquer coisa, desde iônico ao aplicativo React Native, estamos apenas
usando seus ícones.
Você também tem outros conjuntos de ícones, como ícones ruins, ícones de materiais, portanto, muitos deles podem ser usados e um
ótimo lugar para aprender sobre todos os ícones incluídos e obter uma visão geral de todos os ícones incluídos é
a documentação oficial dos ícones da exposição que você encontra anexado a este vídeo também, um
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
diretório de ícones e uma longa lista de todos os ícones incluídos que você pode use e você sempre vê
a qual pacote de ícones pertence, também é possível procurar por ícones como remover
para encontrar todos os ícones que têm algo a ver com a remoção de coisas
e, em seguida, você vê que há algo no pacote ionicons, algo no material pacote de
ícones e assim por diante.
Agora, os ícones que procurei com antecedência são do pacote ionicons.
Então, aqui, vou importar ionicons do @ expo / vector-icons e agora agora é automaticamente um
componente que podemos usar em nosso código jsx para gerar um ícone
e, se tivéssemos usado ícones de material, esse também seria um componente apenas para produzir
um
ícone de material, mas eu quero usar um ícone de ionicon, então eu vou usá-lo e agora vou descer para o
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
e a melhor coisa é que um ícone aqui também pode ser aninhado em nosso botão, mesmo que o
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
componente de texto também, para que funcione.
Então, voltando ao ionicon aqui, no momento, não estou dizendo nada sobre
o ícone que quero usar e, lá, o ícone que escolhi antecipadamente tem o nome de md-remove.
Agora você diz ao React Native e ao tipo de exposição que deseja usar esse ícone adicionando o nome prop aqui no ionicons
e, em seguida, isso leva uma string com o nome do ícone que você encontra nesse diretório, certo?
Então, aqui eu escolhi este ícone aqui que eu
quero usar, então esse é o nome md-remove que agora usamos aqui.
Esse é o nome do ícone que adicionamos aqui.
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
a cor que esse ícone deve ter e aqui, eu vou definir isso para ter uma cor branca.
Agora vou copiar isso e usar o mesmo no botão maior, mas é claro que o ícone é
diferente,
aqui eu escolhi o md-add como um ícone e é claro que você pode explorar essa lista de ícones e
escolher ícones diferentes se você deseja e também pode tentar pacotes de ícones diferentes em vez
de ionicons ou até usar dois pacotes de ícones diferentes no mesmo componente.
Você não precisa se ater a apenas um pacote de ícones, pode misturá-los e combiná-los como quiser,
para que possamos renderizar um ionicon aqui e renderizar um ícone de material aqui, mas é
claro que você deve garantir que a aparência geral do seu aplicativo faça sentido.
Portanto, se você estiver misturando ícones muito descontroladamente, é provável que não pareça tão
bom; normalmente, você deseja manter um conjunto, mas não precisa tecnicamente.
Então, aqui, eu escolhi esses dois ícones e agora com isso, se salvarmos isso, iniciaremos um novo jogo aqui.
Agora, temos um ícone de mais e menos aqui para indicar se os números devem ser mais baixos ou mais altos e
isso é muito bom na minha opinião, porque isso nos dá uma maneira totalmente nova de criar interfaces de usuário
porque, com ícones, realmente temos outra ferramenta importante para criar ótimas experiências para o usuário.