Juhend kohandatud fontide kasutamiseks React Native'is

React Native pakub rakenduse koostamisel mitu vaikefondistiili, mille vahel valida. Kuid selleks, et pakkuda oma rakendusele originaalsust ja individuaalsust, mida see vajab rahvarohkel turul silma paistmiseks, peate võib-olla aeg-ajalt kasutama kohandatud fonte.

Vaatame, kuidas järgmise React Native projekti koostamisel kohandatud fonte rakendada.

Fontide failivormingute mõistmine

Rakenduse React Native abil saate projektile lisada kohandatud fondifaile ja kohandada oma rakenduste tekstielementide välimust. Need kohandatud fondid on saadaval erineva failivorminguga fondifailides. Failid sisaldavad konkreetse fonditüübi jaoks kodeeritud stiiliteavet.

Kõige levinumad fondifailivormingud, mida React Native mobiiliarenduses kasutate, on järgmised:

• TrueType Font (TTF): see on tavaline fondifailivorming, mida enamik operatsioonisüsteeme ja rakendusi toetab. TTF-failid on suhteliselt väikesed ja võivad sisaldada palju märke.
instagram viewer
• OpenType Font (OTF): see sarnaneb TTF-iga, kuid võib sisaldada ka täiustatud tüpograafilisi funktsioone. OTF-failid on suuremad kui TTF-failid ja mitte kõik rakendused ei toeta neid.
• Manustatud OpenType Font (EOT): EOT-failid on tihendatud ja võivad sisaldada digitaalõiguste halduse (DRM) teavet, et vältida volitamata kasutamist. Kuid mitte kõik brauserid ei toeta EOT-d ja seda ei soovitata üldiselt kasutada kaasaegsetes projektides.

Kui kasutate projektis kohandatud fonte, on oluline valida projekti vajadustele vastav fondifailivorming. See võib hõlmata selliseid tegureid nagu sihtplatvormi tugi, faili suurus, litsentsimisnõuded ja täiustatud tüpograafiliste funktsioonide tugi.

Fondifailide importimine ja rakendamine rakenduses React Native

Saate alla laadida fondifaili kõikjalt Internetist ja importida selle kasutamiseks oma isiklikku React Native projekti. Kuid, tasuta fontide allalaadimiseks on palju häid ja turvalisi veebisaite alates turvaliselt.

Fondifaili importimiseks oma React Native projekti looge varad/fondid kataloogi oma projekti juurtes ja teisaldage fondifailid sinna.

Kohandatud fontide kasutamiseks vajalikud sammud varieeruvad, kui töötate puhtalt React Native loodud projektiga või Expo hallatava React Native projektiga.

Reageeri Native CLI

Kui töötate React Native CLI loodud projektiga, looge a react-native.config.js faili ja määrake selle sees järgmised sätted:

moodul.exports = {
 projekt: {
 iOS: {},
 android: {}
 },
 varad: [ './assets/fonts/' ],
}

See konfiguratsioon käsib projektil lisada faili salvestatud fondivarad "./assets/fonts/" kataloogi, et rakendus saaks neile tekstielementide renderdamisel juurde pääseda.

Seejärel saate linkida varasid kausta oma projekti, käivitades järgmise:

npx react-native-asset

npx react-native link

Nüüd saate lingitud kohandatud fonte kasutada nagu tavaliselt oma CSS-i stiilis, kutsudes nende täpse nime fondipere stiilis:

Tere, maailm!</Text>
konst styles = StyleSheet.create({
 fontText: {
 fontFamily: "Tilt Prism",
 fondi suurus: 20,
 },
});

Expo-CLI

Expo loodud projektide puhul peaksite kohandatud fontide importimiseks ja rakendamiseks installima expo-fonditeeki. Installige see selle käsuga:

npx expo install expo-font

Nüüd saate oma projektifailis kasutada expo-fonte järgmiselt:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida { Tekst, vaade, stiilileht } alates'react-native';
importida * nagu Font alates'expo-font';
konst KohandatudTekst = (rekvisiidid) => {
konst [fontLoaded, setFontLoaded] = useState(vale);
 useEffect(() => {
asünkrfunktsiooniloadFont() {
ootama Font.loadAsync({
"kohandatud font": nõuda('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(tõsi);
 }
 loadFont();
 }, []);
kui (!fontLoaded) {
tagasi<Tekst>Laadimine...Tekst>;
 }
tagasi (
fontFamily: "kohandatud font" }}>
 {props.children}
 </Text>
 );
};
konst Rakendus = () => {
tagasi (

Tere, maailm!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 konteiner: {
 paindumine: 1,
 õigustaSisu: 'Keskus',
 joonda üksused: 'Keskus',
 },
 tekst: {
 fondi suurus: 24,
 fondi kaal: 'julge',
 },
});
eksportidavaikimisi Rakendus;

Saate ülaltoodud koodiplokki paremaks muuta ja täiustada, rakendades konteineri ja esitluskomponentide disainimuster.

Siin on nii React Native CLI kui ka Expo CLI rakenduste väljund:

Kohandatud fondi määramine oma Expo rakenduse vaikefondiks

Võib-olla soovite kasutada kohandatud fonti kogu oma rakenduse React Native vaikefondina, selle asemel, et seda igaühele rakendada Tekst komponent eraldi. Selleks saate kasutada Tekst komponendid defaultProps et määrata kõigi jaoks vaikefondipere Tekst komponendid teie rakenduses.

Kasuta Text.defaultProps omadus määrata fontFamily atribuut teie kohandatud fondi nimele.

Siin on näide:

importida Reageeri, { useEffect } alates'reageeri';
importida { Tekst } alates'react-native';
importida * nagu Font alates'expo-font';
konst Rakendus = () => {
 useEffect(() => {
asünkrfunktsiooniloadFont() {
ootama Font.loadAsync({
"kohandatud font": nõuda('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "kohandatud font";
 }
 loadFont();
 }, []);
tagasi (
Tere, maailm!</Text>
 );
};
eksportidavaikimisi Rakendus;

Vaikimisi fondiperekonna määramine kasutades Text.defaultProps mõjutab ainult tekstikomponente, mis luuakse pärast vaikeväärtuse määramist. Kui olete tekstikomponendid juba loonud enne vaikefondipere määramist, peate määrama fontFamily nendele komponentidele eraldi.

Mitme fondistiiliga kohandatud fondipere loomine

Mitme fondistiiliga kohandatud fondipere loomiseks React Native CLI loodud rakenduses peate esmalt fondifailid oma projekti importima. Seejärel looge kohandatud fondipere objekt, mis seostab fondi kaalud ja stiilid nende vastavate fondifailide teedega.

Näiteks:

importida { Tekst } alates'react-native';
importida Kohandatud fondid alates'../config/Fonts';
konst Rakendus = () => {
konst Kohandatud Fonts = {
"Custom Font-Regular": nõuda('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': nõuda('../fonts/CustomFont-Bold.ttf'),
'Custom Font-Italic': nõuda("../fonts/CustomFont-Italic.ttf"),
 };
asünkr komponentDidMount() {
ootama Font.loadAsync (CustomFonts);
 }
tagasi(

 Tere, Maailm!
 </Text>
 );
};
konst styles = StyleSheet.create({
 tekst: {
 fontFamily: "Custom Font-Regular",
 fondi stiil: "kaldkiri",
 fondi kaal: 'julge',
 fondi suurus: 20,
 },
});
eksportidavaikimisi Rakendus;

Pange tähele, et selles näites on fondifailide teed ja nimed vaid kohahoidjad ja peate need asendama oma tegelike fondifailide teede ja nimedega. Lisaks peate tagama, et teie kohandatud fondifailid on teie projekti õigesti imporditud ja nende teed ühtivad teie fondipereobjektis määratletutega.

Viimased mõtted kohandatud fontide kohta rakenduses React Native

Kohandatud fondid võivad teie rakendusele React Native lisada ainulaadse ja isikupärastatud puudutuse. Selles artiklis oleme arutanud, kuidas kasutada kohandatud fonte rakenduses React Native, sealhulgas importida fondifaile ja määrata kohandatud font vaikefont kogu rakenduse jaoks, mitme fondistiiliga kohandatud fondipere loomine ja kohandatud fontide laadimine ilma kasutamata Expo.

Kontrollige alati mis tahes kasutatava fondi litsentsipiiranguid ja veenduge, et teil oleks luba seda oma rakenduses kasutada. Samuti on oluline meeles pidada, et mitme kohandatud fondi laadimine võib teie rakenduse suurust suurendada, seega peaksite kaasama ainult need fondid, mida tegelikult vajate.