Una guida sull'uso dei caratteri personalizzati in React Native

React Native offre diversi stili di carattere predefiniti tra cui scegliere durante la creazione dell'applicazione. Tuttavia, per offrire alla tua app l'originalità e l'individualità di cui ha bisogno per distinguersi in un mercato affollato, potresti occasionalmente dover utilizzare caratteri personalizzati.

Impariamo come applicare caratteri personalizzati durante la creazione del tuo prossimo progetto React Native.

Comprensione dei formati di file dei caratteri

Con React Native, puoi aggiungere file di caratteri personalizzati a un progetto e personalizzare l'aspetto degli elementi di testo nelle tue app. Questi caratteri personalizzati sono disponibili in file di caratteri con diversi formati di file. I file contengono informazioni di stile codificate per un tipo di carattere specifico.

I formati di file di font più comuni che utilizzerai nello sviluppo mobile di React Native sono:

• Carattere TrueType (TTF): si tratta di un formato di file di carattere comune supportato dalla maggior parte dei sistemi operativi e delle applicazioni. I file TTF sono relativamente piccoli e possono contenere molti caratteri.
• OpenType Font (OTF): è simile al TTF ma può contenere anche caratteristiche tipografiche avanzate. I file OTF sono più grandi dei file TTF e non tutte le applicazioni li supportano.
• Embedded OpenType Font (EOT): i file EOT sono compressi e possono includere informazioni sulla gestione dei diritti digitali (DRM) per impedire l'uso non autorizzato. Tuttavia, non tutti i browser supportano EOT e generalmente non è consigliato per l'uso in progetti moderni.

Quando si utilizzano font personalizzati in un progetto, è importante scegliere un formato di file di font che soddisfi le esigenze del progetto. Ciò può comportare fattori quali il supporto della piattaforma di destinazione, la dimensione del file, i requisiti di licenza e il supporto per funzionalità tipografiche avanzate.

Importazione e applicazione di file di caratteri in React Native

Puoi scaricare un file di font da qualsiasi punto di Internet e importarlo nel tuo progetto React Native personale per utilizzarlo. Tuttavia, ci sono molti buoni siti web sicuri per scaricare font gratuiti da sicuro.

Per importare un file di font nel tuo progetto React Native, crea un file risorse/caratteri directory alla radice del progetto e spostarvi i file dei caratteri.

I passaggi necessari per utilizzare i caratteri personalizzati variano quando si lavora con un progetto generato esclusivamente da React Native o un progetto React Native gestito da Expo.

Reagisci alla CLI nativa

Se stai lavorando con un progetto generato da React Native CLI, crea un file react-native.config.js file e definire queste impostazioni al suo interno:

modulo.esporta = {
 progetto: {
 io: {},
 Android: {}
 },
 risorse: [ './asset/caratteri/' ],
}

Questa configurazione indica al progetto di includere le risorse font memorizzate nel file "./asset/caratteri/" directory in modo che l'app possa accedervi durante il rendering degli elementi di testo.

È quindi possibile collegare il file risorse cartella al progetto eseguendo quanto segue:

npx react-native-asset

collegamento npx react-native

Ora puoi utilizzare i caratteri personalizzati collegati come faresti normalmente nel tuo stile CSS chiamando il loro nome esatto nello stile della famiglia di caratteri:

Ciao, Mondo!</Text>
cost styles = StyleSheet.create({
 carattereTesto: {
 famiglia di font: "Prisma inclinabile",
 dimensione del font: 20,
 },
});

Expo-CLI

Per i progetti generati da Expo, dovresti installare la libreria expo-fonts come dipendenza per importare e applicare font personalizzati. Installalo con questo comando:

npx expo installa expo-font

Ora puoi usare i caratteri expo nel tuo file di progetto in questo modo:

importare Reagire, {useState, useEffect} da'reagire';
importare {Testo, Visualizza, Foglio di stile} da'nativo di reazione';
importare * COME Font da'carattere expo';
cost Testo personalizzato = (oggetti di scena) => {
cost [fontLoaded, setFontLoaded] = useState(falso);
 usaEffetto(() => {
asincronofunzioneloadFont() {
aspetta Font.loadAsync({
'carattere personalizzato': richiedere('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(VERO);
 }
 caricaFont();
 }, []);
Se (!fontLoaded) {
ritorno<Testo>Caricamento...Testo>;
 }
ritorno (
famiglia di font: 'carattere personalizzato' }}>
 {props.bambini}
 </Text>
 );
};
cost Applicazione = () => {
ritorno (

Ciao, mondo!</CustomText>
 </View>
 );
};
cost styles = StyleSheet.create({
 contenitore: {
 flettere: 1,
 giustificaContenuto: 'centro',
 alignItems: 'centro',
 },
 testo: {
 dimensione del font: 24,
 fontWeight: 'grassetto',
 },
});
esportarepredefinito Applicazione;

Potresti rinnovare e migliorare meglio il blocco di codice sopra applicando il modello di progettazione di componenti di contenitore e presentazione.

Ecco l'output delle app React Native CLI e Expo CLI:

Impostazione di un carattere personalizzato come carattere predefinito per la tua app Expo

Potresti voler utilizzare un carattere personalizzato come carattere predefinito per l'intera app React Native anziché applicarlo a ciascuna Testo componente singolarmente. Per fare questo, puoi usare il Testo dei componenti defaultProps per impostare la famiglia di caratteri predefinita per tutti Testo componenti nella tua app.

Usa il Text.defaultProps proprietà per impostare il famiglia di font property al nome del carattere personalizzato.

Ecco un esempio:

importare Reagisci, { useEffect } da'reagire';
importare { Testo } da'nativo di reazione';
importare * COME Font da'carattere expo';
cost Applicazione = () => {
 usaEffetto(() => {
asincronofunzioneloadFont() {
aspetta Font.loadAsync({
'carattere personalizzato': richiedere('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'carattere personalizzato';
 }
 caricaFont();
 }, []);
ritorno (
Ciao, mondo!</Text>
 );
};
esportarepredefinito Applicazione;

Impostazione della famiglia di caratteri predefinita utilizzando Text.defaultProps influirà solo sui componenti di testo creati dopo l'impostazione dell'impostazione predefinita. Se hai già creato componenti di testo prima di impostare la famiglia di caratteri predefinita, dovrai impostare il file famiglia di font proprietà su quei componenti individualmente.

Creazione di una famiglia di caratteri personalizzata con più stili di carattere

Per creare una famiglia di caratteri personalizzata con più stili di carattere in un'app generata da React Native CLI, devi prima importare i file dei caratteri nel tuo progetto. Quindi crea un oggetto famiglia di caratteri personalizzato che associ spessori e stili dei caratteri ai corrispondenti percorsi dei file di caratteri.

Per esempio:

importare { Testo } da'nativo di reazione';
importare Font personalizzati da'../config/Caratteri';
cost Applicazione = () => {
cost Font personalizzati = {
'CustomFont-regolare': richiedere('../fonts/CustomFont-Regular.ttf'),
'CustomFont grassetto': richiedere('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Corsivo': richiedere('../fonts/CustomFont-Italic.ttf'),
 };
asincrono componentDidMount() {
aspetta Font.loadAsync (CustomFonts);
 }
ritorno(

 Ciao mondo!
 </Text>
 );
};
cost styles = StyleSheet.create({
 testo: {
 famiglia di font: 'CustomFont-regolare',
 stile carattere: 'corsivo',
 fontWeight: 'grassetto',
 dimensione del font: 20,
 },
});
esportarepredefinito Applicazione;

Tieni presente che i percorsi e i nomi dei file dei caratteri in questo esempio sono solo segnaposto e dovrai sostituirli con i percorsi e i nomi dei file dei caratteri effettivi. Inoltre, devi assicurarti che i tuoi file di font personalizzati siano importati correttamente nel tuo progetto e che i loro percorsi corrispondano a quelli definiti nell'oggetto famiglia di font.

Considerazioni finali sui caratteri personalizzati in React Native

I caratteri personalizzati possono aggiungere un tocco unico e personalizzato alla tua app React Native. In questo articolo, abbiamo discusso su come utilizzare i caratteri personalizzati in React Native, inclusa l'importazione di file di caratteri, l'impostazione di un carattere personalizzato come il carattere predefinito per l'intera app, creando una famiglia di caratteri personalizzata con più stili di carattere e caricando caratteri personalizzati senza utilizzare Expo.

Controlla sempre le restrizioni di licenza di qualsiasi font che usi e assicurati di avere il permesso di usarlo nella tua app. È anche importante tenere presente che il caricamento di più caratteri personalizzati può aumentare le dimensioni della tua app, quindi dovresti includere solo i caratteri di cui hai effettivamente bisogno.