React Native不接受用usefontts钩子导入的字体

Question

我用usefontts和expo cli导入了一些自定义字体文件，但是有一个错误说，

fontFamily"ProductSans"不是系统字体，也没有通过font . 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是一个布尔值，它描述了字体是否被加载，你应该只在customFonts为真时应用字体。另外，确保用require函数包围字体路径，以便正确加载它们:

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>
</>
}

当fontsLoaded为假时，还可以显示expo加载屏幕:

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>
}

更多信息在这里。