如果您的字体未在 React Native 中加载，执行错误处理的最佳方法是什么？

Question

在我的React Native应用程序中，我下载并包含了自定义字体。当应用程序第一次加载时(app.js是我的入口(，我使用ExpoFont加载字体。App.js看起来像这样：

enableScreens();
const fetchFonts = async () => {
return Font.loadAsync({
"roboto": require('./assets/fonts/Roboto-Regular.ttf'),
"roboto-bold": require('./assets/fonts/Roboto-Bold.ttf'),
"arial-rounded-bold": require('./assets/fonts/ArialRounded-Bold.ttf'),
})
}
export default function App (){
const [dataLoaded, setDataLoaded] = useState(false);
const [isFirstTime, setIsFirstTime] = useState(null);
const loadAppData = async () => {
await fetchFonts()
const result = await isFirstTimeRun();
setIsFirstTime(result);
}
useEffect(() => {
loadAppData().then(() => {
setDataLoaded(true);
}).catch(e => {
console.log("error loading data: ", e.message);
// setDataLoaded(true);
})
}, [])
if (!dataLoaded){
return null;
}
return (
<NavContainer isFirstTimeRun={isFirstTime}/>
);
}

正如你所看到的，我做的第一件事就是加载我的字体。我知道，由于它们是本地加载的，因此不太可能加载失败。所以，也许这是一个愚蠢的问题，但在字体加载引发错误而不加载的情况下，最好的处理方法是什么。很明显，如果你看看我的代码，它也会阻止isFirstTimeRun((函数的执行，但这不是什么问题，我可以处理它。然而，在我的样式表中，我会在整个应用程序中使用一种没有加载的字体。

那么，如果加载失败，回退到不同字体的最佳方法是什么呢？我正在寻找一个不太冗长的策略。例如，在web开发中，你可以键入fallback，但我不认为React Native提供这样的功能。

提前感谢您的帮助！

Answer 1

您的问题是有效的，通常情况下，当应用程序加载其组件(如构建模块、字体、资产(时，我们会显示启动屏幕，因此下面是expo为其应用程序提供的流程。。

import "react-native-gesture-handler";
import React from "react";
import { AppLoading } from "expo";
import { useFonts } from "expo-font";
import AppNavigator from "./src/navigator";
const App = () => {
let [fontsLoaded] = useFonts({
regular: require("./assets/fonts/proxima-nova-regular.otf"),
bold: require("./assets/fonts/proxima-nova-bold.otf"),
semi: require("./assets/fonts/proxima-nova-semibold.otf"),
});
if (!fontsLoaded) return <AppLoading />;
return <AppNavigator />;
};
export default App;

这样，在加载字体之前，初始屏幕将显示给最终用户