Schriftstärke in React Native
In diesem Artikel lernen wir, verschiedene Schriftarten mit unterschiedlichen Schriftstärken in React Native zu verwenden.
Schriftstärke in React Native
Die Eigenschaft font-weight kann einige Probleme in der React Native-Anwendung zeigen, daher werden wir zusätzliche Schriftartdateien verwenden, um dieselben in der React Native-Anwendung zu replizieren. Um benutzerdefinierte Schriftarten in React Native hinzuzufügen, müssen wir die Schriftartdateien herunterladen, zum Beispiel .ttf-Dateien.
Nach dem Herunterladen der Schriftartdateien müssen wir bestimmte Schritte ausführen, um sie in unserer React Native-App zu verwenden.
In dieser Artikeldemo verwenden wir die OpenSans-Schriftart mit drei Varianten, um unterschiedliche Schriftstärken anzuzeigen, nämlich OpenSans Regular, OpenSans Bold und OpenSans Italic.
Die Schritte zum Hinzufügen verschiedener Schriftarten für unterschiedliche Schriftstärken sind unten angegeben:
-
Es gibt viele Websites, auf denen Schriftartdateien heruntergeladen werden können. Benutzer können der Website Google Fonts folgen, um die gewünschten Schriftarten herunterzuladen.
-
Fügen Sie die Schriftarten im Ordner
fontsdes Verzeichnissesassetsdes React Native-Projekts hinzu. Wenn Sie keinenfonts-Ordner in denassetshaben, erstellen Sie einen Ordner mit dem Namenfontsund verschieben Sie die heruntergeladenen Schriftarten in denfonts-Ordner.Das obige Bild zeigt die Ordnerstruktur, die nach dem Verschieben aller Schriftdateien in den Ordner
assets/fontsaussehen sollte. -
Erstellen Sie in Ihrem React-Native-Projekt eine neue Datei namens
react-native.config.js. Wenn Ihr Projekt diese Datei bereits enthält, müssen Sie sie nicht erneut erstellen. Sie können die zuvor erstellte verwenden. -
Fügen Sie dieser Datei den folgenden Code hinzu.
module.exports = { project: { ios: {}, android: {}, }, assets: ["./assets/fonts/"], }; -
Um die
assetsmit dem React Native-Projekt zu verknüpfen, führen Sie die folgenden Befehle im Terminal aus.Für React Native-Version >= 0.69:
npx react-native-assetFür React Native-Version < 0.69:
npx react-native link -
Die
useFonts-Hooks initialisieren die Schriftarten, damit wir sie in unserem Projekt verwenden können. Zuerst müssen wir dieseuseFonts-Hooks aus demexpo-fontimportieren, der ein Objekt im Parameter akzeptiert, und der Schlüssel des Objekts definiert den Namen der Schriftartfamilie, die im Projekt verwendet wird, um die Schriftart festzulegen. -
Der Wert des Objekts wird als
require-Funktion bezeichnet, die die heruntergeladene Schriftartdatei an den Objektschlüssel bindet. Wir können dieuseFonts-Hooks mit der unten angegebenen Syntax anwenden:// using useFonts hooks const [loaded] = useFonts({ OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'), OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'), OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'), });
Verwenden Sie verschiedene Schriftarten im React Native Project
Der letzte Schritt ist, die verschiedenen Schriftarten für unterschiedliche Schriftstärken zu verwenden. In die App.js-Datei unseres React Native-Projekts schreiben wir den Code zur Verwendung der useFonts-Hooks.
Im folgenden Beispiel haben wir zunächst die erforderlichen Komponenten für unser React-Native-Projekt importiert, und zwar StyleSheet, um den Stil unseres React-Native-Projekts einzurichten, Text, um Inhalt zu schreiben, Text, Ansicht. um das Projekt view einzurichten, useFonts um die fonts einzustellen.
Der Hook useFonts wird mit der zuvor besprochenen Methode eingerichtet. Dann haben wir einige Stylings für die Komponente View mit StyleSheet erwähnt.
Schliesslich setzen wir in den Text-Komponenten den fontFamily-Stil mit dem style-Attribut und übergeben die Werte aus dem useFont-Hook.
import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
export default function App(){
// load fonts
const [loaded] = useFonts({
OpenSansRegular: require('./assets/fonts/OpenSans-Regular.ttf'),
OpenSansBold: require('./assets/fonts/OpenSans-Bold.ttf'),
OpenSansItalic: require('./assets/fonts/OpenSans-Italic.ttf'),
});
if (!loaded) {
return null;
}
// show texts with different fonts
return (
<View style={styles.container}>
<Text style={{ fontFamily: 'OpenSansRegular', fontSize: 30 }}>OpenSans Regular</Text>
<Text style={{ fontFamily: 'OpenSansBold', fontSize: 30 }}>OpenSans Bold</Text>
<Text style={{ fontFamily: 'OpenSansItalic', fontSize: 30 }}>OpenSans Italic</Text>
</View>
);
}
// style for the component
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Ausgang:
In der obigen Ausgabe können Benutzer drei Arten von Schriftstärken derselben Schriftart sehen.
In diesem Artikel haben wir gelernt, verschiedene Schriftarten für unterschiedliche Schriftstärken zu verwenden. Es ist sehr einfach, aber die Benutzer müssen dem Schritt-für-Schritt-Prozess folgen. Benutzer können dem Beispiel folgen, um den Prozess besser zu verstehen.
