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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (162)

我正在使用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 (
        ...
    )
}

扫码关注云+社区

领取腾讯云代金券