对于React Native 0.62.2中的自定义前端，font.loadAsync是必需的吗

Question

我通过构建了我的项目

expo init App

并选择了默认的"空白"选项，因此我没有任何iOS或Android目录。

遵循本教程后，当我最初尝试重新加载应用程序时，Expo抛出了以下错误：

fontFamily "Aileron-Black" is not a system font and has not been loaded through Font.loadAsync.

我注意到没有其他教程将loadAsync用于自定义字体，所以我很好奇这种方法是否真的有必要？此外，在更改了JavaScript文件中的文本后，我发现令人惊讶的是，没有出现错误，并且自定义字体显示正确。这是错误还是安装问题？如果后者适用，正确的方法是什么？

备注：

• react native cli:2.0.1
• 天然反应：0.62.2
• 博览会：3.23.1
• 操作系统：Catalina 10.15.6

Answer 1

在应用程序启动前使用expo-font缓存字体

这里的代码

import React from "react";
import { Text } from "react-native";
import * as Font from "expo-font";
export default class App extends React.Component {
state = {
appIsReady: false,
};
componentDidMount() {
this.prepareResources()
}
prepareResources = async () => {
await cacheAssets();
this.setState({ appIsReady: true });
};
render() {
if (!this.state.appIsReady) {
return <Text>loading...</Text>;
}
return <YourApp />;
}
}
async function cacheAssets() {
const fontAssets = cacheFonts([
{ "poppins-regular": require("./assets/fonts/regular.ttf") },
{ "poppins-bold": require("./assets/fonts/bold.ttf") },
]);
await Promise.all([...fontAssets]);
}
function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}

现在尝试将自定义字体族添加到"文本"组件中。