Volg degelijke typografische principes en voeg wat persoonlijkheid toe aan uw app met een aangepast lettertype.

React Native biedt verschillende standaardlettertypestijlen waaruit u kunt kiezen bij het bouwen van uw applicatie. Om uw app echter de originaliteit en individualiteit te bieden die hij nodig heeft om op te vallen in een drukke markt, moet u af en toe aangepaste lettertypen gebruiken.

Laten we leren hoe u aangepaste lettertypen kunt toepassen bij het bouwen van uw volgende React Native-project.

Lettertypebestandsindelingen begrijpen

Met React Native kunt u aangepaste lettertypebestanden aan een project toevoegen en het uiterlijk van tekstelementen in uw apps aanpassen. Deze aangepaste lettertypen worden geleverd in lettertypebestanden met verschillende bestandsindelingen. De bestanden bevatten gecodeerde stijlinformatie voor een specifiek lettertype.

De meest voorkomende bestandsindelingen voor lettertypen die u zult gebruiken bij React Native mobiele ontwikkeling zijn:

  • TrueType-lettertype (TTF): dit is een algemeen lettertypebestandsformaat dat door de meeste besturingssystemen en toepassingen wordt ondersteund. TTF-bestanden zijn relatief klein en kunnen veel tekens bevatten.
  • OpenType-lettertype (OTF): het is vergelijkbaar met TTF, maar kan ook geavanceerde typografische functies bevatten. OTF-bestanden zijn groter dan TTF-bestanden en niet elke applicatie ondersteunt ze.
  • Embedded OpenType Font (EOT): EOT-bestanden zijn gecomprimeerd en kunnen DRM-informatie (Digital Rights Management) bevatten om ongeoorloofd gebruik te voorkomen. Niet alle browsers ondersteunen EOT echter en het wordt over het algemeen niet aanbevolen voor gebruik in moderne projecten.

Wanneer u aangepaste lettertypen in een project gebruikt, is het belangrijk om een ​​lettertypebestandsindeling te kiezen die voldoet aan de behoeften van het project. Dit kan factoren zijn zoals ondersteuning van het doelplatform, bestandsgrootte, licentievereisten en ondersteuning voor geavanceerde typografische functies.

Lettertypebestanden importeren en toepassen in React Native

U kunt overal op internet een lettertypebestand downloaden en importeren in uw persoonlijke React Native-project om te gebruiken. Echter, er zijn veel goede, veilige websites om gratis lettertypen te downloaden van veilig.

Om een ​​lettertypebestand in uw React Native-project te importeren, maakt u een middelen/lettertypen map in de hoofdmap van uw project en verplaats lettertypebestanden ernaar.

De stappen die nodig zijn om aangepaste lettertypen te gebruiken, variëren bij het werken met een puur door React Native gegenereerd project of een door Expo beheerd React Native-project.

Reageer native CLI

Als u werkt met een door React Native CLI gegenereerd project, maakt u een reactie-native.config.js bestand en definieer deze instellingen erin:

moduul.export = {
 project: {
 ios: {},
 android: {}
 },
 activa: [ './activa/lettertypen/' ],
}

Deze configuratie vertelt het project om lettertype-items op te nemen die zijn opgeslagen in het "./activa/fonts/" directory zodat de app er toegang toe heeft bij het renderen van tekstelementen.

U kunt dan de activa map toe aan uw project door het volgende uit te voeren:

npx reageren-native-asset

Dit werkt alleen op nieuwere versies van React Native-apps vanaf 0.69. Oudere React Native-projecten zouden in plaats daarvan deze opdracht moeten uitvoeren:

npx reageren-native link

Nu kunt u de gekoppelde aangepaste lettertypen gebruiken zoals u normaal zou doen in uw CSS-stijl door hun exacte naam aan te roepen in de lettertypefamiliestijl:

Hallo wereld!</Text>
const stijlen = StyleSheet.create({
 fontText: {
 fontFamilie: 'Kantel prisma',
 lettertypegrootte: 20,
 },
});

Expo-CLI

Voor door Expo gegenereerde projecten moet u de bibliotheek met expo-lettertypen installeren als een afhankelijkheid om aangepaste lettertypen te importeren en toe te passen. Installeer het met deze opdracht:

npx expo expo-lettertype installeren

Nu kunt u expo-lettertypen als volgt in uw projectbestand gebruiken:

importeren Reageren, { useState, useEffect } van'Reageer';
importeren { Tekst, Weergave, StyleSheet } van'reageren-native';
importeren * als Lettertype van'expo-lettertype';
const Aangepaste tekst = (rekwisieten) => {
const [fontLoaded, setFontLoaded] = useState(vals);


 gebruikEffect(() => {
asynchroonfunctielaadlettertype() {
wachten Font.loadAsync({
'aangepast lettertype': vereisen('./assets/fonts/CustomFont.ttf'),
 });


 setLettertypeGeladen(WAAR);
 }


 laadlettertype();
 }, []);


als (!fontGeladen) {
opbrengst<Tekst>Bezig met laden...Tekst>;
 }


opbrengst (
lettertypeFamilie: 'aangepast lettertype' }}>
 {rekwisieten.kinderen}
 </Text>
 );
};


const App= () => {
opbrengst (

Hallo wereld!</CustomText>
 </View>
 );
};


const stijlen = StyleSheet.create({
 houder: {
 buigen: 1,
 rechtvaardigenInhoud: 'centrum',
 uitlijnenItems: 'centrum',
 },
 tekst: {
 lettertypegrootte: 24,
 lettertype dikte: 'vetgedrukt',
 },
});
exporterenstandaard App;

U kunt het bovenstaande codeblok beter vernieuwen en verbeteren door de ontwerppatroon voor containers en presentatiecomponenten.

Hier is de uitvoer van zowel de React Native CLI- als de Expo CLI-apps:

2 afbeeldingen

Een aangepast lettertype instellen als het standaardlettertype voor uw Expo-app

Misschien wilt u een aangepast lettertype gebruiken als het standaardlettertype voor uw hele React Native-app in plaats van het op elke app toe te passen Tekst afzonderlijk onderdeel. Hiervoor kunt u de Tekst componenten standaardProps om de standaardlettertypefamilie voor iedereen in te stellen Tekst componenten in uw app.

Gebruik de Text.defaultProps eigenschap om de in te stellen lettertypeFamilie eigenschap toe aan de naam van uw aangepaste lettertype.

Hier is een voorbeeld:

importeren Reageer, { useEffect } van'Reageer';
importeren { Tekst } van'reageren-native';
importeren * als Lettertype van'expo-lettertype';
const App= () => {
 gebruikEffect(() => {
asynchroonfunctielaadlettertype() {
wachten Font.loadAsync({
'aangepast lettertype': vereisen('./assets/fonts/CustomFont.ttf'),
 });


 Text.defaultProps.style.fontFamily = 'aangepast lettertype';
 }


 laadlettertype();
 }, []);


opbrengst (
Hallo wereld!</Text>
 );
};
exporterenstandaard App;

De standaardlettertypefamilie instellen met behulp van Text.defaultProps heeft alleen invloed op tekstcomponenten die zijn gemaakt nadat de standaard is ingesteld. Als u al tekstcomponenten hebt gemaakt voordat u de standaardlettertypefamilie instelt, moet u de lettertypeFamilie eigendom op die componenten afzonderlijk.

Een aangepaste lettertypefamilie maken met meerdere lettertypestijlen

Om een ​​aangepaste lettertypefamilie met meerdere lettertypestijlen te maken in een door React Native CLI gegenereerde app, moet u eerst de lettertypebestanden in uw project importeren. Maak vervolgens een aangepast lettertypefamilie-object dat lettertypegewichten en -stijlen toewijst aan hun corresponderende lettertypebestandspaden.

Bijvoorbeeld:

importeren { Tekst } van'reageren-native';
importeren Aangepaste lettertypen van'../config/Lettertypen';
const App= () => {
const Aangepaste lettertypen = {
'CustomFont-normaal': vereisen('../fonts/CustomFont-Regular.ttf'),
'Aangepast lettertype-vet': vereisen('../fonts/CustomFont-Bold.ttf'),
'Aangepast lettertype-cursief': vereisen('../fonts/CustomFont-Italic.ttf'),
 };


asynchroon componentDidMount() {
wachten Font.loadAsync (CustomFonts);
 }


opbrengst(

 Hallo Wereld!
 </Text>
 );
};


const stijlen = StyleSheet.create({
 tekst: {
 fontFamilie: 'CustomFont-normaal',
 lettertype: 'cursief',
 lettertype dikte: 'vetgedrukt',
 lettertypegrootte: 20,
 },
});
exporterenstandaard App;

Merk op dat de paden en namen van lettertypebestanden in dit voorbeeld slechts tijdelijke aanduidingen zijn en dat u ze moet vervangen door de daadwerkelijke paden en namen van lettertypebestanden. Bovendien moet u ervoor zorgen dat uw aangepaste lettertypebestanden correct in uw project worden geïmporteerd en dat hun paden overeenkomen met de paden die zijn gedefinieerd in uw lettertypefamilieobject.

Laatste gedachten over aangepaste lettertypen in React Native

Aangepaste lettertypen kunnen een uniek en gepersonaliseerd tintje toevoegen aan uw React Native-app. In dit artikel hebben we besproken hoe u aangepaste lettertypen kunt gebruiken in React Native, inclusief het importeren van lettertypebestanden, het instellen van een aangepast lettertype als het standaardlettertype voor de hele app, een aangepaste lettertypefamilie maken met meerdere lettertypestijlen en aangepaste lettertypen laden zonder te gebruiken Expo.

Controleer altijd de licentiebeperkingen van elk lettertype dat u gebruikt en zorg ervoor dat u toestemming hebt om het in uw app te gebruiken. Het is ook belangrijk om in gedachten te houden dat het laden van meerdere aangepaste lettertypen de grootte van uw app kan vergroten, dus voeg alleen de lettertypen toe die u echt nodig heeft.