As fontes customizadas são uma forma simples e eficaz de personalizar a aparência do texto num aplicativo React Native. Quando utilizadas, você pode garantir que o texto tenha a aparência desejada e ajude a criar uma experiência diferente para o usuário final.
Felizmente, implementar fontes personalizadas em um aplicativo React Native é bastante simples. Neste artigo, vamos ver como fazer isso e usar fontes personalizadas em seu aplicativo React Native.
Adicionando fontes personalizadas -
Tudo o que precisamos fazer é criar um diretório de fontes, adicionar as fontes desejadas que queremos usar, criar um arquivo de configuração, adicionar o caminho e vinculá-los ao projeto. Veremos todo esse processo no decorrer deste artigo:
O Google Fonts é um local excelente para baixar fontes. Você pode visualizar e baixar as fontes de sua preferência no formato .ttf
Depois de baixar as fontes desejadas, criamos um diretório de fontes asset reservado para as fontes. O caminho deve ser assim:
Directory/assets/fonts
Ele ficaria parecido com isso:
Dentro da pasta fonts
é onde ficará guardada todas as nossas fontes baixadas no Google Fonts, vamos apenas mover as fontes baixadas para lá.
Com as fontes movidas, criamos um arquivo chamado: react-native.config.js
ele terá as configurações do projeto. O código deve ser assim:
module.exports = {
project: {
ios:{},
android:{}
},
assets:['assets/fonts'],
}
Vincule os Assets ao projeto -
Depois que as etapas acima forem concluídas, podemos simplesmente executar um comando para vincular as fontes que acabamos de adicionar.
Para versões Reac-native abaixo: 0.69
npx react-native link
yarn react-native link
Para versões superiores a 0.69 ou iguais, comando é:
npx react-native-asset
Feito isso,basta adicionar as configurações de fonte na estilização, veja meu exemplo:
topoTitulo: {
fontFamily: 'Roboto-Black',
fontSize: 25,
marginTop: 18,
marginBottom: 10,
color: '#fff',
textAlign: 'center'},
Espero que os passos acima mencionados tenham ajudado você. Com isso, poderá customizar seu aplicativo com diversas fontes
Top comments (0)