反应本机不接受用Usefonts钩进口的字体

Question

我将一些带有Expo cli的Usefonts导入了一些自定义字体文件，但是有一个错误的说法：

fontfamily“ Productsans”不是系统字体，尚未通过字体加载。loadasync

这是代码的

import { useFonts } from 'expo-font';

const FontScreen= () => {

  const [customFonts] = useFonts({
    ProductSans: '../../assets/fonts/ProductSansRegular.ttf',
    ProductSansBold: '../../assets/fonts/ProductSansBold.ttf',
  });

<Text style={{fontFamily: 'ProductSans' }}>Text</Text>
}

问题是什么？

Answer 1

usefonts（）挂钩工作类似：

useFonts(map: string | {
    [fontFamily: string]: FontSource;
}): [boolean, Error | null]

Load a map of custom fonts to use in textual elements. 
The map keys are used as font names, and can be used with fontFamily: <name>;. 
It returns a boolean describing if all fonts are loaded.

Note, the fonts are not "reloaded" when you dynamically change the font map.

由于customfonts是一个布尔值，它描述了字体是否加载，因此仅在custic> custicfonts 是正确的。另外，请确保使用需要函数来正确加载它们：

import { useFonts } from 'expo-font';

const FontScreen = () => {

  const [fontsLoaded] = useFonts({
    ProductSans: require('../../assets/fonts/ProductSansRegular.ttf'),
    ProductSansBold: require('../../assets/fonts/ProductSansBold.ttf'),
  });

 return (
    <>
        {fontsLoaded && <Text style={{fontFamily: 'ProductSans'}}>
            Text
         </Text>
    </>
}

时将功能正确加载：

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

const FontScreen = () => {

  const [fontsLoaded] = useFonts({
    ProductSans: require('../../assets/fonts/ProductSansRegular.ttf'),
    ProductSansBold: require('../../assets/fonts/ProductSansBold.ttf'),
  });

 if (!fontsLoaded) {
     return <AppLoading />;
 }

 return (
    <Text style={{fontFamily: 'ProductSans'}}>
            Text
    </Text>
}

您还可以在fontsloaded是false：更多信息在这里。