使用自定义字体与expo反应原生，每次加载字体 [英] Using custom Font in react native with expo, loading font every time

问题描述

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

I am using Expo and the create-react-native app. I enjoy the live/hot reloading feature on my phone, but I'm wondering about custom fonts.

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

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

The API for Expo only has directions to load them asynchronously. Do I have to do this on every component I want a custom font on? This seems like it would cause some unnecessary calls when I've already loaded it once.

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

Is there a way to set the font as global or pass it via props once loaded? It seems like they suggest this approach via their last line in that link:

注意:通常，您需要先加载应用程序的主要字体显示应用程序以避免字体加载后文本闪烁.推荐的方法是将 Font.loadAsync 调用移动到您的顶级组件.

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.

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

...But they give no explanation on HOW to do that, if that's what they are implying.

所以我的问题是:

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

1) Does loading the custom font in multiple times (on each component), cause performance issues? (or maybe it's pulled from cache after the first?)

2) 加载后可以通过属性传递字体还是设置为全局字体?

2) After loading it can you pass the font down via properties or set it as a global?

最后

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

3) Is this an Expo only issue? Or a create-react-native app only issue? Or just a livereload/hotloading issue?

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

Also note, I'm working on Windows/Android

推荐答案

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

1) You should only load the font once. As you point out, Expo recommends putting the Font.loadAsync method in the componentDidMount() method of your top-level component.

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

The performance issue you're referring to is probably the magic that's happening behind the asynchronous call—but again, this should only happen once.

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

2) From that point forward, you can use the font in any child component using the "fontFamily" property on <Text>. As their example (which I modified slightly) shows:

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

First load the font in your top-level component.

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 建议设置加载状态...以避免在系统字体和新加载的自定义字体之间出现尴尬的闪烁.)

Then use it in any component in the app. (Prior to the font loading, you will see the system font - San Francisco on iOS, Roboto on Android. This is why Expo recommends setting a loading state... to avoid awkward flashing between the system font and your newly loaded custom font.)

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

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

3) This is an Expo-related "issue" (or solution... depending on how you look at it). For instance, on iOS, adding a custom font involves several steps (adding the font file to your native project, making sure the font shows in your Bundle Resources, adding the font to Info.plist...). Not sure what the process is for Android, but it's something different and probably annoying, too.

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

Expo has abstracted that away with their Font module, which allows you to do one thing - and get the same result across platforms. Which is pretty cool, in my book.

这篇关于使用自定义字体与expo反应原生，每次加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！