似乎无法使用 Expo 的 Font.loadAsync 加载自定义字体

我正在将 React Native 与 Expo 结合使用，除了自定义字体的问题之外，一切都很顺利。我有我的字体Lobster-Regular.ttf在 ./assets/fonts 中，我一直在尝试加载它，如官方文档中所示：

componentDidMount() {

    Font.loadAsync({

      'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
    });

  }

然后我将标题设置为这样：

  headerText: {
    color: 'white',
    fontSize: 30,
    fontFamily: 'Lobster'
  }, 

我得到的只是

fontFamily 'Lobster' 不是系统字体，尚未加载 通过 Font.loadAsync。

• 如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持该名称。

• 如果这是自定义字体，请务必使用 Font.loadAsync 加载它。

我错过了什么吗？

是的。您错过了电话是Font.loadAsync()。这意味着它加载了异步地。如：需要一段时间。在字体加载之前，您无法呈现 UI。您需要按照以下方式做一些事情：

import { AppLoading, Font } from 'expo'

state = {
    fontsLoaded: false,
    ...
}

componentWillMount() {
    Font.loadAsync( {
            'Lobster': require('./assets/fonts/Lobster-Regular.ttf')
        }
    ).then( () => this.setState( { fontsLoaded: true } ) )
}

render() {
    if( !this.state.fontsLoaded ) {
        return <AppLoading/>
    }

    return (
        ...
    )
}