javascript - 如何在使用 React-Navigation 和 Expo 的同时实现一次字体？

Question

我目前正在为我的项目使用 Expo 和 React-Navigation。在使用 React-Navigation 和 Expo 时，我很难想出并找到将自定义字体实现到我的项目中的解决方案。

这是 Expo 实现自定义字体的方法:https://docs.expo.io/versions/v15.0.0/guides/using-custom-fonts.html

Expo 提供了一种从 Assets 文件夹加载字体的异步方法，这需要将这几行代码添加到我的顶级组件定义的任何地方的 componentDidMount() 中:

(复制自之前放置的链接)

componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
}

理论上，我可以在我的应用程序的每个页面中实现这一点，但这会导致我的应用程序加载速度变慢。理想情况下，我只想在我的顶级组件(此处解释:Using custom Font in react native with expo, loading font every time)中只执行一次 Expo 的步骤，因为在应用程序的每个组件中执行此解决方案会导致加载速度变慢。

在我的 App.js 中，我导出了一个导航器，而不是一个包含 componentDidMount() 函数调用的组件。这是我的 App.js 现在的样子。

export default SimpleApp = DrawerNavigator({
  Login: {
    screen: SomeComponent,
    navigationOptions: {
      acceptPan: false,
    },
  },
  MainTabs: {
    screen: SomeTabNavigator,
    navigationOptions: {
      tabBarPosition:'top',
      headerLeft: null
    }
  }
});

在这里，我导出了一个 DrawerNavigator，它不是一个组件。所以现在，我什至没有顶级组件。重申一下，我想让我的 App.js 导出一些保留导航的顶级组件，并允许我执行 Expo 导入自定义字体的步骤。

谢谢!

Answer 1

我在尝试为我的应用程序实现自定义状态栏时无意中发现了答案。这是我找到解决方案的链接(引用 ezzak 的回复)。

https://github.com/react-community/react-navigation/issues/1441

基本上，您实际上被允许将导航器视为组件!

不要忘记将所有类组件的首字母大写。