fontFamily "Roboto_medium" 不是系统字体，也没有通过 Font.loadAsync 加载，如何解决？

Question

我在启动 expo 应用程序时遇到错误。 这个问题不是新问题，但旧的解决方案不起作用。

fontFamily "Roboto_medium" 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\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\expo-font\build\Font.js:27:16 in processFontFamily
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3681:14 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3692:40 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4015:28 in createInstance
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:14706:39 in completeWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18123:27 in completeUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18096:29 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render
at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

我也尝试导入以下代码。

import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

但不工作

我的源代码：

app.js

import React, { useEffect } from "react";

import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

export default function App() {
  return <App1 />;
}

createCoin.jsx：

import React, { Component, useState, useEffect, useRef } from "react";

import {
  Container,
  Header,
  Content,
  H1,
  Text,
  Form,
  Item,
  Input,
  Button,
  Badge,
} from "native-base";

export default function createCoin() {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [nameError, setNameError] = useState("");

  const handleSubmit = () => {
    var nameValid = false;
    if (name.length == 0) {
      setNameError("Name is required");
    } else if (name.indexOf(" ") >= 0) {
      setNameError("Name cannot contain spaces");
    } else {
      setNameError("");
      nameValid = true;
    }
    if (nameValid) {
      alert("Name: " + name + "\nDescription: " + description);
    }
  };

  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input
              placeholder="coin name"
              onChangeText={(text) => setName(text)}
            />
          </Item>
          {nameError.length > 0 && (
            <Badge danger>
              <Text>{nameError}</Text>
            </Badge>
          )}
          <Item last>
            <Input
              placeholder="coin description"
              onChangeText={(text) => setDescription(text)}
            />
          </Item>
          <Button title="Save" onPress={handleSubmit}>
            <Text>Submit</Text>
          </Button>
        </Form>
      </Content>
    </Container>
  );
}

从link 下载了 ttf 文件。 并保存在您提到的文件夹结构中。 但仍然低于错误。 仅供参考，字体文件用 - 下载，然后我用 _ 重命名。

fontFamily "Roboto_medium" 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\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\expo-font\build\Font.js:27:16 in processFontFamily
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3681:14 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3692:40 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4015:28 in createInstance
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:14706:39 in completeWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18123:27 in completeUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18096:29 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at App.js:23:38 in AppLoading.props.onFinish
at node_modules\expo-app-loading\build\AppLoading.js:17:4 in startLoadingAppResourcesAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:166:18 in PromiseImpl.resolve.then$argument_1
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Answer 1

首先像这样安装AppLoading

expo install expo-app-loading

在您的App.js 所在的位置创建一个名为hooks 的文件夹。

下载Roboto Fonts

在hooks 文件夹中创建一个名为useFonts.js 的文件，粘贴此代码

useFonts.js

import * as Font from 'expo-font';

const useFonts = async () => {
  await Font.loadAsync({
    Roboto_medium: require('../assets/fonts/Roboto_medium.ttf'), // Download .tff font file and use it here like this
  });
};

export default useFonts;

编写useFonts 的另一种方式是安装

expo install @expo-google-fonts/roboto

然后你的useFonts.js 看起来像这样

import * as Font from 'expo-font';
import { Roboto_500Medium, Roboto_900Black_Italic } from '@expo-google-fonts/roboto';

const useFonts = async () => {
  await Font.loadAsync({
    Roboto_medium: Roboto_500Medium,
    Roboto_bold: Roboto_900Black_Italic,
  });
};

export default useFonts;

然后在您的App.js 中粘贴此代码

import React, { useEffect } from "react";

import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  const LoadFonts = async () => {
    await useFonts();  // Here we will have to await the call
  };

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(error) => console.log(error)}
      />
    );
  }

  return <App1 />;
}

通过这种加载字体的方式，您的App.js 将变得整洁干净。我在所有项目中都使用这种方式

Working Example here