Un guide sur l'utilisation des polices personnalisées dans React Native

React Native propose plusieurs styles de police par défaut parmi lesquels choisir lors de la création de votre application. Cependant, pour offrir à votre application l'originalité et l'individualité dont elle a besoin pour se démarquer sur un marché encombré, vous devrez peut-être parfois utiliser des polices personnalisées.

Apprenons à appliquer des polices personnalisées lors de la création de votre prochain projet React Native.

Présentation des formats de fichier de police

Avec React Native, vous pouvez ajouter des fichiers de police personnalisés à un projet et personnaliser l'apparence des éléments de texte dans vos applications. Ces polices personnalisées sont fournies dans des fichiers de police avec différents formats de fichier. Les fichiers contiennent des informations de style codées pour une police de caractères spécifique.

Les formats de fichiers de polices les plus courants que vous utiliserez dans le développement mobile React Native sont :

• Police TrueType (TTF): il s'agit d'un format de fichier de police commun pris en charge par la plupart des systèmes d'exploitation et des applications. Les fichiers TTF sont relativement petits et peuvent contenir de nombreux caractères.
• Police OpenType (OTF): Elle est similaire à TTF mais peut également contenir des fonctionnalités typographiques avancées. Les fichiers OTF sont plus volumineux que les fichiers TTF et toutes les applications ne les prennent pas en charge.
• Police OpenType intégrée (EOT): les fichiers EOT sont compressés et peuvent inclure des informations de gestion des droits numériques (DRM) pour empêcher toute utilisation non autorisée. Cependant, tous les navigateurs ne prennent pas en charge EOT et il n'est généralement pas recommandé de l'utiliser dans les projets modernes.

Lorsque vous utilisez des polices personnalisées dans un projet, il est important de choisir un format de fichier de police qui répond aux besoins du projet. Cela peut impliquer des facteurs tels que la prise en charge de la plate-forme cible, la taille du fichier, les exigences de licence et la prise en charge des fonctionnalités typographiques avancées.

Importation et application de fichiers de polices dans React Native

Vous pouvez télécharger un fichier de police de n'importe où sur Internet et l'importer dans votre projet personnel React Native pour l'utiliser. Cependant, il existe de nombreux bons sites Web sûrs pour télécharger des polices gratuites de manière sécurisée.

Pour importer un fichier de police dans votre projet React Native, créez un ressources/polices répertoire à la racine de votre projet et déplacez-y les fichiers de police.

Les étapes requises pour utiliser des polices personnalisées varient lorsque vous travaillez avec un projet purement généré par React Native ou un projet React Native géré par Expo.

Réagissez à l'interface de ligne de commande native

Si vous travaillez avec un projet généré par React Native CLI, créez un réagir-native.config.js fichier et définissez ces paramètres à l'intérieur :

module.exports = {
 projet: {
 ios: {},
 Android: {}
 },
 actifs: [ './actifs/polices/' ],
}

Cette configuration indique au projet d'inclure les ressources de police stockées dans le "./actifs/polices/" répertoire afin que l'application puisse y accéder lors du rendu des éléments de texte.

Vous pouvez alors lier le actifs dossier à votre projet en exécutant ce qui suit :

npx réagir-actif-natif

npx réagir-lien natif

Vous pouvez maintenant utiliser les polices personnalisées liées comme vous le feriez normalement dans votre style CSS en appelant leur nom exact dans le style font-family :

Bonjour, Monde! </Text>
constante styles = StyleSheet.create({
 fontText: {
 famille de polices: "Prisme inclinable",
 taille de police: 20,
 },
});

Expo-CLI

Pour les projets générés par Expo, vous devez installer la bibliothèque expo-fonts en tant que dépendance pour importer et appliquer des polices personnalisées. Installez-le avec cette commande :

npx expo installer expo-police

Vous pouvez maintenant utiliser les expo-fonts dans votre fichier de projet comme suit :

importer Réagir, { useState, useEffect } depuis'réagir';
importer { Texte, Affichage, Feuille de style } depuis'réagir natif';
importer * comme Police de caractère depuis'expo-police';
constante TextePersonnalisé = (accessoires) => {
constante [fontLoaded, setFontLoaded] = useState(FAUX);
 useEffet(() => {
asynchronefonctionchargerFont() {
attendre Font.loadAsync({
'police personnalisée': exiger('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(vrai);
 }
 chargerFont();
 }, []);
si (!fontLoaded) {
retour<Texte>Chargement...Texte>;
 }
retour (
famille de polices: 'police personnalisée' }}>
 {accessoires.enfants}
 </Text>
 );
};
constante Application = () => {
retour (

Bonjour, monde! </CustomText>
 </View>
 );
};
constante styles = StyleSheet.create({
 récipient: {
 fléchir: 1,
 JustifierContenu: 'centre',
 alignItems: 'centre',
 },
 texte: {
 taille de police: 24,
 fontWeight: 'gras',
 },
});
exporterdéfaut application ;

Vous pouvez réorganiser et améliorer le bloc de code ci-dessus en appliquant le modèle de conception de conteneur et de composants de présentation.

Voici la sortie des applications React Native CLI et Expo CLI :

Définition d'une police personnalisée comme police par défaut pour votre application Expo

Vous voudrez peut-être utiliser une police personnalisée comme police par défaut pour l'ensemble de votre application React Native plutôt que de l'appliquer à chacun Texte composant individuellement. Pour ce faire, vous pouvez utiliser le Texte Composants defaultProps pour définir la famille de polices par défaut pour tous Texte composants dans votre application.

Utilisez le Text.defaultProps propriété pour définir la famille de polices propriété au nom de votre police personnalisée.

Voici un exemple :

importer Réagissez, { useEffect } depuis'réagir';
importer { Texte } depuis'réagir natif';
importer * comme Police de caractère depuis'expo-police';
constante Application = () => {
 useEffet(() => {
asynchronefonctionchargerFont() {
attendre Font.loadAsync({
'police personnalisée': exiger('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'police personnalisée';
 }
 chargerFont();
 }, []);
retour (
Bonjour, monde! </Text>
 );
};
exporterdéfaut application ;

Définition de la famille de polices par défaut à l'aide de Text.defaultProps n'affectera que les composants de texte créés après la définition de la valeur par défaut. Si vous avez déjà créé des composants de texte avant de définir la famille de polices par défaut, vous devrez définir le famille de polices propriété sur ces composants individuellement.

Création d'une famille de polices personnalisées avec plusieurs styles de police

Pour créer une famille de polices personnalisées avec plusieurs styles de police dans une application générée par React Native CLI, vous devez d'abord importer les fichiers de police dans votre projet. Créez ensuite un objet de famille de polices personnalisé qui associe les poids et les styles de police à leurs chemins de fichier de police correspondants.

Par exemple:

importer { Texte } depuis'réagir natif';
importer Polices personnalisées depuis'../config/Polices';
constante Application = () => {
constante Polices personnalisées = {
'CustomFont-Regular': exiger('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Gras': exiger('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italique': exiger('../fonts/CustomFont-Italic.ttf'),
 };
asynchrone componentDidMount() {
attendre Font.loadAsync (CustomFonts);
 }
retour(

 Bonjour le monde!
 </Text>
 );
};
constante styles = StyleSheet.create({
 texte: {
 famille de polices: 'CustomFont-Regular',
 le style de police: 'italique',
 fontWeight: 'gras',
 taille de police: 20,
 },
});
exporterdéfaut application ;

Notez que les chemins et les noms des fichiers de polices dans cet exemple ne sont que des espaces réservés et que vous devrez les remplacer par vos chemins et noms de fichiers de polices réels. De plus, vous devez vous assurer que vos fichiers de polices personnalisées sont correctement importés dans votre projet et que leurs chemins correspondent à ceux définis dans votre objet de famille de polices.

Réflexions finales sur les polices personnalisées dans React Native

Les polices personnalisées peuvent ajouter une touche unique et personnalisée à votre application React Native. Dans cet article, nous avons expliqué comment utiliser des polices personnalisées dans React Native, y compris l'importation de fichiers de police, la définition d'une police personnalisée comme la police par défaut pour l'ensemble de l'application, en créant une famille de polices personnalisées avec plusieurs styles de police et en chargeant des polices personnalisées sans utiliser Expo.

Vérifiez toujours les restrictions de licence de toute police que vous utilisez et assurez-vous d'avoir l'autorisation de l'utiliser dans votre application. Il est également important de garder à l'esprit que le chargement de plusieurs polices personnalisées peut augmenter la taille de votre application. Vous ne devez donc inclure que les polices dont vous avez réellement besoin.