React Native Expo 中未加载字体 [英] Fonts not loaded in React Native Expo

问题描述

(抱歉，英语不是第一语言)

(Sorry, English is not may first language)

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

I load my fonts, but when I try to use them it says that the font is not a Font and I need to use Font.loadAsync

我已在 APP() 中加载它们:

I have load them in 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>
        );
      }
    }

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

I use the fonts in a Style in another screen like this:

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

错误:

iPhone 8(模拟器)错误

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

推荐答案

将您的 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

and your if/else to this

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

并在 fetchFonts 函数上方声明您的状态只是为了使代码清晰

and also declare your state above the fetchFonts funtion just to make the code clear

另一种非常简洁的 loadFonts 方法是在我的所有项目中创建一个名为 hooks 的文件夹，您的 App.js 所在的位置

Another very clean way to loadFonts which I do in all my project is create a folder called hooks where your App.js is located

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

Then inside hooks folder create a file called 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 中这样写

Now in your App.js write like this

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>;
}

这篇关于React Native Expo 中未加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！