React-Native UI Kitten Demo 中的字体问题答案

【问题标题】：Font Issues in React-Native UI Kitten DemoReact-Native UI Kitten Demo 中的字体问题
【发布时间】：2019-08-22 09:50:39
【问题描述】：

我被这个问题困扰了很长时间，经过几个小时的谷歌搜索后，我决定发布这个问题。

错误如下：

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

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

【问题讨论】：

警告指出您必须通过Font.loadAsync 加载字体。这里有一个关于世博会的教程docs.expo.io/versions/latest/guides/using-custom-fonts
我已经尝试了所有我能找到的关于这个错误的方法。我还尝试更新 EXPO，删除 node_modules 并使用 npm install 来查看我的问题是否会消失。但是做所有这些使我的错误更加严重。无论如何，谢谢！

标签： react-native react-native-ui-kitten

【解决方案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>
    );
  }

【讨论】：

【解决方案2】：

如果您的项目结构类似于 Kitten Tricks 应用程序，请查看application root。这包括一个字体映射，它被传递到Font.loadAsync()，就像在Expo documentation中描述的那样

【讨论】：