React Native Expo 中未加载字体

Question

（对不起，英语不是第一语言）

我加载了我的字体，但是当我尝试使用它们时，它说字体不是字体，我需要使用 Font.loadAsync

我已经在 APP() 中加载了它们：

    import * as Font from "expo-font";
    import AppLoading from "expo-app-loading";
    import React, { useState } from "react";
    import { Actions, Router, Scene } from "react-native-router-flux";
    
    export default function App() {
    
      const fetchFonts = () => {
        return Font.loadAsync({
          "Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
          "Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
          "Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
          "Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
          "MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
        });
      };
    
      const [fontLoaded, setFontLoaded] = useState(false);
    
      if (!fontLoaded) {
        return (
          <AppLoading
            startAsync={fetchFonts}
            onFinish={(setFontLoaded(true)}
            onError={(console.warn}
            autoHideSplash={false}
          />
        );
      } else {
        return (
          <Router styles={styles.container}>
    ...
          </Router>
        );
      }
    }

我在另一个屏幕中使用样式中的字体，如下所示：

      text: {
        textAlign: "center",
        padding: 20,
        fontFamily: "Montserrat-Bold",
      },

错误：

Error on iPhone 8 (Emulator)

fontFamily "Montserrat-Bold" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue

Answer 1

把你的fetchFonts改成这个

 const fetchFonts = async () => {
        await Font.loadAsync({
          "Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
          "Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
          "Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
          "Montserrat-SemiBold": require("./assets/fonts/Montserrat-SemiBold.ttf"),
          "MyriadPro-Regular": require("./assets/fonts/MyriadPro-Regular.otf"),
        });
      };

还有你的 if/else

if (!fontLoaded) {
        return (
          <AppLoading
            startAsync={fetchFonts}
            onFinish={() => setFontLoaded(true)}
            onError={(console.warn}
          />
        );
      } else {
        return (
          <Router styles={styles.container}>
    ...
          </Router>
        );
      }

并在 fetchFonts 函数上方声明您的状态，以使代码清晰

---

我在所有项目中对loadFonts 执行的另一种非常干净的方法是创建一个名为hooks 的文件夹，您的App.js 位于该文件夹中

然后在hooks文件夹中创建一个名为useFonts.js的文件

useFonts.js里面这样写

import * as Font from "expo-font";

export default useFonts = async () => {
   await Font.loadAsync({
      "Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf"),
      "Montserrat-Medium": require("../assets/fonts/Montserrat-Medium.ttf"),
      "Montserrat-Regular": require("../assets/fonts/Montserrat-Regular.ttf"),
      "Montserrat-SemiBold": require("../assets/fonts/Montserrat-SemiBold.ttf"),
      "MyriadPro-Regular": require("../assets/fonts/MyriadPro-Regular.otf"),
    });
};.

现在在你的App.js 这样写

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import { Actions, Router, Scene } from 'react-native-router-flux';

import useFonts from './hooks/useFonts';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return <Router styles={styles.container}>{/* Code Here */}</Router>;
}