Um guia sobre o uso de fontes personalizadas no React Native

O React Native fornece vários estilos de fonte padrão para escolher ao criar seu aplicativo. No entanto, para oferecer ao seu aplicativo a originalidade e a individualidade de que ele precisa para se destacar em um mercado saturado, você pode ocasionalmente precisar usar fontes personalizadas.

Vamos aprender como aplicar fontes personalizadas ao criar seu próximo projeto React Native.

Compreendendo os formatos de arquivo de fonte

Com o React Native, você pode adicionar arquivos de fonte personalizados a um projeto e personalizar a aparência dos elementos de texto em seus aplicativos. Essas fontes personalizadas vêm em arquivos de fonte com diferentes formatos de arquivo. Os arquivos contêm informações de estilo codificadas para um tipo de fonte específico.

Os formatos de arquivo de fonte mais comuns que você usará no desenvolvimento móvel React Native são:

• Fonte TrueType (TTF): Este é um formato de arquivo de fonte comum compatível com a maioria dos sistemas operacionais e aplicativos. Os arquivos TTF são relativamente pequenos e podem conter muitos caracteres.
  instagram viewer
• OpenType Font (OTF): É semelhante ao TTF, mas também pode conter recursos tipográficos avançados. Os arquivos OTF são maiores que os arquivos TTF e nem todos os aplicativos os suportam.
• Fonte OpenType incorporada (EOT): os arquivos EOT são compactados e podem incluir informações de gerenciamento de direitos digitais (DRM) para impedir o uso não autorizado. No entanto, nem todos os navegadores suportam EOT e geralmente não é recomendado para uso em projetos modernos.

Ao usar fontes personalizadas em um projeto, é importante escolher um formato de arquivo de fonte que atenda às necessidades do projeto. Isso pode envolver fatores como suporte à plataforma de destino, tamanho do arquivo, requisitos de licenciamento e suporte para recursos tipográficos avançados.

Importando e aplicando arquivos de fonte no React Native

Você pode baixar um arquivo de fonte de qualquer lugar na internet e importá-lo para seu projeto React Native pessoal para usar. No entanto, existem muitos sites bons e seguros para baixar fontes gratuitas de forma segura.

Para importar um arquivo de fonte para seu projeto React Native, crie um ativos/fontes diretório na raiz do seu projeto e mova os arquivos de fonte para ele.

As etapas necessárias para usar fontes personalizadas variam ao trabalhar com um projeto puramente gerado pelo React Native ou um projeto React Native gerenciado pela Expo.

Reagir CLI nativa

Se você estiver trabalhando com um projeto gerado pelo React Native CLI, crie um react-native.config.js arquivo e defina essas configurações dentro dele:

módulo.exportações = {
 projeto: {
 ios: {},
 andróide: {}
 },
 ativos: [ './ativos/fontes/' ],
}

Essa configuração informa ao projeto para incluir ativos de fonte armazenados no "./ativos/fontes/" diretório para que o aplicativo possa acessá-los ao renderizar elementos de texto.

Você pode então vincular o ativos pasta para o seu projeto executando o seguinte:

npx react-native-asset

link npx react-native

Agora você pode usar as fontes personalizadas vinculadas como faria normalmente em seu estilo CSS, chamando seu nome exato no estilo da família de fontes:

Olá, mundo!</Text>
const estilos = StyleSheet.create({
 fonteTexto: {
 família de fontes: 'Prisma de Inclinação',
 tamanho da fonte: 20,
 },
});

Expo CLI

Para projetos gerados pelo Expo, você deve instalar a biblioteca expo-fonts como uma dependência para importar e aplicar fontes personalizadas. Instale-o com este comando:

npx expo instalar expo-font

Agora você pode usar expo-fonts em seu arquivo de projeto da seguinte forma:

importar Reagir, { useState, useEffect } de'reagir';
importar { Texto, Visualização, Folha de Estilo } de'reagir nativo';
importar * como Fonte de'expo-font';
const CustomText = (adereços) => {
const [fontLoaded, setFontLoaded] = useState(falso);
 useEffect(() => {
assíncronofunçãoloadFont() {
aguardam Font.loadAsync({
'fonte personalizada': exigir('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(verdadeiro);
 }
 carregarFonte();
 }, []);
se (!fontLoaded) {
retornar<Texto>Carregando...Texto>;
 }
retornar (
família de fontes: 'fonte personalizada' }}>
 {props.crianças}
 </Text>
 );
};
const aplicativo = () => {
retornar (

Olá, mundo!</CustomText>
 </View>
 );
};
const estilos = StyleSheet.create({
 recipiente: {
 flexível: 1,
 justificarConteúdo: 'Centro',
 itens de alinhamento: 'Centro',
 },
 texto: {
 tamanho da fonte: 24,
 espessura da fonte: 'audacioso',
 },
});
exportarpadrão Aplicativo;

Você pode reformular e melhorar o bloco de código acima aplicando o padrão de design de contêiner e componentes de apresentação.

Aqui está a saída dos aplicativos React Native CLI e Expo CLI:

Definindo uma fonte personalizada como a fonte padrão para seu aplicativo Expo

Você pode querer usar uma fonte personalizada como fonte padrão para todo o seu aplicativo React Native, em vez de aplicá-la a cada um Texto componente individualmente. Para fazer isso, você pode usar o Texto do componente defaultProps para definir a família de fontes padrão para todos Texto componentes em seu aplicativo.

Use o Text.defaultProps propriedade para definir o família de fontes ao nome da sua fonte personalizada.

Aqui está um exemplo:

importar Reagir, { useEffect } de'reagir';
importar { Texto } de'reagir nativo';
importar * como Fonte de'expo-font';
const aplicativo = () => {
 useEffect(() => {
assíncronofunçãoloadFont() {
aguardam Font.loadAsync({
'fonte personalizada': exigir('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'fonte personalizada';
 }
 carregarFonte();
 }, []);
retornar (
Olá, mundo!</Text>
 );
};
exportarpadrão Aplicativo;

Definindo a família de fontes padrão usando Text.defaultProps afetará apenas os componentes de texto que são criados depois que o padrão é definido. Se você já criou componentes de texto antes de definir a família de fontes padrão, será necessário definir o família de fontes propriedade nesses componentes individualmente.

Criando uma família de fonte personalizada com vários estilos de fonte

Para criar uma família de fontes personalizada com vários estilos de fonte em um aplicativo gerado pela CLI do React Native, primeiro você precisará importar os arquivos de fonte para o seu projeto. Em seguida, crie um objeto de família de fonte personalizada que mapeie pesos e estilos de fonte para seus caminhos de arquivo de fonte correspondentes.

Por exemplo:

importar { Texto } de'reagir nativo';
importar Fontes personalizadas de'../config/Fontes';
const aplicativo = () => {
const Fontes personalizadas = {
'CustomFont-Regular': exigir('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': exigir('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Itálico': exigir('../fonts/CustomFont-Italic.ttf'),
 };
assíncrono componenteDidMount() {
aguardam Font.loadAsync (CustomFonts);
 }
retornar(

 Olá Mundo!
 </Text>
 );
};
const estilos = StyleSheet.create({
 texto: {
 família de fontes: 'CustomFont-Regular',
 estilo de fonte: 'itálico',
 espessura da fonte: 'audacioso',
 tamanho da fonte: 20,
 },
});
exportarpadrão Aplicativo;

Observe que os caminhos e nomes de arquivo de fonte neste exemplo são apenas espaços reservados e você precisará substituí-los pelos caminhos e nomes de arquivo de fonte reais. Além disso, você deve garantir que seus arquivos de fonte personalizados sejam importados corretamente para seu projeto e que seus caminhos correspondam aos definidos em seu objeto de família de fontes.

Considerações finais sobre fontes personalizadas no React Native

As fontes personalizadas podem adicionar um toque exclusivo e personalizado ao seu aplicativo React Native. Neste artigo, discutimos como usar fontes personalizadas no React Native, incluindo importar arquivos de fonte, definir uma fonte personalizada como a fonte padrão para todo o aplicativo, criando uma família de fontes personalizada com vários estilos de fonte e carregando fontes personalizadas sem usar Expo.

Sempre verifique as restrições de licenciamento de qualquer fonte que você usa e certifique-se de ter permissão para usá-la em seu aplicativo. Também é importante ter em mente que carregar várias fontes personalizadas pode aumentar o tamanho do seu aplicativo, então você deve incluir apenas as fontes que realmente precisa.