Un ghid despre utilizarea fonturilor personalizate în React Native

React Native oferă mai multe stiluri de font implicite din care să alegeți atunci când vă construiți aplicația. Cu toate acestea, pentru a oferi aplicației dvs. originalitatea și individualitatea de care are nevoie pentru a ieși în evidență pe o piață aglomerată, este posibil să fie necesar să utilizați ocazional fonturi personalizate.

Să învățăm cum să aplicăm fonturi personalizate atunci când vă construiți următorul proiect React Native.

Înțelegerea formatelor de fișiere de font

Cu React Native, puteți adăuga fișiere de font personalizate la un proiect și puteți personaliza aspectul elementelor de text din aplicațiile dvs. Aceste fonturi personalizate vin în fișiere de font cu diferite formate de fișiere. Fișierele conțin informații de stil codificate pentru un anumit tip de font.

Cele mai comune formate de fișiere cu fonturi pe care le veți utiliza în dezvoltarea React Native mobile sunt:

• Font TrueType (TTF): Acesta este un format comun de fișier de font pe care îl acceptă majoritatea sistemelor de operare și aplicațiilor. Fișierele TTF sunt relativ mici și pot conține multe caractere.
• Font OpenType (OTF): Este similar cu TTF, dar poate conține și caracteristici tipografice avansate. Fișierele OTF sunt mai mari decât fișierele TTF și nu toate aplicațiile le acceptă.
• Font OpenType încorporat (EOT): fișierele EOT sunt comprimate și pot include informații de gestionare a drepturilor digitale (DRM) pentru a preveni utilizarea neautorizată. Cu toate acestea, nu toate browserele acceptă EOT și, în general, nu este recomandat pentru utilizare în proiecte moderne.

Când utilizați fonturi personalizate într-un proiect, este important să alegeți un format de fișier de font care să corespundă nevoilor proiectului. Acest lucru poate implica factori precum suportul platformei țintă, dimensiunea fișierului, cerințele de licențiere și suportul pentru funcții tipografice avansate.

Importarea și aplicarea fișierelor de font în React Native

Puteți descărca un fișier cu fonturi de oriunde pe internet și îl puteți importa în proiectul personal React Native pentru a-l utiliza. In orice caz, există multe site-uri web bune și sigure pentru a descărca fonturi gratuite de la sigur.

Pentru a importa un fișier de font în proiectul dvs. React Native, creați un active/fonturi directorul de la rădăcina proiectului și mutați fișierele cu fonturi în el.

Pașii necesari pentru a utiliza fonturi personalizate variază atunci când lucrați cu un proiect generat exclusiv de React Native sau cu un proiect React Native gestionat de Expo.

React Native CLI

Dacă lucrați cu un proiect generat de CLI React Native, creați un react-native.config.js fișier și definiți aceste setări în interiorul acestuia:

modul.exports = {
 proiect: {
 ios: {},
 Android: {}
 },
 active: [ „./assets/fonts/” ],
}

Această configurație îi spune proiectului să includă elemente de font stocate în fișierul „./assets/fonts/” director, astfel încât aplicația să le poată accesa atunci când redă elemente de text.

Puteți apoi conecta active folder în proiectul dvs. rulând următoarele:

npx react-native-asset

npx react-native link

Acum puteți utiliza fonturile personalizate legate așa cum ați face de obicei în stilul dvs. CSS, apelând numele lor exact în stilul familiei de fonturi:

Salut, lume!</Text>
const stiluri = StyleSheet.create({
 fontText: {
 familie de fonturi: „Prismă înclinată”,
 marimea fontului: 20,
 },
});

Expo-CLI

Pentru proiectele generate de Expo, ar trebui să instalați biblioteca expo-fonts ca o dependență pentru a importa și aplica fonturi personalizate. Instalați-l cu această comandă:

npx expo instalează expo-font

Acum puteți utiliza fonturi expo în fișierul de proiect astfel:

import Reacționează, { useState, useEffect } din'reacţiona';
import { Text, View, Style Sheet } din„reacționează-nativ”;
import * la fel de Font din„font expo”;
const CustomText = (recuzită) => {
const [fontLoaded, setFontLoaded] = useState(fals);
 useEffect(() => {
asincronfuncţieloadFont() {
așteaptă Font.loadAsync({
„font personalizat”: cere(„./assets/fonts/CustomFont.ttf”),
 });
 setFontLoaded(Adevărat);
 }
 loadFont();
 }, []);
dacă (!fontLoaded) {
întoarcere<Text>Se încarcă...Text>;
 }
întoarcere (
familie de fonturi: „font personalizat” }}>
 {props.children}
 </Text>
 );
};
const Aplicație = () => {
întoarcere (

Salut, lume!</CustomText>
 </View>
 );
};
const stiluri = StyleSheet.create({
 container: {
 contracta: 1,
 justifyContent: 'centru',
 alignItems: 'centru',
 },
 text: {
 marimea fontului: 24,
 grosimea fontului: 'îndrăzneţ',
 },
});
exportMod implicit Aplicație;

Ați putea să reînnoiți și să îmbunătățiți mai bine blocul de cod de mai sus prin aplicarea model de proiectare a containerelor și a componentelor de prezentare.

Iată rezultatul ambelor aplicații React Native CLI și Expo CLI:

Setarea unui font personalizat ca font implicit pentru aplicația dvs. Expo

Poate doriți să utilizați un font personalizat ca font implicit pentru întreaga aplicație React Native, în loc să îl aplicați fiecărei Text componentă individual. Pentru a face acest lucru, puteți utiliza Text componente defaultProps pentru a seta familia de fonturi implicită pentru toți Text componentele din aplicația dvs.

Folosește Text.defaultProps proprietate pentru a seta familie de fonturi proprietate la numele fontului dvs. personalizat.

Iată un exemplu:

import Reacționează, { useEffect } din'reacţiona';
import { Text } din„reacționează-nativ”;
import * la fel de Font din„font expo”;
const Aplicație = () => {
 useEffect(() => {
asincronfuncţieloadFont() {
așteaptă Font.loadAsync({
„font personalizat”: cere(„./assets/fonts/CustomFont.ttf”),
 });
 Text.defaultProps.style.fontFamily = „font personalizat”;
 }
 loadFont();
 }, []);
întoarcere (
Salut, lume!</Text>
 );
};
exportMod implicit Aplicație;

Setarea familiei de fonturi implicite folosind Text.defaultProps va afecta doar componentele Text care sunt create după setarea implicită. Dacă ați creat deja componente Text înainte de a seta familia de fonturi implicite, va trebui să setați familie de fonturi proprietate asupra acelor componente individual.

Crearea unei familii de fonturi personalizate cu mai multe stiluri de font

Pentru a crea o familie de fonturi personalizată cu mai multe stiluri de font într-o aplicație generată de CLI React Native, mai întâi va trebui să importați fișierele cu fonturi în proiect. Apoi creați un obiect de familie de fonturi personalizat care mapează greutățile și stilurile fonturilor la căile corespunzătoare ale fișierului fonturilor.

De exemplu:

import { Text } din„reacționează-nativ”;
import Fonturi personalizate din„../config/Fonts”;
const Aplicație = () => {
const CustomFonts = {
„CustomFont-Regular”: cere(„../fonts/CustomFont-Regular.ttf”),
„Custom Font-Bold”: cere(„../fonts/CustomFont-Bold.ttf”),
„Custom Font-Italic”: cere(„../fonts/CustomFont-Italic.ttf”),
 };
asincron componentDidMount() {
așteaptă Font.loadAsync (CustomFonts);
 }
întoarcere(

 Salut Lume!
 </Text>
 );
};
const stiluri = StyleSheet.create({
 text: {
 familie de fonturi: „CustomFont-Regular”,
 stilul fontului: 'cursiv',
 grosimea fontului: 'îndrăzneţ',
 marimea fontului: 20,
 },
});
exportMod implicit Aplicație;

Rețineți că căile și numele fișierelor cu fonturi din acest exemplu sunt doar substituenți și va trebui să le înlocuiți cu căile și numele actuale ale fișierului cu fonturi. În plus, trebuie să vă asigurați că fișierele cu fonturi personalizate sunt importate corect în proiectul dvs. și că căile acestora se potrivesc cu cele definite în obiectul familiei de fonturi.

Gânduri finale despre fonturile personalizate în React Native

Fonturile personalizate pot adăuga o notă unică și personalizată aplicației dvs. React Native. În acest articol, am discutat despre cum să folosiți fonturi personalizate în React Native, inclusiv importarea fișierelor cu fonturi, setarea unui font personalizat ca fontul implicit pentru întreaga aplicație, creând o familie de fonturi personalizată cu mai multe stiluri de font și încărcând fonturi personalizate fără a utiliza Expo.

Verificați întotdeauna restricțiile de licențiere ale oricărui font pe care îl utilizați și asigurați-vă că aveți permisiunea de a-l folosi în aplicația dvs. De asemenea, este important să rețineți că încărcarea mai multor fonturi personalizate poate crește dimensiunea aplicației dvs., așa că ar trebui să includeți doar fonturile de care aveți nevoie efectiv.