Verwenden Sie die Google-Schriftart in React Native

Dieser Beitrag zeigt, wie Sie die Bibliothek expo-google-fonts verwenden, um einzigartige Schriftarten in die native React-Anwendung zu importieren.

Verwenden Sie die Google-Schriftart in React Native

Unser Programm benötigt als Anfangsschritt einige Boilerplates. Fügen Sie in Ihrem Programm den folgenden Code hinzu:

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
  },
});

Der obige Code verwendet die Standardschriftart und sieht in etwa so aus:

Jetzt, da unsere Boilerplate konfiguriert ist, ist der Moment gekommen, unser Projekt um Expo-Google-Fonts und Expo-Font zu erweitern.

Der erste Schritt besteht darin, die Bibliotheken mit Hilfe von expo zu installieren. Sie können expo-google-font von hier bekommen.

So installieren Sie expo-google-fonts:

expo install @expo-google-fonts/finger-paint

Fügen Sie danach die folgenden Importzeilen zum Header Ihrer App hinzu.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';

Wir werden in dieser Anwendung die Schriftart FingerPaint_400Regular verwenden, und useFonts hilft beim Laden unserer Anwendung.

Der useFonts-Hook wird dann verwendet, um unsere Schriftart in unser Programm zu laden. Die Schriftfamilie unseres Textstils wird dann auf FingerPaint_400Regular gesetzt.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

Höchstwahrscheinlich hat sich die Schriftart nicht geändert, oder wenn doch, hat sie sich nicht in den erwarteten Typ geändert. Dies liegt daran, dass unsere Anwendung vor unserer Schriftart geladen wird.

Um dies zu korrigieren, müssen wir die von React Native angebotene Komponente AppLoading verwenden, um die Sichtbarkeit unseres Begrüßungsbildschirms aufrechtzuerhalten, bis unsere Schriftart geladen ist.

Die Komponente AppLoading muss unserem Projekt zuerst hinzugefügt werden, bevor sie verwendet werden kann. Um die Komponente zu installieren, geben Sie den folgenden Code in Ihr Terminal ein:

expo install expo-app-loading

Und importieren Sie es dann in den Header Ihrer App:

import AppLoading from 'expo-app-loading';

Wir müssen in unserer App ein bedingtes Rendering durchführen, um AppLoading zu nutzen.

Die AppLoading-Komponente wird angezeigt, bevor unsere Schriftart geladen wurde. Aber nachdem die Schriftarten korrekt geladen wurden, zeigen wir stattdessen unseren Hauptinhalt.

Der Code lautet wie folgt:

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import AppLoading from 'expo-app-loading';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!</Text>
        <StatusBar style="auto" />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

In Ihrer App sollte nun folgender Bildschirm erscheinen:

Die Diskussion zu diesem Thema ist abgeschlossen, aber wir möchten noch etwas ansprechen. Die für jede hier aufgeführte Schriftart erforderlichen import-Anweisungen finden Sie im Verzeichnis expo-google-fonts, wenn Sie eine andere Schriftart verwenden möchten.

Sie müssen die richtige Schriftart installieren, da jede ihre eigene import-Anweisung und Bibliothek hat.