将自定义字体添加到 React Native 应用程序 - 版本 > 0.60

Question

我正在使用 React Native (V-0.64)。我使用的方法是下载自定义字体并将其添加到资产文件夹中，然后创建一个react-native.config.js文件并从那里导出链接。但当我在设备上运行该应用程序时，我不断收到以下错误。文件中的代码

module.exports = {
  assets: ['./assets/fonts'],
};

然后运行npx react-native link将资产链接到 android 和 iOS 文件中。但我不断在行中收到以下错误，并且没有在文本中更改字体

fontFamily "VeganStylePersonalUse-5Y58" 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 commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in forEach
at node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
at [native code]:null in callFunctionReturnFlushedQueue

我尝试了很多东西但没有成功。请帮忙。

Answer 1

loadFonts我在所有项目中所做的就是创建一个名为where hooksyour App.jsis located 的文件夹

然后，安装expo-app-loading并expo-font

然后在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"),
    });
};.

现在你App.js这样写

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';

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 <View styles={styles.container}>{/* Code Here */}</View>;
}