gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 20:54:58 25 4
gpt4 key购买 nike

我正在将 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' 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.

  • If this is a custom font, be sure to load it with 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 (
...
)
}

关于reactjs - 似乎无法使用 Expo 的 Font.loadAsync 加载自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52917558/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com