En guide om hur du använder anpassade teckensnitt i React Native

React Native tillhandahåller flera standardtypsnittsstilar att välja mellan när du bygger din applikation. Men för att ge din app den originalitet och individualitet den behöver för att sticka ut på en full marknad kan du ibland behöva använda anpassade typsnitt.

Låt oss lära oss hur du använder anpassade typsnitt när du bygger ditt nästa React Native-projekt.

Förstå teckensnittsfilformat

Med React Native kan du lägga till anpassade teckensnittsfiler till ett projekt och anpassa utseendet på textelement i dina appar. Dessa anpassade typsnitt finns i teckensnittsfiler med olika filformat. Filerna innehåller kodad stilinformation för ett specifikt typsnitt.

De vanligaste typsnittsfilformaten du kommer att använda i React Native mobilutveckling är:

• TrueType Font (TTF): Detta är ett vanligt typsnittsfilformat som de flesta operativsystem och applikationer stöder. TTF-filer är relativt små och kan innehålla många tecken.
instagram viewer
• OpenType Font (OTF): Det liknar TTF men kan också innehålla avancerade typografiska funktioner. OTF-filer är större än TTF-filer och inte alla program stöder dem.
• Embedded OpenType Font (EOT): EOT-filer är komprimerade och kan innehålla DRM-information (Digital Rights Management) för att förhindra obehörig användning. Men inte alla webbläsare stöder EOT och det rekommenderas i allmänhet inte för användning i moderna projekt.

När du använder anpassade typsnitt i ett projekt är det viktigt att välja ett typsnittsfilformat som uppfyller projektets behov. Detta kan involvera faktorer som målplattformsstöd, filstorlek, licenskrav och stöd för avancerade typografiska funktioner.

Importera och använda teckensnittsfiler i React Native

Du kan ladda ner en teckensnittsfil var som helst på internet och importera den till ditt personliga React Native-projekt för att använda. Dock, det finns många bra, säkra webbplatser för att ladda ner gratis typsnitt från säkert.

För att importera en teckensnittsfil till ditt React Native-projekt, skapa en tillgångar/typsnitt katalogen i roten av ditt projekt och flytta teckensnittsfiler till den.

Stegen som krävs för att använda anpassade typsnitt varierar när man arbetar med ett rent React Native-genererat projekt eller ett Expo-hanterat React Native-projekt.

Reagera Native CLI

Om du arbetar med ett React Native CLI-genererat projekt, skapa ett react-native.config.js fil och definiera dessa inställningar i den:

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

Denna konfiguration talar om för projektet att inkludera teckensnittstillgångar lagrade i "./assets/fonts/" katalog så att appen kan komma åt dem när textelement renderas.

Du kan sedan länka till tillgångar mapp till ditt projekt genom att köra följande:

npx react-native-asset

npx react-native länk

Nu kan du använda de länkade anpassade typsnitten som du normalt skulle göra i din CSS-stil genom att anropa deras exakta namn i typsnittsfamiljen:

Hej världen!</Text>
konst styles = StyleSheet.create({
 fontText: {
 typsnittsfamilj: "Tilt prisma",
 textstorlek: 20,
 },
});

Expo-CLI

För Expo-genererade projekt bör du installera expo-fonts-biblioteket som ett beroende för att importera och tillämpa anpassade typsnitt. Installera det med detta kommando:

npx expo installera expo-font

Nu kan du använda expo-fonter i din projektfil så här:

importera Reagera, { useState, useEffect } från'reagera';
importera { Text, View, StyleSheet } från"reagera-native";
importera * som Font från"expo-font";
konst CustomText = (rekvisita) => {
konst [fontLoaded, setFontLoaded] = useState(falsk);
 useEffect(() => {
asynkronfungeraloadFont() {
vänta Font.loadAsync({
"anpassat teckensnitt": behöva('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(Sann);
 }
 loadFont();
 }, []);
om (!fontLoaded) {
lämna tillbaka<Text>Läser in...Text>;
 }
lämna tillbaka (
typsnittsfamilj: "anpassat teckensnitt" }}>
 {props.children}
 </Text>
 );
};
konst App = () => {
lämna tillbaka (

Hej världen!</CustomText>
 </View>
 );
};
konst styles = StyleSheet.create({
 behållare: {
 böja: 1,
 justifyContent: 'Centrum',
 alignItems: 'Centrum',
 },
 text: {
 textstorlek: 24,
 teckensnittsvikt: 'djärv',
 },
});
exporterastandard App;

Du kan förbättra och förbättra ovanstående kodblock bättre genom att använda behållare och presentationskomponenter designmönster.

Här är resultatet av både React Native CLI- och Expo CLI-apparna:

Ställa in ett anpassat teckensnitt som standardteckensnitt för din Expo-app

Du kanske vill använda ett anpassat teckensnitt som standardteckensnitt för hela din React Native-app istället för att tillämpa det på varje Text komponent individuellt. För att göra detta kan du använda Text komponenter defaultProps för att ställa in standardteckensnittsfamiljen för alla Text komponenter i din app.

Använd Text.defaultProps egenskap för att ställa in typsnittsfamilj egenskap till ditt anpassade teckensnitts namn.

Här är ett exempel:

importera Reagera, { useEffect } från'reagera';
importera { Text } från"reagera-native";
importera * som Font från"expo-font";
konst App = () => {
 useEffect(() => {
asynkronfungeraloadFont() {
vänta Font.loadAsync({
"anpassat teckensnitt": behöva('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = "anpassat teckensnitt";
 }
 loadFont();
 }, []);
lämna tillbaka (
Hej världen!</Text>
 );
};
exporterastandard App;

Ställa in standardteckensnittsfamiljen med Text.defaultProps kommer bara att påverka textkomponenter som skapas efter att standarden har ställts in. Om du redan har skapat textkomponenter innan du ställde in standardteckensnittsfamiljen, måste du ställa in typsnittsfamilj egendom på dessa komponenter individuellt.

Skapa en anpassad teckensnittsfamilj med flera teckensnittsstilar

För att skapa en anpassad teckensnittsfamilj med flera teckensnittsstilar i en React Native CLI-genererad app, måste du först importera teckensnittsfilerna till ditt projekt. Skapa sedan ett anpassat teckensnittsfamiljobjekt som mappar teckensnittsvikter och stilar till deras motsvarande teckensnittsfilsökvägar.

Till exempel:

importera { Text } från"reagera-native";
importera CustomFonts från'../config/Fonts';
konst App = () => {
konst CustomFonts = {
"CustomFont-Regular": behöva('../fonts/CustomFont-Regular.ttf'),
"CustomFont-Fet": behöva('../fonts/CustomFont-Bold.ttf'),
"CustomFont-Italic": behöva('../fonts/CustomFont-Italic.ttf'),
 };
asynkron componentDidMount() {
vänta Font.loadAsync (CustomFonts);
 }
lämna tillbaka(

 Hej världen!
 </Text>
 );
};
konst styles = StyleSheet.create({
 text: {
 typsnittsfamilj: "CustomFont-Regular",
 typsnitt: 'kursiv',
 teckensnittsvikt: 'djärv',
 textstorlek: 20,
 },
});
exporterastandard App;

Observera att sökvägarna och namnen för teckensnittsfilen i det här exemplet bara är platshållare, och du måste ersätta dem med dina faktiska sökvägar och namn. Dessutom måste du se till att dina anpassade teckensnittsfiler är korrekt importerade till ditt projekt och att deras sökvägar matchar de som definierats i ditt teckensnittsfamiljeobjekt.

Sista tankar om anpassade teckensnitt i React Native

Anpassade typsnitt kan ge en unik och personlig touch till din React Native-app. I den här artikeln har vi diskuterat hur man använder anpassade teckensnitt i React Native, inklusive import av teckensnittsfiler, ställa in ett anpassat teckensnitt som standardteckensnittet för hela appen, skapa en anpassad teckensnittsfamilj med flera teckensnittsstilar och ladda anpassade teckensnitt utan att använda Expo.

Kontrollera alltid licensbegränsningarna för alla teckensnitt du använder och se till att du har tillstånd att använda det i din app. Det är också viktigt att komma ihåg att laddning av flera anpassade typsnitt kan öka storleken på din app, så du bör bara inkludera de typsnitt som du faktiskt behöver.