react-native - 使用自定义字体与expo react 原生，每次加载字体

Question

我正在使用 Expo 和 create-react-native 应用程序。我喜欢手机上的实时/热重载功能，但我想知道自定义字体。

https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app

Expo 的 API 仅具有异步加载它们的说明。我是否必须在我想要自定义字体的每个组件上执行此操作？当我已经加载一次时，这似乎会导致一些不必要的调用。

有没有办法将字体设置为全局或加载后通过 Prop 传递？似乎他们通过该链接中的最后一行建议了这种方法:

Note: Typically you will want to load your apps primary fonts before the app is displayed to avoid text flashing in after the font loads. The recommended approach is to move the Font.loadAsync call to your top-level component.

...但是他们没有解释如何做到这一点，如果这是他们所暗示的。

所以我的问题是:

1) 多次(在每个组件上)加载自定义字体会导致性能问题吗？ (或者也许它是在第一个之后从缓存中提取的？)

2)加载后，您可以通过属性传递字体还是将其设置为全局？

最后

3) 这是世博会唯一的问题吗？还是只有 create-react-native 应用程序的问题？或者只是一个 livereload/hotloading 问题？

另请注意，我正在使用 Windows/Android

Answer 1

1) 您应该只加载一次字体 .正如您所指出的，Expo 建议将 Font.loadAsync 方法放在顶级组件的 componentDidMount() 方法中。

您所指的性能问题可能是异步调用背后发生的魔力——但同样，这应该只发生一次。

2) 从那时起，您可以使用 <Text> 上的“fontFamily”属性在任何子组件中使用字体。 .正如他们的示例(我稍作修改)所示:

首先在顶层组件中加载字体。

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
  }

  render() {
    return (
       <HelloWorld />
    )
  }
}

然后在应用程序的任何组件中使用它。 (在字体加载之前，您会看到系统字体 - iOS 上的 San Francisco，Android 上的 Roboto。这就是为什么 Expo 建议设置加载状态...以避免在系统字体和新加载的自定义字体之间出现尴尬的闪烁。 )

export default class HelloWorld extends React.Component {
  render() {
    <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
      Hello, world!
    </Text>
  }
}

3) 这是一个与世博会相关的“问题”(或解决方案...，取决于您如何看待它)。例如，在 iOS 上，添加自定义字体涉及几个步骤(将字体文件添加到 native 项目，确保字体显示在 Bundle Resources 中，将字体添加到 Info.plist...)。不确定 Android 的流程是什么，但它是不同的，可能也很烦人。

Expo 使用他们的 Font 模块将其抽象化，它允许您做一件事 - 并跨平台获得相同的结果。这很酷，在我的书中。