Font.loadAsync 不加载字体，因此会显示飞溅

Question

字体的加载好几天都没有工作，找不到原因，expo go还有其他问题，加载需要很长时间，并且exp发布后由于某种原因应用程序是没有更新，有人知道原因吗？

在开发过程中（6 个月）没有问题，但是两天前由于某种原因字体坏了，我找不到原因

如果删除字体的加载，则应用程序已加载。

"expo-cli": "4.11.0",
"世博": "~40.0.0",
"expo-app-loading": "^1.0.1",
“反应”：“16.13.1”，
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",

Answer 1

*就我而言，在使用 expo go 时，我注意到如果（我的手机和计算机的）时钟不同步，加载 AppLoading 需要很长时间。

*如果有帮助，我将向您展示如何在我的应用中加载字体，我目前正在使用：

“世博”：“^41.0.0”，

"expo-app-loading": "^1.1.2",

"expo-font": "~9.1.0",

“反应”：“16.13.1”，

"react-dom": "16.13.1",

“react-native”：“https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz”，

 const fetchFonts = async () => {
     return await Font.loadAsync({
        'gotham-narrow-black':{
             uri: require('./assets/fonts/gotham/GothamNarrow-Black.otf'),
             display: Font.FontDisplay.FALLBACK
        },
        'gotham-narrow-book':{
             uri: require('./assets/fonts/gotham/GothamNarrow-Book.otf'),
             display: Font.FontDisplay.FALLBACK
        },
        'gotham-ultra':{
             uri: require('./assets/fonts/gotham/Gotham-Ultra.otf'),
             display: Font.FontDisplay.FALLBACK
        },
       'gotham-light':{
             uri: require('./assets/fonts/gotham/GothamLight.otf'),
             display: Font.FontDisplay.FALLBACK
        },
       'gotham-book':{
             uri: require('./assets/fonts/gotham/Gotham-Book.otf'),
             display: Font.FontDisplay.FALLBACK
        },
  })
}

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);
  if(!fontLoaded) {
    return <AppLoading 
      startAsync = { fetchFonts }
      onError = { console.warn }
      onFinish = { () => setFontLoaded(true) }
    />
  }
  return <MainApp />;
}

Answer 2

由于您的字体是静态文件，您必须更改 fontLoading 函数

改变这个

import Helvetica from './Helvetica.ttf';

const useFonts = async () =>
  await Font.loadAsync({
    Helvetica: Helvetica, // not like this
  });

到这里

const useFonts = async () =>
  await Font.loadAsync({
    Helvetica: require('./Helvetica.ttf'), // correct location
  });

因此，在您的情况下，将您的 loadFonts 函数更改为此

const loadFonts = async () =>
  await Font.loadAsync({
    montserratRegular: require('./assets/Montserrat-Regular.ttf'),
    montserratBold: require('./assets/Montserrat-Bold.ttf'),
    montserratSemiBold: require('./assets/Montserrat-SemiBold.ttf'),
    montserratMedium: require('./assets/Montserrat-Medium.ttf'),
  });