Vodnik za uporabo pisav po meri v React Native

React Native ponuja več privzetih slogov pisave, med katerimi lahko izbirate pri gradnji aplikacije. Če želite svoji aplikaciji ponuditi izvirnost in individualnost, ki jo potrebuje, da izstopa na prenatrpanem trgu, boste morda morali občasno uporabiti pisave po meri.

Naučimo se uporabljati pisave po meri pri gradnji vašega naslednjega projekta React Native.

Razumevanje formatov datotek pisav

Z React Native lahko projektu dodate datoteke s pisavami po meri in prilagodite videz besedilnih elementov v svojih aplikacijah. Te pisave po meri so na voljo v datotekah pisav z različnimi formati datotek. Datoteke vsebujejo kodirane informacije o slogu za določeno vrsto pisave.

Najpogostejši formati datotek s pisavami, ki jih boste uporabljali v mobilnem razvoju React Native, so:

• Pisava TrueType (TTF): To je običajna oblika datoteke pisave, ki jo podpira večina operacijskih sistemov in aplikacij. Datoteke TTF so relativno majhne in lahko vsebujejo veliko znakov.
instagram viewer
• Pisava OpenType (OTF): Podobna je pisavi TTF, vendar lahko vsebuje tudi napredne tipografske funkcije. Datoteke OTF so večje od datotek TTF in jih ne podpira vsaka aplikacija.
• Vdelana pisava OpenType (EOT): datoteke EOT so stisnjene in lahko vključujejo informacije o upravljanju digitalnih pravic (DRM), da se prepreči nepooblaščena uporaba. Vendar pa vsi brskalniki ne podpirajo EOT in na splošno ni priporočljiv za uporabo v sodobnih projektih.

Pri uporabi pisav po meri v projektu je pomembno, da izberete obliko datoteke pisave, ki ustreza potrebam projekta. To lahko vključuje dejavnike, kot so podpora za ciljno platformo, velikost datoteke, licenčne zahteve in podpora za napredne tipografske funkcije.

Uvažanje in uporaba datotek pisave v React Native

Datoteko pisave lahko prenesete od koder koli v internetu in jo uvozite v svoj osebni projekt React Native za uporabo. vendar obstaja veliko dobrih in varnih spletnih mest za prenos brezplačnih pisav od varno.

Če želite uvoziti datoteko pisave v svoj projekt React Native, ustvarite datoteko sredstva/pisave imenik v korenu vašega projekta in vanj premaknite datoteke s pisavami.

Koraki, potrebni za uporabo pisav po meri, se razlikujejo pri delu s projektom, ki ga ustvari izključno React Native, ali projektom React Native, ki ga upravlja Expo.

React Native CLI

Če delate s projektom, ki ga ustvari React Native CLI, ustvarite react-native.config.js datoteko in v njej določite te nastavitve:

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

Ta konfiguracija pove projektu, naj vključi sredstva pisav, shranjena v "./assets/fonts/" tako da lahko aplikacija dostopa do njih pri upodabljanju besedilnih elementov.

Nato lahko povežete sredstev mapo v svoj projekt tako, da zaženete naslednje:

npx react-native-asset

npx react-native povezava

Zdaj lahko povezane pisave po meri uporabljate kot običajno v slogu CSS, tako da pokličete njihovo natančno ime v slogu družine pisav:

Pozdravljen, svet!</Text>
konst styles = StyleSheet.create({
 fontText: {
 fontFamily: 'Nagibna prizma',
 velikost pisave: 20,
 },
});

Expo-CLI

Za projekte, ki jih ustvari Expo, bi morali namestiti knjižnico expo-fonts kot odvisnost za uvoz in uporabo pisav po meri. Namestite ga s tem ukazom:

npx expo namestite expo-font

Zdaj lahko v svoji projektni datoteki uporabite ekspo-pisave takole:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz { Besedilo, pogled, slogovna tabela } od'react-native';
uvoz * kot Pisava od'expo-font';
konst Besedilo po meri = (rekviziti) => {
konst [fontLoaded, setFontLoaded] = useState(lažno);
 useEffect(() => {
asinhfunkcijoloadFont() {
čakati Font.loadAsync({
'pisava po meri': zahtevati('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(prav);
 }
 loadFont();
 }, []);
če (!fontLoaded) {
vrnitev<Besedilo>Nalaganje...Besedilo>;
 }
vrnitev (
fontFamily: 'pisava po meri' }}>
 {props.children}
 </Text>
 );
};
konst Aplikacija = () => {
vrnitev (

Pozdravljen, svet!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 vsebnik: {
 upogib: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 besedilo: {
 velikost pisave: 24,
 fontWeight: 'krepko',
 },
});
izvozprivzeto aplikacija;

Zgornji blok kode bi lahko bolje prenovili in izboljšali z uporabo vsebnik in vzorec oblikovanja predstavitvenih komponent.

Tukaj je izhod aplikacij React Native CLI in Expo CLI:

Nastavitev pisave po meri kot privzete pisave za vašo aplikacijo Expo

Morda boste želeli uporabiti pisavo po meri kot privzeto pisavo za celotno aplikacijo React Native, namesto da bi jo uporabili za vsako Besedilo komponento posamezno. Če želite to narediti, lahko uporabite Besedilo komponente defaultProps da nastavite privzeto družino pisav za vse Besedilo komponente v vaši aplikaciji.

Uporabi Text.defaultProps lastnost za nastavitev fontFamily ime vaše pisave po meri.

Tukaj je primer:

uvoz Reagiraj, {useEffect} od'reagirati';
uvoz {Besedilo} od'react-native';
uvoz * kot Pisava od'expo-font';
konst Aplikacija = () => {
 useEffect(() => {
asinhfunkcijoloadFont() {
čakati Font.loadAsync({
'pisava po meri': zahtevati('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'pisava po meri';
 }
 loadFont();
 }, []);
vrnitev (
Pozdravljen, svet!</Text>
 );
};
izvozprivzeto aplikacija;

Nastavitev privzete družine pisav z uporabo Text.defaultProps vpliva samo na komponente besedila, ki so ustvarjene po nastavitvi privzetka. Če ste pred nastavitvijo privzete družine pisav že ustvarili komponente besedila, boste morali nastaviti fontFamily lastnosti teh komponent posamično.

Ustvarjanje družine pisav po meri z več slogi pisav

Če želite ustvariti družino pisav po meri z več slogi pisav v aplikaciji, ki jo ustvari React Native CLI, boste morali najprej uvoziti datoteke pisav v svoj projekt. Nato ustvarite objekt družine pisav po meri, ki preslika teže in sloge pisav v njihove ustrezne poti datoteke pisave.

Na primer:

uvoz {Besedilo} od'react-native';
uvoz CustomFonts od'../config/Fonts';
konst Aplikacija = () => {
konst CustomFonts = {
'CustomFont-Regular': zahtevati('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Bold': zahtevati('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': zahtevati('../fonts/CustomFont-Italic.ttf'),
 };
asinh componentDidMount() {
čakati Font.loadAsync (Pisave po meri);
 }
vrnitev(

 Pozdravljen, svet!
 </Text>
 );
};
konst styles = StyleSheet.create({
 besedilo: {
 fontFamily: 'CustomFont-Regular',
 fontStyle: 'ležeče',
 fontWeight: 'krepko',
 velikost pisave: 20,
 },
});
izvozprivzeto aplikacija;

Upoštevajte, da so poti in imena datotek pisav v tem primeru le ogradne oznake in jih boste morali zamenjati z dejanskimi potmi in imeni datotek pisav. Poleg tega morate zagotoviti, da so vaše datoteke pisav po meri pravilno uvožene v vaš projekt in da se njihove poti ujemajo s tistimi, ki so definirane v vašem objektu družine pisav.

Končne misli o pisavah po meri v React Native

Pisave po meri lahko vaši aplikaciji React Native dodajo edinstven in prilagojen pridih. V tem članku smo razpravljali o uporabi pisav po meri v React Native, vključno z uvozom datotek s pisavami, nastavitvijo pisave po meri kot privzeta pisava za celotno aplikacijo, ustvarjanje družine pisav po meri z več slogi pisav in nalaganje pisav po meri brez uporabe Expo.

Vedno preverite licenčne omejitve katere koli pisave, ki jo uporabljate, in zagotovite, da imate dovoljenje za njeno uporabo v svoji aplikaciji. Pomembno je tudi upoštevati, da lahko nalaganje več pisav po meri poveča velikost vaše aplikacije, zato vključite samo tiste pisave, ki jih dejansko potrebujete.