React 本机自定义字体未加载，不确定为什么？

Question

我做了文档中的所有操作，但我的自定义字体不想加载。我可以等几个小时，但什么也没有发生...

这是我的 App.js:

import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';

export default function App() {
  const [isReady,setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
    setIsReady(true);
  }

  useEffect(() => {
    LoadFonts();
      },[])

  if (!isReady) {
    return(
      <LoadingScreen/>
    )
  }
  else{
  return (
    <AuthNavigation/>
  );
  }
}

这是我的 useFont.js

import Font from 'expo-font';

export default useFont = async () => 
    await Font.loadAsync({
       QuicksandMedium: require('../assets/Fonts/Quicksand-Medium.ttf'),
       AmaticSCRegular: require('../assets/Fonts/AmaticSC-Regular.ttf')
    })

控制台没有打印错误，所以我不知道我做错了什么:/

Answer 1

解决方案是像这样导入您的字体：

从 'expo-font';

导入 * 作为字体

Answer 2

我不确定，但也许 if 应该是问题所在。试试这个：

import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';

export default function App() {
  const [isReady,setIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
    setIsReady(true);
  };

  useEffect(() => {
    LoadFonts();
  },[]);

  return (
    <>
      {isReady ?
        <AuthNavigation/>
        :
        <LoadingScreen/>
      }
    </>
  );
}

React 本机自定义字体未加载，不确定为什么？

React native custom fonts not loading in, not sure why?

javascript

custom-font

reactjs

react-native