使用自定义字体在本地与世博会，每次加载字体 [英] Using custom Font in react native with expo, loading font every time

问题描述

我正在使用世博会和创造反应原生的应用程序。我喜欢手机上的实时/热点重新加载功能，但是我想知道自定义字体。

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

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

有没有一种方法来设置字体为全球或通过道具一旦加载？看起来他们通过链接的最后一行提示了这种方法：
$ b

注意：通常情况下，您希望在加载应用程序主字体之前
显示该应用程序以避免字体加载后文字闪烁。
建议的方法是将Font.loadAsync调用移动到您的
顶层组件。

。但是他们没有解释如何这样做，如果这就是他们所暗示的。

所以我的问题是：

1）多次加载自定义字体（在每个组件上）会导致性能问题？ （或者可能是从第一个缓存中取出的）？

2）加载后可以通过属性传递字体，或者将其设置为全局？

最后

<3>这是世博会唯一的问题吗？还是一个创造反应原生的应用程序唯一的问题？或只是一个livereload / hotloading的问题？

另外请注意，我正在Windows / Android上工作

解决方案

1）只应加载一次字体。正如你指出的那样，世博会建议将Font.loadAsync方法放在顶级组件的componentDidMount（）方法中。

你所指的性能问题是可能是异步调用背后发生的魔法 - 但是，这应该只发生一次。

2）从这一点开始，您可以使用字体在< Text> 上使用fontFamily属性的任何子组件。作为他们的例子（我稍微修改）显示：

首先将字体加载到顶级组件中。

 导出默认类App扩展了React.Component {
 componentDidMount（）{
 Font.loadAsync（{$ b $'open-sans-bold'：require （'./assets/fonts/OpenSans-Bold.ttf'），
}）; 
 $（
 
 
 $（b 
 
 
 
 
 $ $ b  

然后在应用程序的任何组件中使用它。 （字体加载之前，你会看到系统字体 - iOS上的旧金山，Android上的Roboto，这就是为什么世博会建议设置一个加载状态...以避免系统字体和你新加载的自定义字体之间的闪烁。 ）
$ b $ pre $ 导出默认类HelloWorld extends React.Component {
render（）{
< Text style = {{fontFamily：'open-sans-bold'，fontSize：56}}>
你好，世界！
< / Text>





$ b $ 3 $这是与世博有关的问题（或解决方案... 取决于你如何看待它）。例如，在iOS上，添加一个自定义字体包括几个步骤（将字体文件添加到您的本地项目，确保字体显示在您的Bundle资源中，将字体添加到Info.plist ...）。不知道什么是Android的过程，但它是不同的，也可能是烦人的。

博览会已经抽象了他们的字体模块，它允许你做一个事情 - 并获得跨平台相同的结果。这在我的书里很酷。

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

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:

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.

So my questions are:

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) After loading it can you pass the font down via properties or set it as a global?

and finally

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

Also note, I'm working on Windows/Android

解决方案

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) 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 />
    )
  }
}

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) 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 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.

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