似乎无法使用Expo的Font.loadAsync加载自定义字体 [英] Can't seem to load custom fonts with Expo's Font.loadAsync

问题描述

我正在将React Native与Expo一起使用，并且一切正常，除了这一问题涉及自定义字体.我在./assets/fonts中有我的字体Lobster-Regular.ttf，并且我一直在尝试加载它，如官方文档中所示:

I'm using React Native with Expo, and it is all going well except for this one issue with custom fonts. I have my font Lobster-Regular.ttfin ./assets/fonts, and I have been trying to load it as seen in the official docs:

componentDidMount() {

    Font.loadAsync({

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

  }

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

I then style my header as such:

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

我所能得到的是

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

fontFamily 'Lobster' is not a system font and has not been loaded through Font.loadAsync.

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

• If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

如果这是自定义字体，请确保使用Font.loadAsync加载它.

If this is a custom font, be sure to load it with Font.loadAsync.

我想念什么吗?

推荐答案

是.您缺少呼叫为Font.loadAsync()的信息.这意味着它会异步加载 .如:需要一段时间.字体加载后才能渲染UI.您需要按照以下步骤进行操作:

Yes. You are missing that the call is Font.loadAsync(). This means that it loads asynchronously. As in: It takes a while. You can't render the UI until the font has loaded. You need to do something along these lines:

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 (
        ...
    )
}

这篇关于似乎无法使用Expo的Font.loadAsync加载自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！