使用 Switch Navigator 时在 react native 中导入 Google 字体答案

【问题标题】：Import Google fonts in react native while using Switch Navigator使用 Switch Navigator 时在 react native 中导入 Google 字体
【发布时间】：2021-12-06 16:26:22
【问题描述】：

所以我正在编写一个应用程序，其中我使用 Switch Navigator 和 React Expo 一起进行本机反应。所有导入说明都建议在 App.js 中导入字体并使用它

export default function App() {...}

问题是通过使用 Switch Navigator 我现在拥有

export default createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: "Loading"
    }
  )
)

我找不到应用我在这里找到的指令的方法，例如： https://docs.expo.dev/guides/using-custom-fonts/ 因为我从 App.js 的默认导出使用了 Switch Navigator 功能。我是否必须在每个屏幕上单独导入字体，或者可能切换到自定义字体加载方法，因为我正在使用这样的 Switch Navigator？

【问题讨论】：

标签： reactjs react-native google-fonts

【解决方案1】：

找到了这样做的方法，以防有人偶然发现它。

所以我不得不像这样重构导出默认函数：

const RootApp = createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: "Loading"
    }
  )
)

export default function App() {

  let [fontsLoaded] = useFonts({
    Lobster_400Regular,
  });


    if (!fontsLoaded) {
      return <AppLoading />;
    }
    // from the custom App we return the component we assigned to RootApp.
    return <RootApp />;
}

【讨论】：