Eine Anleitung zur Verwendung benutzerdefinierter Schriftarten in React Native

React Native bietet mehrere Standardschriftstile, aus denen Sie beim Erstellen Ihrer Anwendung auswählen können. Um Ihrer App jedoch die Originalität und Individualität zu bieten, die sie benötigt, um sich in einem überfüllten Markt abzuheben, müssen Sie möglicherweise gelegentlich benutzerdefinierte Schriftarten verwenden.

Lassen Sie uns lernen, wie Sie benutzerdefinierte Schriftarten anwenden, wenn Sie Ihr nächstes React Native-Projekt erstellen.

Schriftdateiformate verstehen

Mit React Native können Sie einem Projekt benutzerdefinierte Schriftartdateien hinzufügen und das Erscheinungsbild von Textelementen in Ihren Apps anpassen. Diese benutzerdefinierten Schriftarten sind in Schriftartdateien mit unterschiedlichen Dateiformaten enthalten. Die Dateien enthalten codierte Gestaltungsinformationen für eine bestimmte Schriftart.

Die gebräuchlichsten Schriftdateiformate, die Sie bei der mobilen Entwicklung von React Native verwenden werden, sind:

• TrueType Font (TTF): Dies ist ein gängiges Dateiformat für Schriftarten, das von den meisten Betriebssystemen und Anwendungen unterstützt wird. TTF-Dateien sind relativ klein und können viele Zeichen enthalten.
• OpenType Font (OTF): Sie ähnelt TTF, kann aber auch erweiterte typografische Funktionen enthalten. OTF-Dateien sind größer als TTF-Dateien und werden nicht von jeder Anwendung unterstützt.
• Embedded OpenType Font (EOT): EOT-Dateien sind komprimiert und können DRM-Informationen (Digital Rights Management) enthalten, um eine unbefugte Verwendung zu verhindern. Allerdings unterstützen nicht alle Browser EOT und es wird im Allgemeinen nicht für die Verwendung in modernen Projekten empfohlen.

Wenn Sie benutzerdefinierte Schriftarten in einem Projekt verwenden, ist es wichtig, ein Schriftartdateiformat zu wählen, das den Anforderungen des Projekts entspricht. Dies kann Faktoren wie Unterstützung der Zielplattform, Dateigröße, Lizenzanforderungen und Unterstützung für erweiterte typografische Funktionen beinhalten.

Importieren und Anwenden von Schriftdateien in React Native

Sie können eine Schriftartdatei von überall im Internet herunterladen und in Ihr persönliches React Native-Projekt importieren, um sie zu verwenden. Jedoch, Es gibt viele gute und sichere Websites, auf denen Sie kostenlose Schriftarten herunterladen können sicher ab.

Um eine Schriftartdatei in Ihr React Native-Projekt zu importieren, erstellen Sie eine Assets/Schriftarten Verzeichnis im Stammverzeichnis Ihres Projekts und verschieben Sie Schriftdateien dorthin.

Die erforderlichen Schritte zur Verwendung benutzerdefinierter Schriftarten variieren, wenn Sie mit einem rein von React Native generierten Projekt oder einem von Expo verwalteten React Native-Projekt arbeiten.

Native CLI reagieren

Wenn Sie mit einem von React Native CLI generierten Projekt arbeiten, erstellen Sie eine reagieren-native.config.js Datei und definieren Sie diese Einstellungen darin:

Modul.exporte = {
 Projekt: {
 ios: {},
 Android: {}
 },
 Vermögenswerte: [ './assets/fonts/' ],
}

Diese Konfiguration weist das Projekt an, Schriftart-Assets einzuschließen, die in gespeichert sind "./assets/fonts/" Verzeichnis, damit die App beim Rendern von Textelementen darauf zugreifen kann.

Die kannst du dann verlinken Vermögenswerte Ordner zu Ihrem Projekt, indem Sie Folgendes ausführen:

npx React-native-asset

npx React-nativer Link

Jetzt können Sie die verknüpften benutzerdefinierten Schriftarten wie gewohnt in Ihrem CSS-Stil verwenden, indem Sie ihren genauen Namen im Stil der Schriftartfamilie aufrufen:

Hallo, Welt!</Text>
konst Stile = StyleSheet.create({
 SchriftText: {
 Schriftfamilie: 'Neigungsprisma',
 Schriftgröße: 20,
 },
});

Expo-CLI

Für Expo-generierte Projekte sollten Sie die Expo-Fonts-Bibliothek als Abhängigkeit installieren, um benutzerdefinierte Schriftarten zu importieren und anzuwenden. Installieren Sie es mit diesem Befehl:

npx expo installiere expo-font

Jetzt können Sie Expo-Schriftarten in Ihrer Projektdatei wie folgt verwenden:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { Text, Ansicht, Stylesheet } aus'reaktionsnativ';
importieren * als Schriftart aus'expo-font';
konst Benutzerdefinierter Text = (Requisiten) => {
konst [fontLoaded, setFontLoaded] = useState(FALSCH);
 useEffect(() => {
asynchronFunktionloadFont() {
erwarten Font.loadAsync({
'benutzerdefinierte Schriftart': erfordern('./assets/fonts/CustomFont.ttf'),
 });
 setFontLoaded(WAHR);
 }
 loadFont();
 }, []);
Wenn (!fontLoaded) {
zurückkehren<Text>Wird geladen...Text>;
 }
zurückkehren (
Schriftfamilie: 'benutzerdefinierte Schriftart' }}>
 {requisiten.kinder}
 </Text>
 );
};
konst Anwendung = () => {
zurückkehren (

Hallo Welt!</CustomText>
 </View>
 );
};
konst Stile = StyleSheet.create({
 Behälter: {
 biegen: 1,
 begründenInhalt: 'Center',
 ausrichtenItems: 'Center',
 },
 Text: {
 Schriftgröße: 24,
 Schriftart: 'deutlich',
 },
});
ExportStandard Anwendung;

Sie könnten den obigen Codeblock besser überarbeiten und verbessern, indem Sie das anwenden Entwurfsmuster für Container und Präsentationskomponenten.

Hier ist die Ausgabe der React Native CLI- und Expo CLI-Apps:

Festlegen einer benutzerdefinierten Schriftart als Standardschriftart für Ihre Expo-App

Möglicherweise möchten Sie eine benutzerdefinierte Schriftart als Standardschriftart für Ihre gesamte React Native-App verwenden, anstatt sie auf jede anzuwenden Text Komponente einzeln. Dazu können Sie die verwenden Text Komponente defaultProps, um die Standardschriftfamilie für alle festzulegen Text Komponenten in Ihrer App.

Verwenden Sie die Text.defaultProps Eigenschaft zum Festlegen der Schriftfamilie -Eigenschaft auf den Namen Ihrer benutzerdefinierten Schriftart.

Hier ist ein Beispiel:

importieren Reagieren, { useEffect } aus'reagieren';
importieren { Text } aus'reaktionsnativ';
importieren * als Schriftart aus'expo-font';
konst Anwendung = () => {
 useEffect(() => {
asynchronFunktionloadFont() {
erwarten Font.loadAsync({
'benutzerdefinierte Schriftart': erfordern('./assets/fonts/CustomFont.ttf'),
 });
 Text.defaultProps.style.fontFamily = 'benutzerdefinierte Schriftart';
 }
 loadFont();
 }, []);
zurückkehren (
Hallo Welt!</Text>
 );
};
ExportStandard Anwendung;

Festlegen der Standardschriftfamilie mit Text.defaultProps wirkt sich nur auf Textkomponenten aus, die erstellt werden, nachdem die Standardeinstellung festgelegt wurde. Wenn Sie bereits Textkomponenten erstellt haben, bevor Sie die Standardschriftfamilie festlegen, müssen Sie die festlegen Schriftfamilie Eigenschaft auf diesen Komponenten einzeln.

Erstellen einer benutzerdefinierten Schriftfamilie mit mehreren Schriftstilen

Um eine benutzerdefinierte Schriftfamilie mit mehreren Schriftstilen in einer React Native CLI-generierten App zu erstellen, müssen Sie zuerst die Schriftdateien in Ihr Projekt importieren. Erstellen Sie dann ein benutzerdefiniertes Schriftfamilienobjekt, das Schriftstärken und -stile den entsprechenden Schriftdateipfaden zuordnet.

Zum Beispiel:

importieren { Text } aus'reaktionsnativ';
importieren Benutzerdefinierte Schriftarten aus'../config/Fonts';
konst Anwendung = () => {
konst CustomFonts = {
'CustomFont-Regulär': erfordern('../fonts/CustomFont-Regular.ttf'),
'CustomFont-Fett': erfordern('../fonts/CustomFont-Bold.ttf'),
'CustomFont-Kursiv': erfordern('../fonts/CustomFont-Italic.ttf'),
 };
asynchron KomponenteDidMount() {
erwarten Font.loadAsync (benutzerdefinierte Schriftarten);
 }
zurückkehren(

 Hallo Welt!
 </Text>
 );
};
konst Stile = StyleSheet.create({
 Text: {
 Schriftfamilie: 'CustomFont-Regulär',
 Schriftstil: 'kursiv',
 Schriftart: 'deutlich',
 Schriftgröße: 20,
 },
});
ExportStandard Anwendung;

Beachten Sie, dass die Pfade und Namen der Schriftartdateien in diesem Beispiel nur Platzhalter sind und Sie diese durch Ihre tatsächlichen Pfade und Namen der Schriftartdateien ersetzen müssen. Darüber hinaus müssen Sie sicherstellen, dass Ihre benutzerdefinierten Schriftartdateien korrekt in Ihr Projekt importiert werden und dass ihre Pfade mit denen übereinstimmen, die in Ihrem Schriftartfamilienobjekt definiert sind.

Abschließende Gedanken zu benutzerdefinierten Schriftarten in React Native

Benutzerdefinierte Schriftarten können Ihrer React Native-App eine einzigartige und personalisierte Note verleihen. In diesem Artikel haben wir besprochen, wie benutzerdefinierte Schriftarten in React Native verwendet werden, einschließlich des Importierens von Schriftartdateien und des Festlegens einer benutzerdefinierten Schriftart als die Standardschriftart für die gesamte App, Erstellen einer benutzerdefinierten Schriftfamilie mit mehreren Schriftstilen und Laden benutzerdefinierter Schriftarten ohne Verwendung Messe.

Überprüfen Sie immer die Lizenzbeschränkungen aller von Ihnen verwendeten Schriftarten und stellen Sie sicher, dass Sie die Berechtigung haben, sie in Ihrer App zu verwenden. Es ist auch wichtig zu bedenken, dass das Laden mehrerer benutzerdefinierter Schriftarten die Größe Ihrer App erhöhen kann, daher sollten Sie nur die Schriftarten hinzufügen, die Sie tatsächlich benötigen.