React Native 无法将自定义字体与 Expo Font.loadAsync 一起使用答案

【问题标题】：React Native can't use custom font with Expo Font.loadAsyncReact Native 无法将自定义字体与 Expo Font.loadAsync 一起使用
【发布时间】：2018-03-23 00:31:11
【问题描述】：

我正在尝试在我的应用程序中使用 Google 字体，并且按照文档 here 进行操作，但没有成功。我下载了字体并使用了 Expo 推荐的文件结构。文档说要使用async componentDidMount，您可以在下面的代码中看到我正在做的事情。我看到其他人使用async componentWillMount 取得了成功，但它对我不起作用。

我得到的错误信息是：

console.error: "fontFamily 'anton-regular' is not a system font and has not been loaded through Expo.Font.LoadAsync."

在我收到字体错误之前，我的fonts loaded: true 的console.log 会在远程调试器中弹出。

import React, { Component } from 'react';
import { Font } from 'expo';
import...

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { fontLoaded: false };
  }

  async componentDidMount() {
    try {
      await Font.loadAsync({
        'anton-regular': require('./assets/fonts/Anton-Regular.ttf'),
      });
      this.setState({ fontLoaded: true });
      console.log('fonts are loaded');
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    if (this.state.fontLoaded) {
      console.log('fonts loaded: ', this.state.fontLoaded)
      return (
        <Root>
          <Provider store={store}>
            <AppWithNavigationState />
          </Provider>
        </Root>
      );
    }
    return (
      <Root>
        <LoadingScreen />
      </Root>
    );
  }
}

编辑

根据 Evan Bacon 的建议，我将 Font.loadAsyc 包装在 try/catch 中，但没有发现任何错误。我还在我的 app.json 中添加了以下内容，没有任何变化。

 "packagerOpts": {
   "assetExts": ["ttf"]
 },

【问题讨论】：

我怀疑字体下载失败，你可以用 try/catch 包裹Font.loadAsync 并打印错误。还记得在app.json 中将“ttf”添加到您的packagerOpts.assetExts ????
@EvanBacon packagerOpts.assetExts 是怎么回事？我在文档中没有看到任何相关内容
在 expo 中你需要在 app.json 中定义所有的资产扩展。 “ttf”可能是预定义的之一，但在小吃中它会在 app.json 中与它一起导出
@EvanBacon 刚刚用您的建议更新了问题。还是没有运气

标签： react-native fonts expo

【解决方案1】：

终于明白了。原来我在使用字体的地方有一个尾随空格，如下所示：

<Text style={{ fontFamily: 'anton-regular ' }}>I'm dumb.</Text>

有趣的是，我可以从 app.json 中删除它

"packagerOpts": {
  "assetExts": ["ttf"]
},

字体仍然有效。

【讨论】：