Question

我正在尝试在我的应用中使用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."

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

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>
    );
  }
}

修改

Per Evan Bacon的建议我将Font.loadAsyc包裹在try / catch中，但没有发现任何错误。我还将以下内容添加到我的app.json中，没有任何更改。

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

Answer 1

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

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

有趣的是，我可以从app.json

中删除它

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

字体仍然可以使用。

React Native不能将自定义字体与Expo Font.loadAsync一起使用

1 个答案: