Question

我一直困扰着这个问题很长时间，在经过数小时的谷歌搜索后，我决定发布此问题。

错误在下面：

console.error: "fontFamily "ionicons" 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."

__expoConsoleLog
    RemoteConsole.js:80:37
error
    YellowBox.js:59:8
error
    muteWarnings.fx.js:26:24
processFontFamily
    Font.js:35:16
diffProperties
    ReactNativeRenderer-dev.js:3545:38
addNestedProperty
    ReactNativeRenderer-dev.js:3419:6
diffProperties
    ReactNativeRenderer-dev.js:3556:8
createInstance
    ReactNativeRenderer-dev.js:4003:29
completeWork
    ReactNativeRenderer-dev.js:14437:12
completeUnitOfWork
    ReactNativeRenderer-dev.js:17094:10
performUnitOfWork
    ReactNativeRenderer-dev.js:17304:30
workLoop
    ReactNativeRenderer-dev.js:17316:41
renderRoot
    ReactNativeRenderer-dev.js:17417:15
performWorkOnRoot
    ReactNativeRenderer-dev.js:18423:17
performWork
    ReactNativeRenderer-dev.js:18324:24
performSyncWork
    ReactNativeRenderer-dev.js:18285:14
batchedUpdates$1
    ReactNativeRenderer-dev.js:18531:21
batchedUpdates
    ReactNativeRenderer-dev.js:2611:31
_receiveRootNodeIDEvent
    ReactNativeRenderer-dev.js:2706:17
receiveTouches
    ReactNativeRenderer-dev.js:2782:28
__callFunction
    MessageQueue.js:366:47
<unknown>
    MessageQueue.js:106:26
__guard
    MessageQueue.js:314:10
callFunctionReturnFlushedQueue
    MessageQueue.js:105:17

对此我该怎么办？我已经尝试了几乎所有内容，并且还下载了所需的字体。谢谢。

Answer 1

在您的App.js中，您可以使用以下内容：

  state = {
    fontLoaded: false,
  };

  componentDidMount() {
    this.loadAssets();
  }

  async loadAssets() {
    const fontAssets = cacheFonts([
      { ionicons: require('../assets/fonts/ionicons.ttf') }, //for custom fonts
      Feather.font, // for the @expo/vector-icons
    ]);

    await Promise.all([...fontAssets]);

    this.setState({ fontLoaded: true });
  }

  render() {
    if (!this.state.fontLoaded) {
      return <AppLoading />;
    }
    return (
      <Provider store={store}>
        <RootNavigation {...this.props} />
      </Provider>
    );
  }

Answer 2

如果您的项目的结构类似于Kitten Tricks应用程序，请查看https://i.imgur.com/1fUfOJC.png。其中包括一个字体映射，该映射被传递到Font.loadAsync()中，如application root

中所述

React-Native UI小猫演示中的字体问题

2 个答案: