Ícones e fontes do React Native com react-native-vector-icons

Quando se trata de UI/UX, as fontes e os ícones são importantes. Os ícones servem como um auxílio visual para os usuários navegarem em seu aplicativo, e sua escolha de fonte (e cor da fonte) define o tom para seu aplicativo ou marca.

Sejamos realistas: dificilmente você compraria seguro de vida de uma empresa que usa uma fonte de desenho animado, como Alloy Ink ou Vegan Style em seus contratos. E eu não conseguia imaginar um aplicativo sem ícones. Sério, se você souber de algum na App Store, deixe-me um comentário com um link-estou curioso!

Neste tutorial do React Native, mostraremos como:

• Configure um projeto básico React Native com TypeScript
• Configure react-native-vector-icons e vincule fontes personalizadas com código nativo zero
• Construir componentes para consumir nossa família de fontes e ícones

O código-fonte completo associado a esta demonstração está disponível em GitHub .

Criando um projeto React Native

Para inicializar um projeto React Native, cole o seguinte em seu terminal:

 npx react-native init yourAppNameHere--template react-native-template-typescript && cd yourAppNameHere

Isso criará um novo projeto React Native com um modelo TypeScript. Navegue até a pasta do projeto.

A próxima etapa é construir nosso aplicativo para cada sistema operacional. Primeiro, iOS:

 yarn run ios

Agora, para Android:

 yarn run android

Reagir ativo nativo

Como desenvolvedores de software, qualquer coisa que melhore nosso fluxo de trabalho é uma mudança bem-vinda. React Native Asset torna a vinculação e desvinculação mais simples do que usar o link react-native .

Primeiro, instale react-native-asset globalmente:

 yarn global add react-native-asset

Na pasta do seu projeto, crie uma nova pasta chamada ativos e, a seguir, crie outra pasta dentro dela chamada fontes . Ou você pode usar o terminal:

 mkdir-p asset/fonts

Vá para Google Fonts para fazer download da família de fontes. Para este exemplo, usaremos Nunito , mas fique à vontade para divergir com uma fonte de sua escolha.

Depois de fazer download do arquivo, descompacte-o e adicione as espessuras de fonte escolhidas à pasta de fontes:

Agora, crie um novo arquivo na pasta do seu projeto chamado react-native.config.js :

 touch react-native.config.js

Em seguida, adicione o seguinte:

 module.exports={ ativos: ['./assets/fonts'],
};

Finalmente, use o React Native Asset para vincular os arquivos de fonte. Digite o seguinte em seu terminal:

 react-native-asset

Se você precisar remover e desvincular uma fonte, simplesmente exclua-a da pasta fonts e execute react-native-asset novamente. Simples assim.

Criação de um componente de texto no React Native

Vamos criar um componente de texto personalizado para consumir nossas novas fontes. Crie uma pasta chamada components com um arquivo chamado Text.tsx e adicione o seguinte código:

 import React from'react';
import { Texto como ReactText, StyleSheet, StyleProp, TextStyle,
} de'react-native'; tipo TextProps={ filhos: React.ReactNode; estilo ?: StyleProp ;
}; export const Text=({style, children}: TextProps)=> { return  {children} ;
}; estilos const=StyleSheet.create ({ Fonte: { fontFamily:'Nunito-Regular', },
}); 

O código acima cria um componente Texto com uma família de fontes de Nunito e uma espessura de fonte que podemos usar em nosso aplicativo. Pegamos os filhos e tipos de estilo ( TextProps ) do React Native.

Agora que temos nosso componente Texto, vamos usá-lo!

Substitua seu arquivo App.tsx pelo seguinte:

 import React from'react';
importar {SafeAreaView, StyleSheet, StatusBar} de'react-native';
import {Text} de'./components/Text'; const App=()=> { Retorna ( <>    Esta espessura da fonte é'regular'  Esta espessura da fonte é'negrito'   );
}; estilos const=StyleSheet.create ({ container: { flex: 1, justifyContent:'center', alignItems:'center', }, negrito: { fontFamily:'Nunito-Bold', },
}); exportar aplicativo padrão; 

Observe que temos dois peso da fonte diferentes. Nosso componente Texto na linha 11 tem um peso da fonte em negrito. Para conseguir isso, substitua as configurações de peso da fonte por uma fonte em negrito usando StyleSheet.create (linha 23) e, a seguir, passe o valor para o prop de estilo no Componente de texto .

Reagir ícones vetoriais nativos

Com quase 13 , 000 ícones gratuitos e 14,5k Estrelas do GitHub, React Native Vector Icons é uma excelente escolha para todas as suas necessidades de ícone. Muitas bibliotecas de UI populares, como Magnus UI, React Native Paper e React Native Elements, usam React Native Vector Icons, então você está em boa companhia! E se você não encontrar o que procura, pode até fazer seus próprios ícones.

Para usar este pacote, você precisa instalá-lo. Vá até o seu terminal e digite:

 yarn add react-native-vector-icons && yarn add-D @ types/react-native-vector-icons && cd ios && pod install && cd..

Isso instalará a biblioteca e a dependência de desenvolvimento. Navegue até a pasta do iOS, instale o CocoaPods do seu projeto e navegue de volta para a pasta do projeto.

Criação de um componente de ícone no React Native

Agora vamos construir um componente de ícone reutilizável.

Na pasta componentes , crie um novo arquivo chamado Icon.tsx :

 componentes do cd && toque em Icon.tsx && cd..

Em seguida, adicione o seguinte código:

 import React from'react';
importar MIcon de'react-native-vector-icons/MaterialCommunityIcons'; MIcon.loadFont (); tipo IconSizeProps={ iconSizes: keyof typeof IconSizes;
}; interface de exportação IconProps { size: IconSizeProps ['iconSizes']; nome: string; cor: string;
} export const IconSizes={ pequeno: 13, meio: 18, grande: 23, extraLarge: 27,
}; export const MaterialIcon=({size, name, color}: IconProps)=> ( 
); 

Para cada pacote de ícones que você deseja usar, importe e carregue-o como temos na linha 2 (importar conjunto de pacotes de ícones da comunidade de materiais) e na linha 4 (carregar o pacote de ícones).

Carregar os ícones dessa forma elimina a necessidade de adicionar qualquer código nativo para usá-los.

Podemos exportar os componentes com três adereços que nos permitem controlar a cor, o tamanho e o tipo de ícone:

• size é predefinido por IconSizes
• nome define o tipo de ícone
• cor define a cor do ícone

Se você é novo no TypeScript e está se perguntando o que está acontecendo nas linhas 7 e 11, passe o mouse sobre iconSizes e verá isto:

keyof

No TypeScript, você pode criar tipos a partir de valores JavaScript. O [keyof] ( https://www.typescriptlang.org/docs/handbook/2/keyof-types.html ) O operador pega um tipo de objeto ( IconSizes na linha 16) e retorna uma string ou união literal de suas chaves:

 iconSizes: string | número | símbolo

typeof

Versão do TypeScript de typeof retorna os tipos de valor de um objeto:

 iconSizes: { número pequeno; meio: número; número grande; extraLarge: número;
}

keyof typeof

keyof typeof indexa as chaves do objeto e retorna uma união de tipos literais:

 iconSizes:"pequeno"|"médio"|"grande"|"extra grande"

Agora, graças ao poder do TypeScript, toda vez que você usar a propriedade de tamanho, seu IDE saberá qual valor deve ser fornecido e exibirá as opções para você. Para acessar o preenchimento automático no VSCode no Mac, pressione ctrl e barra de espaço juntos.

Vamos voltar ao App.tsx para testar nosso novo componente Icon .

 import React from'react';
importar {SafeAreaView, StyleSheet, StatusBar} de'react-native';
import {Text} de'./components/Text';
//Importar nosso componente de ícone
import {MaterialIcon} de'./components/Icon'; const App=()=> { Retorna ( <>    Esta espessura da fonte é'regular'  Esta espessura da fonte é'negrito' {/* Adicione ícones aqui */}     );
}; estilos const=StyleSheet.create ({ container: { flex: 1, justifyContent:'center', alignItems:'center', }, negrito: { fontFamily:'Nunito-Bold', },
}); exportar aplicativo padrão; 

Para fins de demonstração, adicionei um ícone de página inicial e o logotipo do GitHub abaixo do texto com diferentes tamanhos e cores.

Criação de um componente de botão de ícone

Os botões ficam bem com ícones, então vamos fazer um. Para nosso componente de botão, usaremos a fonte personalizada que criamos anteriormente com um novo pacote de ícones.

Na pasta de componentes, crie um novo arquivo chamado IconButton.tsx :

 componentes do cd && touch IconButton.tsx && cd..

Adicione o seguinte código:

 import React from'react';
importar FontAwesomeIcon de'react-native-vector-icons/FontAwesome';
import {Text} de'./Text';
import {IconSizes, IconProps} de'./Icon'; FontAwesomeIcon.loadFont (); tipo IconButtonProps=IconProps & { texto: string; onPress: ()=> void;
}; export const IconButton=({ onPress, Tamanho, nome, cor, texto,
}: IconButtonProps)=> (   {text}  
); 

Se quisermos usar um ícone de Material-UI Ícones da comunidade , podemos importar e usar o componente de ícone que já construímos. Mas, desta vez, vamos com conjunto de pacote de ícones do Font Awesome , então precisamos carregar o novo pacote de ícones (linha 6).

Agora, vamos importar nosso IconButton para App.tsx :

 import React from'react';
importar {SafeAreaView, StyleSheet, StatusBar} de'react-native';
import {Text} de'./components/Text';
//Importar nosso componente de ícone
import {MaterialIcon} de'./components/Icon';
//Importar nosso componente de botão de ícone
import {IconButton} de'./components/IconButton'; const App=()=> { Retorna ( <>    Esta espessura da fonte é'regular'  Esta espessura da fonte é'negrito' {/* Adicione ícones aqui */}   {/* Adicionar botão do ícone aqui */}  {}} color="branco" size="extraLarge" nome="facebook" text="Faça login com o Facebook" />   );
}; estilos const=StyleSheet.create ({ container: { flex: 1, justifyContent:'center', alignItems:'center', }, negrito: { fontFamily:'Nunito-Bold', },
}); exportar aplicativo padrão; 

Assim como acontece com o componente MaterialIcon que criamos anteriormente, você pode definir a cor, o tamanho e o tipo de ícone com os adereços fornecidos.

Conclusão

Vale a pena examinar os ícones na fase de design do seu aplicativo; existem algumas joias reais nos conjuntos de pacotes de ícones. Se estiver procurando por algo específico, você deve tentar muitas palavras-chave descritivas semelhantes. Por exemplo, uma pesquisa por “configurações” retornará um ícone de engrenagem, mas se você quiser um ícone com várias engrenagens, tente pesquisar “engrenagens”.

Agora que você sabe como personalizar sua fonte, não tenha medo de estender seu componente de texto com um bom par de fontes-por exemplo, Nunito para cabeçalhos e Roboto para parágrafos:

Aí está! Você pode personalizar suas fontes e adicionar ícones ao conteúdo do seu coração. Agora vá em frente e construa algo incrível-apenas não use o Estilo Vegan se estiver vendendo seguro de vida!

A postagem React ícones nativos e fontes com react-native-vector-icons apareceu primeiro no LogRocket Blog .

Source link