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

此外，請嘗試創建一個自定義掛鈎來加載字體。 檢查這個答案。

你可以這樣做

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

Answer 2

1. 將字體資源添加到項目文件夾 exp assets/fonts

2. 創建可變字體 exp customFonts

3. 像這樣在 App.js 上導入

   import AppLoading from 'expo-app-loading'; import { useFonts } from 'expo-font'; let customFonts = { 'Poppins-Black': require('./assets/fonts/Poppins-Black.ttf') }; const App = () => { const [isLoaded] = useFonts(customFonts); if (!isLoaded) { return <AppLoading />; } return <RootApp />; }