Не могу загрузить пользовательские шрифты с Font.loadAsync Экспо

Question

Я использую 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.

Я что-то упустил?

Answer 1

Да.Вам не хватает, что звонок Font.loadAsync().Это означает, что он загружает асинхронно .Как в: Это занимает некоторое время.Вы не можете визуализировать интерфейс, пока шрифт не загрузится.Вам нужно сделать что-то вроде этого:

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