Rokasgrāmata par pielāgoto fontu izmantošanu programmā React Native

React Native nodrošina vairākus noklusējuma fontu stilus, no kuriem izvēlēties, veidojot lietojumprogrammu. Tomēr, lai piedāvātu savai lietotnei oriģinalitāti un individualitāti, kas tai nepieciešama, lai tā izceltos pārpildītajā tirgū, dažkārt var būt nepieciešams izmantot pielāgotus fontus.

Uzzināsim, kā lietot pielāgotus fontus, veidojot nākamo React Native projektu.

Izpratne par fontu failu formātiem

Izmantojot React Native, varat projektam pievienot pielāgotus fontu failus un pielāgot teksta elementu izskatu savās lietotnēs. Šie pielāgotie fonti ir dažādu failu formātu fontu failos. Faili satur kodētu stila informāciju noteiktam fonta šriftam.

Visizplatītākie fontu failu formāti, ko izmantosit React Native mobilajā izstrādē, ir:

• TrueType Font (TTF): šis ir izplatīts fontu faila formāts, ko atbalsta lielākā daļa operētājsistēmu un lietojumprogrammu. TTF faili ir salīdzinoši mazi un var saturēt daudz rakstzīmju.
instagram viewer
• OpenType fonts (OTF): tas ir līdzīgs TTF, taču var ietvert arī uzlabotas tipogrāfijas funkcijas. OTF faili ir lielāki nekā TTF faili, un ne katra lietojumprogramma tos atbalsta.
• Iegultais OpenType fonts (EOT): EOT faili ir saspiesti un var ietvert digitālo tiesību pārvaldības (DRM) informāciju, lai novērstu neatļautu izmantošanu. Tomēr ne visas pārlūkprogrammas atbalsta EOT, un to parasti nav ieteicams izmantot mūsdienu projektos.

Izmantojot pielāgotus fontus projektā, ir svarīgi izvēlēties fonta faila formātu, kas atbilst projekta vajadzībām. Tas var ietvert tādus faktorus kā mērķa platformas atbalsts, faila lielums, licencēšanas prasības un uzlaboto tipogrāfijas līdzekļu atbalsts.

Fontu failu importēšana un lietošana programmā React Native

Varat lejupielādēt fonta failu no jebkuras vietas internetā un importēt to savā personīgajā React Native projektā, lai to izmantotu. tomēr ir daudz labu, drošu vietņu, kur lejupielādēt bezmaksas fontus no droši.

Lai savā React Native projektā importētu fonta failu, izveidojiet aktīvi/fonti direktorijā projekta saknē un pārvietojiet fontu failus tajā.

Darbības, kas jāveic, lai izmantotu pielāgotos fontus, atšķiras, strādājot ar tikai React Native ģenerētu projektu vai Expo pārvaldītu React Native projektu.

Reaģēt Native CLI

Ja strādājat ar React Native CLI ģenerētu projektu, izveidojiet a react-native.config.js failu un tajā definējiet šos iestatījumus:

modulis.exports = {
 projekts: {
 iOS: {},
 Android: {}
 },
 aktīvi: [ './assets/fonts/' ],
}

Šī konfigurācija norāda, ka projektā ir jāiekļauj fontu līdzekļi, kas tiek glabāti "./assets/fonts/" direktorijā, lai programma varētu tiem piekļūt, renderējot teksta elementus.

Pēc tam varat izveidot saiti uz aktīviem mapi savam projektam, izpildot šo:

npx react-native-asset

npx react-native saite

Tagad varat izmantot saistītos pielāgotos fontus kā parasti CSS stilā, izsaucot to precīzu nosaukumu fontu saimes stilā:

Sveika, pasaule!</Text>
konst stili = StyleSheet.create({
 fontText: {
 fontFamily: "Tilt Prism",
 fonta izmērs: 20,
 },
});

Expo-CLI

Expo ģenerētiem projektiem ir jāinstalē izstādes fontu bibliotēka kā atkarība, lai importētu un lietotu pielāgotus fontus. Instalējiet to ar šo komandu:

npx expo instalēt expo-font

Tagad jūs varat izmantot expo-fontus savā projekta failā, piemēram:

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { Teksts, skats, stila lapa } no'react-native';
imports * kā Fonts no'expo-font';
konst PielāgotsTeksts = (rekvizīti) => {
konst [fontLoaded, setFontLoaded] = useState(viltus);
 useEffect(() => {
asinhronsfunkcijuloadFont() {
gaidīt Font.loadAsync({
'pielāgots fonts': pieprasīt('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(taisnība);
 }
 loadFont();
 }, []);
ja (!fontLoaded) {
atgriezties<Teksts>Notiek ielāde...Teksts>;
 }
atgriezties (
fontFamily: 'pielāgots fonts' }}>
 {props.children}
 </Text>
 );
};
konst Lietotne = () => {
atgriezties (

Sveika, pasaule!</CustomText>
 </View>
 );
};
konst stili = StyleSheet.create({
 konteiners: {
 flex: 1,
 justifyContent: 'centrs',
 alignItems: 'centrs',
 },
 teksts: {
 fonta izmērs: 24,
 fonta svars: "drosmīgs",
 },
});
eksportētnoklusējuma Lietotne;

Jūs varētu labāk uzlabot un uzlabot iepriekš minēto koda bloku, piemērojot konteineru un prezentācijas komponentu dizaina modelis.

Šeit ir gan React Native CLI, gan Expo CLI lietotņu izvade:

Pielāgota fonta iestatīšana kā noklusējuma fontu jūsu Expo lietotnei

Iespējams, vēlēsities izmantot pielāgotu fontu kā noklusējuma fontu visai savai React Native lietotnei, nevis lietot to katrai Teksts komponents atsevišķi. Lai to izdarītu, varat izmantot Teksts komponents defaultProps lai iestatītu noklusējuma fontu saimi visiem Teksts komponenti jūsu lietotnē.

Izmantojiet Text.defaultProps īpašums, lai iestatītu fontFamily rekvizītu jūsu pielāgotā fonta nosaukumam.

Šeit ir piemērs:

imports Reaģēt, { useEffect } no'reaģēt';
imports { Teksts } no'react-native';
imports * kā Fonts no'expo-font';
konst Lietotne = () => {
 useEffect(() => {
asinhronsfunkcijuloadFont() {
gaidīt Font.loadAsync({
'pielāgots fonts': pieprasīt('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'pielāgots fonts';
 }
 loadFont();
 }, []);
atgriezties (
Sveika, pasaule!</Text>
 );
};
eksportētnoklusējuma Lietotne;

Noklusējuma fontu saimes iestatīšana, izmantojot Text.defaultProps ietekmēs tikai teksta komponentus, kas izveidoti pēc noklusējuma iestatīšanas. Ja jau esat izveidojis teksta komponentus pirms noklusējuma fontu saimes iestatīšanas, jums būs jāiestata fontFamily šīm sastāvdaļām atsevišķi.

Pielāgotas fontu saimes izveide ar vairākiem fontu stiliem

Lai izveidotu pielāgotu fontu saimi ar vairākiem fontu stiliem React Native CLI ģenerētajā lietotnē, vispirms savā projektā ir jāimportē fontu faili. Pēc tam izveidojiet pielāgotu fontu saimes objektu, kas kartē fontu svaru un stilus ar tiem atbilstošajiem fontu faila ceļiem.

Piemēram:

imports { Teksts } no'react-native';
imports Pielāgoti fonti no'../config/Fonts';
konst Lietotne = () => {
konst Pielāgoti fonti = {
"Custom Font-Regular": pieprasīt("../fonts/CustomFont-Regular.ttf"),
"CustomFont-Bold": pieprasīt("../fonts/CustomFont-Bold.ttf"),
"CustomFont-Italic": pieprasīt("../fonts/CustomFont-Italic.ttf"),
 };
asinhrons komponentsDidMount() {
gaidīt Font.loadAsync (CustomFonts);
 }
atgriezties(

 Sveika pasaule!
 </Text>
 );
};
konst stili = StyleSheet.create({
 teksts: {
 fontFamily: "Custom Font-Regular",
 fonta stils: "slīps",
 fonta svars: "drosmīgs",
 fonta izmērs: 20,
 },
});
eksportētnoklusējuma Lietotne;

Ņemiet vērā, ka šajā piemērā fontu failu ceļi un nosaukumi ir tikai vietturi, un tie būs jāaizstāj ar faktiskajiem fonta faila ceļiem un nosaukumiem. Turklāt jums ir jānodrošina, ka jūsu pielāgotie fontu faili ir pareizi importēti jūsu projektā un vai to ceļi atbilst tiem, kas definēti jūsu fontu saimes objektā.

Pēdējās domas par pielāgotajiem fontiem programmā React Native

Pielāgoti fonti var pievienot jūsu React Native lietotnei unikālu un personalizētu pieskārienu. Šajā rakstā mēs esam apsprieduši, kā lietotnē React Native pielāgotus fontus, tostarp importēt fontu failus un iestatīt pielāgotu fontu kā noklusējuma fonts visai lietotnei, izveidojot pielāgotu fontu saimi ar vairākiem fontu stiliem un ielādējot pielāgotus fontus, neizmantojot tos Expo.

Vienmēr pārbaudiet jebkura izmantotā fonta licencēšanas ierobežojumus un pārliecinieties, ka jums ir atļauja to izmantot savā lietotnē. Ir arī svarīgi paturēt prātā, ka vairāku pielāgotu fontu ielāde var palielināt jūsu lietotnes izmēru, tāpēc ir jāiekļauj tikai tie fonti, kas jums patiešām ir nepieciešami.