代码之家 › 专栏 › 技术社区 › Vik

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

expo fonts mobile react-native javascript

Vik · 技术社区 · 3 年前

我是最新的世博会版本,但由于某种原因,我无法使用简单的自定义字体。这是我为安装自定义字体而设置的一个新项目。

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

0 回复 | 直到 3 年前

Kartikey 3 年前

你必须等待装货功能

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

另外,也可以尝试创建一个自定义挂钩来加载字体。检查 this 答复

你可以这样做

创建一个名为的文件夹 hooks 你的 App.js 位于。然后在里面 钩子 文件夹创建一个名为 useFonts.js

在…内 使用Fonts.js 这样写

import * as Font from "expo-font";
 
export default useFonts = async () =>
  await Font.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

现在在你的 应用程序.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>;
}

Ricky Anwar 2 年前

将字体资源添加到项目文件夹exp-assets/fonts
创建可变字体exp-customFonts

像这样在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 />;
}