React native React Native can'；t将自定义字体与Expo font.loadAsync一起使用

我正在尝试在我的应用程序中使用谷歌字体，但我没有按照文档进行操作。我下载了字体并使用了Expo推荐的文件结构。文档中说要使用

异步组件didmount

，您可以在下面的代码中看到我正在这样做。我看到其他人成功地使用了

异步组件willmount

，但对我来说并不奏效

我收到的错误消息是：

console.error:“fontFamily'anton regular'不是系统字体，未通过Expo.font.LoadAsync加载。”

加载字体的My console.log: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>
    );
  }
}

---

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

我很笨。

有趣的是，我可以从

app.json

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

---

字体仍然有效。

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

我很笨。

有趣的是，我可以从

app.json

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

---

字体仍然可以使用。

我怀疑该字体无法下载，您能用try/catch包装

font.loadAsync

并打印错误吗。还记得在

app.json

@evanback中将“ttf”添加到你的

packagerOpts.assetExts

中，这是关于

packagerOpts.assetExts

的吗？我在docsin expo中没有看到任何相关内容，您需要在app.json中定义所有资产扩展。“ttf”可能是预定义的选项之一，但在Snapshot中，它会将其导出到应用程序中。json@EvanBacon刚刚用你的建议更新了问题。仍然没有luckI怀疑字体下载失败，您能否用try/catch包装

font.loadAsync

，然后打印错误。还记得在

app.json

@evanback中将“ttf”添加到你的

packagerOpts.assetExts

中，这是关于

packagerOpts.assetExts

的吗？我在docsin expo中没有看到任何相关内容，您需要在app.json中定义所有资产扩展。“ttf”可能是预定义的选项之一，但在Snapshot中，它会将其导出到应用程序中。json@EvanBacon刚刚用你的建议更新了问题。还是不走运