Een gids over het gebruik van aangepaste lettertypen in React Native

Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

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.

hoe het applicatiepictogram windows 10 te veranderen

MAAK GEBRUIK VAN DE VIDEO VAN DE DAG

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:

hoe Gmail-inbox te sorteren op afzender

 module.exports = { 
    project: { 
        ios: {}, 
        android: {} 
    }, 
    assets: [ './assets/fonts/' ], 
}

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 react-native-asset