reactjs fontFamily不是系统字体,也没有通过Font.loadAsync加载,但使用Font.loadAsync

oo7oh9g9  于 2023-05-22  发布在  React
关注(0)|答案(1)|浏览(97)

我正在通过创建一些项目来学习react native。
我被卡住了,无法加载自定义字体。我已经按照this指南从博览会文档。但我得到一个错误
fontFamily“raleway-bold”不是系统字体,尚未通过Font. loadAsync加载。
然后我在代码中使用了这个Font.loadAsync,但仍然得到相同的错误。
有什么建议吗?

import React, { useState } from 'react';
import Home from './screens/Home';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

const getFonts = () =>
  Font.loadAsync({
    'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf'),
  });

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (fontsLoaded) {
    return <Home />;
  } else {
    return (
      <AppLoading
        startAsync={getFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={console.warn}
      />
    );
  }
}
zdwk9cvp

zdwk9cvp1#

这是一个expo客户端和AppLoading错误GitHub issue
您可以尝试另一种方法,而不使用AppLoading,如下所示

useEffect(() => {
    async function getFonts() {
      await fetchFonts();
      setFontLoaded(true);
    }
    getFonts();
  }, []);
 
  if (!fontLoaded) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }

相关问题