React Native Expo - 自定义字体未使用 Font.loadAsync 加载

Question

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

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

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

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

Answer 1

您必须等待加载功能

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

另外，请尝试创建一个自定义挂钩来加载字体。检查this答案。

你可以这样做

在您的App.js 所在的位置创建一个名为hooks 的文件夹。然后在hooks文件夹中创建一个名为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 中这样写

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