reactjs - 似乎无法使用 Expo 的 Font.loadAsync 加载自定义字体
问题描述
我正在将 React Native 与 Expo 一起使用,除了自定义字体的这个问题外,一切都很顺利。我在 ./assets/fonts 中有我的字体Lobster-Regular.ttf
,我一直在尝试加载它,如官方文档中所示:
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 (
...
)
}