Не удается загрузить пользовательские шрифты с помощью Expo Font.loadAsync

да. Вам не хватает того, что звонок - 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 (
        ...
    )
}

** Реагировать на собственный шрифт в функции без сохранения состояния **

**step:1 import font from expo **

import * as Font from 'expo-font';
import { AppLoading } from 'expo';

*step2: require font from files *

// fetchFonts from local files type ttf 
const fetchFonts = () => {
  return Font.loadAsync({
  'PacificoRegular': require('../assets/Pacifico/Pacifico-Regular.ttf'),
  });
  };

*****step3:use state  *****

// state font fetch control 
const [fontloaded,setfontloaded]=useState(false);

**step4: use app loaded **

if (!fontloaded){
  return(
    <AppLoading
    startAsync = {fetchFonts}
    onFinish = {()=>{setfontloaded(true)}}
    onError = {console.warn}/>
  )
}

**step5:style font **

txt:{
padding:5,
fontSize:18,
fontFamily: 'PacificoRegular',
 }

установите пакет экспо-шрифт из выставка CLI, потому что иногда версия expo-font несовместима с вашей версией expo, поэтому,

шаг 1:

expo install expo-font

шаг 2:

class App extends React.Component {
  state = {
    fontLoaded: false,
  };

  componentDidMount() {
    this.loadAssetsAsync();
  }

  async loadAssetsAsync() {
    await Font.loadAsync({
      // Load a font `Montserrat` from a static resource
      MuseoSans500: require("./assets/fonts/museosans_500-webfont.ttf"),
      MuseoSans700: require("./assets/fonts/museosans_700-webfont.ttf"),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    if (!this.state.fontLoaded) {
      return null; // render some progress indicator
    }
    return <AnyComponent />;
  }
}

useEffect(()=>{
    async function loadFonts(){
      await Font.loadAsync({
        'Montserrat': require("./assets/fonts/Montserrat/Montserrat-Regular.ttf"),
        'Montserrat-SemiBold': require('./assets/fonts/Montserrat/Montserrat-SemiBold.ttf'),
        'Montserrat-Bold': require('./assets/fonts/Montserrat/Montserrat-Bold.ttf'),
        'Fascinate': require('./assets/fonts/Fascinate/Fascinate-Regular.ttf')
      }).then(res=>{
        console.info("FONTS LOADED!");
        setLoaded(true)
      }).catch(Err=>{
        setLoaded(true);
        console.info(Err);
      }); 
    }

    loadFonts();
  },[])

Загрузите с помощью этого useEffect в свой файл App.js, после загрузки шрифты можно использовать в любом месте вашего expo или response-native проекта.

const Heading = (color) => {
    return({fontSize:45*fontScale, fontFamily: "Montserrat-SemiBold", color, marginTop: -10, marginLeft: InitialMargin, letterSpacing: 4})
}

Убедитесь, что вы не используете стиль fontWeight, поскольку он переопределит fontStyle и не применит fontFamily к вашему тексту.

Font.loadAsync устарел и, как оказалось, имел непредсказуемые проблемы. теперь expo выкатили новые решения здесь

так что теперь правильный код:

import {useFonts} from 'expo-font';
import AppLoading from "expo-app-loading";

let [fontsLoaded] = useFonts({
      'Lobster': require('./assets/fonts/Lobster-Regular.ttf'),
    });
    if (!fontsLoaded) {
        return <AppLoading/>;
    }
...