Реагируйте на собственный импорт шрифтов с помощью async componentDidMount () Ожидается =>

Question

Я пытаюсь импортировать шрифт для заголовка проекта и загружаю шрифт следующим образом:

import * as Font from 'expo-font'


const Home = () => {

return(
this.state = {
    fontLoaded: false
  }
   async componentDidMount(){
      await Font.loadAsync({
        'Pacifico': require('../assets/pacifico/Pacifico.ttf'),
      }).then(() => {
      this.setState({fontLoaded: true})
    })

<View style={{marginTop:30, alignItems:'center'}}>
    {this.state.fontLoaded ? (<Text>Loading...</Text>): (
    <Text style={{fontSize:40, fontFamily:'Pacifico'}}>Book Lover</Text>
    )}
    </View>
)}

однако при компиляции проекта появляется сообщение об ошибке Unexpected token, expected "=>"и он указывает на строку async componentDidMount(){

Что я могу исправить?

Answer 1

Если вы хотите использовать функциональный компонент с крючками, попробуйте так:

добавьте к импортам:

 import { useState, useEffect } from 'react';

и

const Home = () => {

  const [fontLoaded, setFontLoaded] = useState(false);
  useEffect(async() => {
   await Font.loadAsync({
       Pacifico: require('../assets/pacifico/Pacifico.ttf'),
    });
    setFontLoaded(true);
  }, []);

  return (
    <View style={{ marginTop: 30, alignItems: 'center' }}>
      {!fontLoaded ? (
        <Text>Loading...</Text>
      ) : (
        <Text style={{ fontSize: 40, fontFamily: 'Pacifico' }}>Book Lover</Text>
      )}
    </View>
  );
};