【问题标题】:How to implement fonts once whilst using React-Navigation and Expo?如何在使用 React-Navigation 和 Expo 时实现一次字体?
【发布时间】:2017-12-18 13:42:38
【问题描述】:

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

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

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

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

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

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

在我的 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 导入自定义字体的步骤。

谢谢!

【问题讨论】:

    标签: javascript react-native fonts react-navigation expo


    【解决方案1】:

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

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

    基本上,您实际上可以将导航器视为组件!

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

    【讨论】:

    • 谢谢你。你能发布你的完整解决方案吗?我也有同样的问题。根据您的问题,也许是一个 sn-p 代码。然后将其标记为答案。祝你有美好的一天!
    猜你喜欢
    • 1970-01-01
    • 2018-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-10
    • 2019-07-02
    • 2018-05-08
    • 2018-03-28
    相关资源
    最近更新 更多