Sprievodca používaním vlastných písiem v React Native

React Native poskytuje niekoľko predvolených štýlov písma, z ktorých si môžete vybrať pri vytváraní aplikácie. Ak však chcete svojej aplikácii ponúknuť originalitu a individualitu, ktorú potrebuje, aby vynikla na preplnenom trhu, možno budete musieť občas použiť vlastné písma.

Poďme sa naučiť, ako použiť vlastné písma pri vytváraní vášho ďalšieho projektu React Native.

Pochopenie formátov súborov písiem

Pomocou React Native môžete do projektu pridať vlastné súbory písiem a prispôsobiť vzhľad textových prvkov vo svojich aplikáciách. Tieto vlastné písma sa dodávajú v súboroch písiem s rôznymi formátmi súborov. Súbory obsahujú zakódované informácie o štýle pre konkrétny typ písma.

Najbežnejšie formáty súborov písiem, ktoré budete používať pri vývoji mobilných zariadení React Native, sú:

• TrueType Font (TTF): Toto je bežný formát súboru s písmom, ktorý podporuje väčšina operačných systémov a aplikácií. Súbory TTF sú relatívne malé a môžu obsahovať veľa znakov.
instagram viewer
• OpenType Font (OTF): Podobá sa TTF, ale môže obsahovať aj pokročilé typografické funkcie. Súbory OTF sú väčšie ako súbory TTF a nie každá aplikácia ich podporuje.
• Embedded OpenType Font (EOT): Súbory EOT sú komprimované a môžu obsahovať informácie o správe digitálnych práv (DRM), aby sa zabránilo neoprávnenému použitiu. Nie všetky prehliadače však podporujú EOT a vo všeobecnosti sa neodporúča používať v moderných projektoch.

Pri používaní vlastných písiem v projekte je dôležité vybrať formát súboru s písmom, ktorý vyhovuje potrebám projektu. To môže zahŕňať faktory, ako je podpora cieľovej platformy, veľkosť súboru, licenčné požiadavky a podpora pokročilých typografických funkcií.

Import a aplikácia súborov písiem v React Native

Súbor s písmom si môžete stiahnuť odkiaľkoľvek na internete a importovať ho do svojho osobného projektu React Native na použitie. však existuje veľa dobrých a bezpečných webových stránok na stiahnutie bezplatných písiem od bezpečne.

Ak chcete importovať súbor písma do svojho projektu React Native, vytvorte súbor aktíva/písma adresár v koreňovom adresári vášho projektu a presuňte do neho súbory s písmom.

Kroky potrebné na použitie vlastných písiem sa líšia pri práci s čisto projektom vygenerovaným React Native alebo projektom React Native spravovaným Expo.

Reagovať Native CLI

Ak pracujete s projektom generovaným React Native CLI, vytvorte a respond-native.config.js súbor a definujte v ňom tieto nastavenia:

modul.exports = {
 projekt: {
 ios: {},
 Android: {}
 },
 aktíva: [ './assets/fonts/' ],
}

Táto konfigurácia povie projektu, aby zahŕňal aktíva písma uložené v "./assets/fonts/" adresár, aby k nim mala aplikácia prístup pri vykresľovaní textových prvkov.

Potom môžete prepojiť aktíva priečinok do vášho projektu spustením nasledujúceho:

npx reakt-native-asset

npx reaktívny natívny odkaz

Teraz môžete použiť prepojené vlastné písma tak, ako by ste normálne používali vo svojom štýle CSS, a to tak, že ich presný názov zavoláte v štýle rodiny písiem:

Ahoj, Svet!</Text>
konšt styles = StyleSheet.create({
 fontText: {
 rodina fontov: „Tilt Prism“,
 veľkosť písma: 20,
 },
});

Expo-CLI

Pre projekty generované Expo by ste mali nainštalovať knižnicu expo-fonts ako závislosť na importovanie a použitie vlastných fontov. Nainštalujte ho pomocou tohto príkazu:

npx expo nainštalovať expo-font

Teraz môžete použiť expo-fonty v súbore projektu takto:

importovať Reaguj, { useState, useEffect } od'reagovať';
importovať { Text, View, Style Sheet } od„react-native“;
importovať * ako Písmo od'expo-font';
konšt CustomText = (rekvizity) => {
konšt [fontLoaded, setFontLoaded] = useState(falošný);
 useEffect(() => {
asyncfunkciuloadFont() {
čakať Font.loadAsync({
'vlastné písmo': vyžadovať('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(pravda);
 }
 loadFont();
 }, []);
ak (!fontLoaded) {
vrátiť<Text>Načítava...Text>;
 }
vrátiť (
fontFamily: 'vlastné písmo' }}>
 {props.children}
 </Text>
 );
};
konšt Aplikácia = () => {
vrátiť (

Ahoj svet!</CustomText>
 </View>
 );
};
konšt styles = StyleSheet.create({
 kontajner: {
 flex: 1,
 justifyContent: 'centrum',
 alignItems: 'centrum',
 },
 text: {
 veľkosť písma: 24,
 hmotnosť písma: 'bold',
 },
});
exportpredvolená App;

Vyššie uvedený blok kódu by ste mohli lepšie prerobiť a vylepšiť použitím vzor dizajnu kontajnerov a prezentačných komponentov.

Tu je výstup z aplikácií React Native CLI a Expo CLI:

Nastavenie vlastného písma ako predvoleného písma pre vašu aplikáciu Expo

Možno budete chcieť použiť vlastné písmo ako predvolené písmo pre celú vašu aplikáciu React Native namiesto toho, aby ste ho použili na každý Text komponent jednotlivo. Ak to chcete urobiť, môžete použiť Text komponentov defaultProps nastaviť predvolenú rodinu písiem pre všetkých Text komponenty vo vašej aplikácii.

Použi Text.defaultProps vlastnosť nastaviť fontFamily vlastnosť k názvu vášho vlastného písma.

Tu je príklad:

importovať Reagovať, { useEffect } od'reagovať';
importovať { Text } od„react-native“;
importovať * ako Písmo od'expo-font';
konšt Aplikácia = () => {
 useEffect(() => {
asyncfunkciuloadFont() {
čakať Font.loadAsync({
'vlastné písmo': vyžadovať('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'vlastné písmo';
 }
 loadFont();
 }, []);
vrátiť (
Ahoj svet!</Text>
 );
};
exportpredvolená App;

Nastavenie predvolenej rodiny písiem Text.defaultProps ovplyvní iba textové komponenty, ktoré sa vytvoria po nastavení predvoleného nastavenia. Ak ste už vytvorili komponenty Text pred nastavením predvolenej rodiny písiem, budete musieť nastaviť fontFamily vlastnosti na týchto komponentoch jednotlivo.

Vytvorenie vlastnej rodiny písiem s viacerými štýlmi písma

Ak chcete vytvoriť vlastnú rodinu písiem s viacerými štýlmi písiem v aplikácii vygenerovanej pomocou React Native CLI, musíte najprv importovať súbory písiem do svojho projektu. Potom vytvorte vlastný objekt rodiny písiem, ktorý mapuje váhy a štýly písiem na ich zodpovedajúce cesty k súborom písiem.

Napríklad:

importovať { Text } od„react-native“;
importovať CustomFonts od'../config/Fonts';
konšt Aplikácia = () => {
konšt CustomFonts = {
'CustomFont-Regular': vyžadovať('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': vyžadovať('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': vyžadovať('../fonts/CustomFont-Italic.ttf'),
 };
async componentDidMount() {
čakať Font.loadAsync (CustomFonts);
 }
vrátiť(

 Ahoj svet!
 </Text>
 );
};
konšt styles = StyleSheet.create({
 text: {
 rodina fontov: 'CustomFont-Regular',
 štýl písma: 'kurzíva',
 hmotnosť písma: 'bold',
 veľkosť písma: 20,
 },
});
exportpredvolená App;

Všimnite si, že cesty a názvy súborov písiem v tomto príklade sú len zástupné symboly a budete ich musieť nahradiť vašimi skutočnými cestami a názvami súborov písiem. Okrem toho sa musíte uistiť, že súbory vlastných písiem sú správne importované do vášho projektu a že ich cesty sa zhodujú s cestami definovanými v objekte rodiny písiem.

Záverečné myšlienky o vlastných fontoch v React Native

Vlastné fonty môžu dodať vašej aplikácii React Native jedinečný a prispôsobený dotyk. V tomto článku sme diskutovali o tom, ako používať vlastné písma v React Native, vrátane importovania súborov s písmami, nastavenia vlastného písma ako predvolené písmo pre celú aplikáciu, vytvorenie vlastnej rodiny písiem s viacerými štýlmi písma a načítanie vlastných písiem bez použitia Expo.

Vždy skontrolujte licenčné obmedzenia akéhokoľvek písma, ktoré používate, a uistite sa, že máte povolenie na jeho použitie vo vašej aplikácii. Je tiež dôležité mať na pamäti, že načítanie viacerých vlastných písiem môže zväčšiť veľkosť vašej aplikácie, takže by ste mali zahrnúť iba tie písma, ktoré skutočne potrebujete.