En guide til brug af brugerdefinerede skrifttyper i React Native

React Native giver flere standardskrifttyper at vælge imellem, når du bygger din applikation. Men for at tilbyde din app den originalitet og individualitet, den har brug for for at skille sig ud på et overfyldt marked, kan du lejlighedsvis være nødt til at bruge tilpassede skrifttyper.

Lad os lære, hvordan du anvender tilpassede skrifttyper, når du bygger dit næste React Native-projekt.

Forstå skrifttypefilformater

Med React Native kan du tilføje brugerdefinerede skrifttypefiler til et projekt og tilpasse udseendet af tekstelementer i dine apps. Disse brugerdefinerede skrifttyper kommer i skrifttypefiler med forskellige filformater. Filerne indeholder kodet stilinformation for en bestemt skrifttype.

De mest almindelige skrifttypefilformater, du vil bruge i React Native mobiludvikling er:

• TrueType Font (TTF): Dette er et almindeligt skrifttypefilformat, som de fleste operativsystemer og programmer understøtter. TTF-filer er relativt små og kan indeholde mange tegn.
instagram viewer
• OpenType Font (OTF): Det ligner TTF, men kan også indeholde avancerede typografiske funktioner. OTF-filer er større end TTF-filer, og ikke alle programmer understøtter dem.
• Embedded OpenType Font (EOT): EOT-filer er komprimerede og kan omfatte DRM-oplysninger (Digital Rights Management) for at forhindre uautoriseret brug. Det er dog ikke alle browsere, der understøtter EOT, og det anbefales generelt ikke til brug i moderne projekter.

Når du bruger brugerdefinerede skrifttyper i et projekt, er det vigtigt at vælge et skrifttypefilformat, der opfylder projektets behov. Dette kan involvere faktorer som målplatformunderstøttelse, filstørrelse, licenskrav og understøttelse af avancerede typografiske funktioner.

Import og anvendelse af skrifttypefiler i React Native

Du kan downloade en skrifttypefil hvor som helst på internettet og importere den til dit personlige React Native-projekt for at bruge den. Imidlertid, der er mange gode, sikre websteder til at downloade gratis skrifttyper fra sikkert.

For at importere en skrifttypefil til dit React Native-projekt skal du oprette en aktiver/skrifttyper mappe i roden af ​​dit projekt, og flyt skrifttypefiler ind i den.

De nødvendige trin for at bruge tilpassede skrifttyper varierer, når du arbejder med et rent React Native-genereret projekt eller et Expo-administreret React Native-projekt.

Reager Native CLI

Hvis du arbejder med et React Native CLI-genereret projekt, skal du oprette en react-native.config.js fil og definere disse indstillinger inde i den:

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

Denne konfiguration fortæller, at projektet skal inkludere skrifttypeaktiver, der er gemt i "./assets/fonts/" mappe, så appen kan få adgang til dem, når tekstelementer gengives.

Du kan derefter linke aktiver mappe til dit projekt ved at køre følgende:

npx react-native-aktiv

npx react-native link

Nu kan du bruge de tilknyttede brugerdefinerede skrifttyper, som du normalt ville gøre i din CSS-stil ved at kalde deres nøjagtige navn i skrifttype-familiestilen:

Hej verden!</Text>
konst styles = StyleSheet.create({
 fontTekst: {
 fontFamily: 'Til prisme',
 skriftstørrelse: 20,
 },
});

Expo-CLI

For Expo-genererede projekter bør du installere expo-fonts-biblioteket som en afhængighed for at importere og anvende brugerdefinerede skrifttyper. Installer det med denne kommando:

npx expo installer expo-font

Nu kan du bruge expo-skrifttyper i din projektfil som sådan:

importere Reager, { useState, useEffect } fra'reagere';
importere { Tekst, Visning, StyleSheet } fra'reager-native';
importere * som Skrifttype fra'expo-font';
konst CustomText = (rekvisitter) => {
konst [fontLoaded, setFontLoaded] = useState(falsk);
 useEffect(() => {
asynkronfungereloadFont() {
vente Font.loadAsync({
'custom-font': kræve('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(rigtigt);
 }
 loadFont();
 }, []);
hvis (!fontLoaded) {
Vend tilbage<Tekst>Indlæser...Tekst>;
 }
Vend tilbage (
fontFamily: 'custom-font' }}>
 {props.children}
 </Text>
 );
};
konst App = () => {
Vend tilbage (

Hej verden!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 justifyContent: 'centrum',
 alignItems: 'centrum',
 },
 tekst: {
 skriftstørrelse: 24,
 skrifttypevægt: 'fremhævet',
 },
});
eksportStandard App;

Du kan forny og forbedre ovenstående kodeblok bedre ved at anvende beholder og præsentationskomponenters designmønster.

Her er output fra både React Native CLI- og Expo CLI-apps:

Indstilling af en brugerdefineret skrifttype som standardskrifttype til din Expo-app

Du vil måske bruge en brugerdefineret skrifttype som standardskrifttype for hele din React Native-app i stedet for at anvende den på hver Tekst komponent individuelt. For at gøre dette kan du bruge Tekst komponentens defaultProps for at indstille standardskrifttypefamilien for alle Tekst komponenter i din app.

Brug Text.defaultProps egenskab for at indstille fontFamily egenskab til din tilpassede skrifttypes navn.

Her er et eksempel:

importere Reager, { useEffect } fra'reagere';
importere { Tekst } fra'reager-native';
importere * som Skrifttype fra'expo-font';
konst App = () => {
 useEffect(() => {
asynkronfungereloadFont() {
vente Font.loadAsync({
'custom-font': kræve('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'custom-font';
 }
 loadFont();
 }, []);
Vend tilbage (
Hej verden!</Text>
 );
};
eksportStandard App;

Indstilling af standard skrifttypefamilie ved hjælp af Text.defaultProps vil kun påvirke tekstkomponenter, der er oprettet efter standarden er indstillet. Hvis du allerede har oprettet tekstkomponenter, før du indstillede standardskrifttypefamilien, skal du indstille fontFamily ejendom på disse komponenter individuelt.

Oprettelse af en brugerdefineret skrifttypefamilie med flere skrifttypestile

For at oprette en brugerdefineret skrifttypefamilie med flere skrifttypestile i en React Native CLI-genereret app, skal du først importere skrifttypefilerne til dit projekt. Opret derefter et brugerdefineret skrifttypefamilieobjekt, der knytter skrifttypevægte og typografier til deres tilsvarende skrifttypefilstier.

For eksempel:

importere { Tekst } fra'reager-native';
importere CustomFonts fra'../config/Fonts';
konst App = () => {
konst CustomFonts = {
'CustomFont-Regular': kræve('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Fed': kræve('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': kræve('../fonts/CustomFont-Italic.ttf'),
 };
asynkron componentDidMount() {
vente Font.loadAsync (CustomFonts);
 }
Vend tilbage(

 Hej Verden!
 </Text>
 );
};
konst styles = StyleSheet.create({
 tekst: {
 fontFamily: 'CustomFont-Regular',
 skrifttype: 'kursiv',
 skrifttypevægt: 'fremhævet',
 skriftstørrelse: 20,
 },
});
eksportStandard App;

Bemærk, at skrifttypefilstierne og -navnene i dette eksempel kun er pladsholdere, og du bliver nødt til at erstatte dem med dine faktiske skrifttypefilstier og -navne. Derudover skal du sikre dig, at dine brugerdefinerede skrifttypefiler er korrekt importeret til dit projekt, og at deres stier matcher dem, der er defineret i dit skrifttypefamilieobjekt.

Endelige tanker om brugerdefinerede skrifttyper i React Native

Brugerdefinerede skrifttyper kan tilføje et unikt og personligt præg til din React Native-app. I denne artikel har vi diskuteret, hvordan man bruger brugerdefinerede skrifttyper i React Native, herunder import af skrifttypefiler, indstilling af en brugerdefineret skrifttype som standardskrifttypen for hele appen, oprettelse af en brugerdefineret skrifttypefamilie med flere skrifttypestile og indlæsning af brugerdefinerede skrifttyper uden at bruge Expo.

Kontroller altid licensbegrænsningerne for enhver skrifttype, du bruger, og sørg for, at du har tilladelse til at bruge den i din app. Det er også vigtigt at huske på, at indlæsning af flere brugerdefinerede skrifttyper kan øge størrelsen på din app, så du bør kun inkludere de skrifttyper, du rent faktisk har brug for.