React Native Expo - 自定义字体未使用 Font.loadAsync 加载 [英] React Native Expo - Custom Fonts Not Loading With Font.loadAsync

问题描述

我是最新的 Expo 版本，但由于某种原因，我无法使用简单的自定义字体.这是我设置的一个新项目，试图安装自定义字体.

I'm up to date on the latest Expo version but for some reason, I can not get a simple custom font going. Here is a fresh project I set up attempting to get a custom font installed.

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

const fetchFonts = () =>
  Font.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

export default (props) => {
  const [dataLoaded, setDataLoaded] = useState(false);

  if (!dataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>
        Inter Black
      </Text>
      <Text style={{ fontSize: 40 }}>Platform Default</Text>
    </View>
  );
};

这是我在控制台中得到的:

This is what I get in the console:

fontFamily "Inter-Black" 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 [native code]:null in dispatchAction
at App.js:19:37 in AppLoading.props.onFinish
at node_modules/expo-app-loading/build/AppLoading.js:41:12 in startLoadingAppResourcesAsync
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

推荐答案

你必须等待加载功能

const fetchFonts = async () =>
  await Font.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

此外，尝试创建一个自定义挂钩来加载字体，而不是这样.检查这个答案.

Also, instead of this, try creating a custom hook to Load fonts. Check this answer.

你可以这样做

在您的 App.js 所在的位置创建一个名为 hooks 的文件夹.然后在 hooks 文件夹中创建一个名为 useFonts.js

Create a folder called hooks where your App.js is located. 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({
    'Inter-Black': require('./assets/fonts/Inter-Black.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 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>;
}

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