Vodič za korištenje prilagođenih fontova u React Native

React Native nudi nekoliko zadanih stilova fontova koje možete odabrati prilikom izrade svoje aplikacije. Međutim, kako biste svojoj aplikaciji ponudili originalnost i individualnost koja joj je potrebna da bi se istaknula na prenapučenom tržištu, možda ćete povremeno trebati koristiti prilagođene fontove.

Naučimo kako primijeniti prilagođene fontove prilikom izrade vašeg sljedećeg React Native projekta.

Razumijevanje formata datoteka fontova

Uz React Native, možete dodati prilagođene datoteke fontova projektu i prilagoditi izgled tekstualnih elemenata u vašim aplikacijama. Ovi prilagođeni fontovi dolaze u datotekama fontova s ​​različitim formatima datoteka. Datoteke sadrže kodirane informacije o stilu za određeni tip fonta.

Najčešći formati datoteka fontova koje ćete koristiti u mobilnom razvoju React Native su:

• Font TrueType (TTF): Ovo je uobičajeni format datoteke fonta koji podržava većina operativnih sustava i aplikacija. TTF datoteke su relativno male i mogu sadržavati mnogo znakova.
  instagram viewer
• OpenType font (OTF): sličan je TTF-u, ali može sadržavati i napredne tipografske značajke. OTF datoteke su veće od TTF datoteka i ne podržava ih svaka aplikacija.
• Ugrađeni OpenType font (EOT): EOT datoteke su komprimirane i mogu uključivati ​​informacije o upravljanju digitalnim pravima (DRM) kako bi se spriječilo neovlašteno korištenje. Međutim, ne podržavaju svi preglednici EOT i općenito se ne preporučuje za korištenje u modernim projektima.

Kada koristite prilagođene fontove u projektu, važno je odabrati format datoteke fonta koji zadovoljava potrebe projekta. To može uključivati ​​čimbenike kao što su podrška ciljne platforme, veličina datoteke, zahtjevi za licenciranje i podrška za napredne tipografske značajke.

Uvoz i primjena datoteka fontova u React Native

Možete preuzeti datoteku fonta s bilo kojeg mjesta na internetu i uvesti je u svoj osobni React Native projekt za korištenje. Međutim, postoji mnogo dobrih, sigurnih web stranica za preuzimanje besplatnih fontova od sigurno.

Da biste uvezli datoteku fonta u svoj React Native projekt, izradite sredstva/fontovi direktorij u korijenu vašeg projekta i premjestite datoteke fontova u njega.

Koraci potrebni za korištenje prilagođenih fontova razlikuju se kada radite s projektom koji je generirao isključivo React Native ili React Native projektom kojim upravlja Expo.

React Native CLI

Ako radite s projektom koji je generirao React Native CLI, stvorite react-native.config.js datoteku i unutar nje definirajte ove postavke:

modul.izvoz = {
 projekt: {
 ios: {},
 android: {}
 },
 sredstva: [ './assets/fonts/' ],
}

Ova konfiguracija govori projektu da uključi sredstva fonta pohranjena u "./assets/fonts/" direktoriju kako bi im aplikacija mogla pristupiti prilikom iscrtavanja tekstualnih elemenata.

Zatim možete povezati imovina mapu u svoj projekt pokretanjem sljedećeg:

npx react-native-asset

npx react-native veza

Sada možete koristiti povezane prilagođene fontove kao što biste inače koristili u svom CSS stilu tako da nazovete njihov točan naziv u stilu obitelji fontova:

Zdravo, svijete!</Text>
konst stilovi = StyleSheet.create({
 fontText: {
 fontFamily: 'Nagibna prizma',
 veličina fonta: 20,
 },
});

Expo-CLI

Za projekte koje generira Expo, trebali biste instalirati biblioteku expo-fontova kao ovisnost za uvoz i primjenu prilagođenih fontova. Instalirajte ga ovom naredbom:

npx expo instalirajte expo-font

Sada možete koristiti expo-fontove u svojoj projektnoj datoteci ovako:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz {Tekst, prikaz, stilski list} iz'react-native';
uvoz * kao Font iz'expo-font';
konst CustomText = (rekviziti) => {
konst [fontLoaded, setFontLoaded] = useState(lažno);
 useEffect(() => {
asinkronifunkcijaloadFont() {
čekati Font.loadAsync({
'custom-font': zahtijevati('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(pravi);
 }
 loadFont();
 }, []);
ako (!fontLoaded) {
povratak<Tekst>Učitavam...Tekst>;
 }
povratak (
fontFamily: 'custom-font' }}>
 {props.children}
 </Text>
 );
};
konst Aplikacija = () => {
povratak (

Zdravo, svijete!</CustomText>
 </View>
 );
};
konst stilovi = StyleSheet.create({
 spremnik: {
 savijati: 1,
 justifyContent: 'centar',
 poravnati stavke: 'centar',
 },
 tekst: {
 veličina fonta: 24,
 težina fonta: 'podebljano',
 },
});
izvozzadano aplikacija;

Gornji blok koda možete bolje preraditi i poboljšati primjenom uzorak dizajna spremnika i prezentacijskih komponenti.

Evo izlaza aplikacija React Native CLI i Expo CLI:

Postavljanje prilagođenog fonta kao zadanog fonta za vašu Expo aplikaciju

Možda ćete htjeti koristiti prilagođeni font kao zadani font za cijelu aplikaciju React Native umjesto da ga primjenjujete na svaku Tekst komponentu pojedinačno. Da biste to učinili, možete koristiti Tekst komponente defaultProps za postavljanje zadane obitelji fontova za sve Tekst komponente u vašoj aplikaciji.

Koristiti Text.defaultProps svojstvo za postavljanje fontFamily svojstvo naziva vašeg prilagođenog fonta.

Evo primjera:

uvoz Reagiraj, {useEffect} iz'reagirati';
uvoz { Tekst } iz'react-native';
uvoz * kao Font iz'expo-font';
konst Aplikacija = () => {
 useEffect(() => {
asinkronifunkcijaloadFont() {
čekati Font.loadAsync({
'custom-font': zahtijevati('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'custom-font';
 }
 loadFont();
 }, []);
povratak (
Zdravo, svijete!</Text>
 );
};
izvozzadano aplikacija;

Postavljanje zadane obitelji fontova pomoću Text.defaultProps će utjecati samo na komponente teksta koje su stvorene nakon postavljanja zadane vrijednosti. Ako ste već izradili komponente teksta prije postavljanja zadane obitelji fontova, morat ćete postaviti fontFamily vlasništvo nad tim komponentama pojedinačno.

Stvaranje prilagođene obitelji fontova s ​​više stilova fontova

Da biste stvorili prilagođenu obitelj fontova s ​​višestrukim stilovima fontova u aplikaciji koju generira React Native CLI, prvo ćete morati uvesti datoteke fontova u svoj projekt. Zatim stvorite prilagođeni objekt obitelji fontova koji preslikava težinu i stilove fontova na njihove odgovarajuće staze datoteke fontova.

Na primjer:

uvoz { Tekst } iz'react-native';
uvoz CustomFonts iz'../config/Fontovi';
konst Aplikacija = () => {
konst CustomFonts = {
'CustomFont-Regular': zahtijevati('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': zahtijevati('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': zahtijevati('../fonts/CustomFont-Italic.ttf'),
 };
asinkroni componentDidMount() {
čekati Font.loadAsync (Prilagođeni fontovi);
 }
povratak(

 Pozdrav svijete!
 </Text>
 );
};
konst stilovi = StyleSheet.create({
 tekst: {
 fontFamily: 'CustomFont-Regular',
 fontStyle: 'kurziv',
 težina fonta: 'podebljano',
 veličina fonta: 20,
 },
});
izvozzadano aplikacija;

Imajte na umu da su staze i nazivi datoteka fontova u ovom primjeru samo rezervirana mjesta i morat ćete ih zamijeniti stvarnim putovima i nazivima datoteka fontova. Osim toga, morate osigurati da su vaše prilagođene datoteke fontova ispravno uvezene u vaš projekt i da njihove staze odgovaraju onima definiranim u vašem objektu obitelji fontova.

Završne misli o prilagođenim fontovima u React Native

Prilagođeni fontovi mogu dodati jedinstven i personalizirani dodir vašoj aplikaciji React Native. U ovom smo članku raspravljali o tome kako koristiti prilagođene fontove u React Native, uključujući uvoz datoteka fontova, postavljanje prilagođenog fonta kao zadani font za cijelu aplikaciju, stvaranje prilagođene obitelji fontova s ​​više stilova fontova i učitavanje prilagođenih fontova bez korištenja Expo.

Uvijek provjerite ograničenja licenciranja za svaki font koji koristite i provjerite imate li dopuštenje za njegovu upotrebu u svojoj aplikaciji. Također je važno imati na umu da učitavanje više prilagođenih fontova može povećati veličinu vaše aplikacije, stoga biste trebali uključiti samo one fontove koji su vam stvarno potrebni.