En veiledning for bruk av egendefinerte fonter i React Native

React Native tilbyr flere standard skriftstiler å velge mellom når du bygger applikasjonen din. Men for å tilby appen din originaliteten og individualiteten den trenger for å skille seg ut i et overfylt marked, kan det hende du må bruke egendefinerte skrifttyper.

La oss lære hvordan du bruker tilpassede fonter når du bygger ditt neste React Native-prosjekt.

Forstå skriftfilformater

Med React Native kan du legge til egendefinerte skriftfiler til et prosjekt og tilpasse utseendet til tekstelementer i appene dine. Disse egendefinerte skriftene kommer i skriftfiler med forskjellige filformater. Filene inneholder kodet stilinformasjon for en bestemt skrifttype.

De vanligste fontfilformatene du vil bruke i React Native mobilutvikling er:

• TrueType Font (TTF): Dette er et vanlig skriftfilformat som de fleste operativsystemer og applikasjoner støtter. TTF-filer er relativt små og kan inneholde mange tegn.
instagram viewer
• OpenType Font (OTF): Den ligner på TTF, men kan også inneholde avanserte typografiske funksjoner. OTF-filer er større enn TTF-filer, og ikke alle applikasjoner støtter dem.
• Embedded OpenType Font (EOT): EOT-filer er komprimert og kan inkludere digital rights management (DRM)-informasjon for å forhindre uautorisert bruk. Imidlertid støtter ikke alle nettlesere EOT, og det anbefales generelt ikke for bruk i moderne prosjekter.

Når du bruker tilpassede fonter i et prosjekt, er det viktig å velge et fontfilformat som dekker prosjektets behov. Dette kan involvere faktorer som målplattformstøtte, filstørrelse, lisensieringskrav og støtte for avanserte typografiske funksjoner.

Importere og bruke fontfiler i React Native

Du kan laste ned en fontfil fra hvor som helst på internett og importere den til ditt personlige React Native-prosjekt for å bruke. Derimot, det er mange gode, trygge nettsteder for å laste ned gratis fonter fra sikkert.

For å importere en fontfil til ditt React Native-prosjekt, opprette en eiendeler/fonter katalogen i roten av prosjektet ditt, og flytt fontfiler inn i den.

Trinnene som kreves for å bruke tilpassede fonter varierer når du arbeider med et rent React Native-generert prosjekt eller et Expo-administrert React Native-prosjekt.

Reager Native CLI

Hvis du jobber med et React Native CLI-generert prosjekt, lag en react-native.config.js fil og definer disse innstillingene i den:

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

Denne konfigurasjonen forteller at prosjektet skal inkludere fontressurser som er lagret i "./assets/fonts/" katalogen slik at appen kan få tilgang til dem når du gjengir tekstelementer.

Du kan deretter koble til eiendeler mappen til prosjektet ditt ved å kjøre følgende:

npx react-native-asset

npx react-native link

Nå kan du bruke de tilknyttede egendefinerte skriftene som du normalt ville gjort i CSS-stilen din ved å kalle deres eksakte navn i fontfamiliestilen:

Hei, verden!</Text>
konst styles = StyleSheet.create({
 fontText: {
 fontFamily: 'Vippeprisme',
 skriftstørrelse: 20,
 },
});

Expo-CLI

For Expo-genererte prosjekter bør du installere Expo-fonts-biblioteket som en avhengighet for å importere og bruke tilpassede fonter. Installer den med denne kommandoen:

npx expo installer expo-font

Nå kan du bruke expo-fonter i prosjektfilen din slik:

import Reager, { useState, useEffect } fra'reagere';
import { Tekst, visning, stilark } fra'reager-innfødt';
import * som Font fra"expo-font";
konst CustomText = (Rekvisitter) => {
konst [fontLoaded, setFontLoaded] = useState(falsk);
 useEffect(() => {
asynkronfunksjonloadFont() {
avvente Font.loadAsync({
"egendefinert skrifttype": krever('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(ekte);
 }
 loadFont();
 }, []);
hvis (!fontLoaded) {
komme tilbake<Tekst>Laster inn...Tekst>;
 }
komme tilbake (
fontFamily: "egendefinert skrifttype" }}>
 {props.children}
 </Text>
 );
};
konst App = () => {
komme tilbake (

Hei verden!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 justifyContent: 'senter',
 alignItems: 'senter',
 },
 tekst: {
 skriftstørrelse: 24,
 fontvekt: 'dristig',
 },
});
eksportmisligholde App;

Du kan fornye og forbedre kodeblokken ovenfor bedre ved å bruke designmønster for beholder og presentasjonskomponenter.

Her er utdataene fra både React Native CLI- og Expo CLI-appene:

Angi en egendefinert skrift som standardfont for Expo-appen din

Det kan være lurt å bruke en egendefinert skrift som standardfont for hele React Native-appen din i stedet for å bruke den på hver Tekst komponent individuelt. For å gjøre dette kan du bruke Tekst komponentens defaultProps for å angi standard skriftfamilie for alle Tekst komponenter i appen din.

Bruke Text.defaultProps egenskap for å angi fontFamily egenskap til den egendefinerte fontens navn.

Her er et eksempel:

import Reager, { useEffect } fra'reagere';
import { Tekst } fra'reager-innfødt';
import * som Font fra"expo-font";
konst App = () => {
 useEffect(() => {
asynkronfunksjonloadFont() {
avvente Font.loadAsync({
"egendefinert skrifttype": krever('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "egendefinert skrifttype";
 }
 loadFont();
 }, []);
komme tilbake (
Hei verden!</Text>
 );
};
eksportmisligholde App;

Angi standard skriftfamilie ved å bruke Text.defaultProps vil bare påvirke tekstkomponenter som er opprettet etter at standarden er satt. Hvis du allerede har opprettet tekstkomponenter før du angir standard fontfamilie, må du angi fontFamily eiendom på disse komponentene individuelt.

Opprette en tilpasset skriftfamilie med flere skriftstiler

For å lage en tilpasset skriftfamilie med flere skriftstiler i en React Native CLI-generert app, må du først importere skriftfilene til prosjektet ditt. Deretter oppretter du et tilpasset skriftfamilieobjekt som tilordner skriftvekter og stiler til deres korresponderende skriftfilstier.

For eksempel:

import { Tekst } fra'reager-innfødt';
import CustomFonts fra'../config/Fonts';
konst App = () => {
konst CustomFonts = {
'CustomFont-Regular': krever('../fonts/CustomFont-Regular.ttf'),
"CustomFont-Fet": krever('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Italic': krever('../fonts/CustomFont-Italic.ttf'),
 };
asynkron componentDidMount() {
avvente Font.loadAsync (CustomFonts);
 }
komme tilbake(

 Hei Verden!
 </Text>
 );
};
konst styles = StyleSheet.create({
 tekst: {
 fontFamily: 'CustomFont-Regular',
 fontstil: 'kursiv',
 fontvekt: 'dristig',
 skriftstørrelse: 20,
 },
});
eksportmisligholde App;

Merk at fontfilbanene og navnene i dette eksemplet bare er plassholdere, og du må erstatte dem med de faktiske fontfilbanene og navnene. I tillegg må du sørge for at de egendefinerte skriftfilene er riktig importert til prosjektet og at banene deres samsvarer med de som er definert i skriftfamilieobjektet.

Siste tanker om egendefinerte fonter i React Native

Egendefinerte fonter kan legge til et unikt og personlig preg på React Native-appen din. I denne artikkelen har vi diskutert hvordan du bruker egendefinerte fonter i React Native, inkludert import av skriftfiler, innstilling av egendefinert skrift som standardfonten for hele appen, lage en egendefinert skriftfamilie med flere skriftstiler og laste inn egendefinerte skrifter uten å bruke Expo.

Sjekk alltid lisensieringsbegrensningene for alle fonter du bruker, og sørg for at du har tillatelse til å bruke den i appen din. Det er også viktig å huske på at lasting av flere egendefinerte skrifter kan øke størrelsen på appen din, så du bør bare inkludere skriftene du faktisk trenger.