使用自定义字体反应原生与世博会，每次加载字体

我使用世博会和创造反应原生的应用程序。我喜欢手机上的直播/热点重新加载功能，但我很想知道自定义字体。使用自定义字体反应原生与世博会，每次加载字体

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

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

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

注：通常你会希望加载应用之前显示的应用程序，以避免文本的字体加载后闪烁初级字体。建议的方法是将Font.loadAsync调用移动到您的顶级组件。

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

所以我的问题是：

1）是否在加载多次自定义字体（每个组件），会导致性能问题？（或者它可能在第一次之后从高速缓存中拉出来）

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

最后是

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

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

来源

2017-06-01 Organiccat

好吧，所以我对世博会及其与反应本土的关系有点困惑。看起来模块构建在反应原生的基础之上，使得一些事情变得更容易，但其他变得更加困难。这种权衡是为了让开发人员编写更多的JS并从本地代码的“杂草”中解脱出来。所以，答案＃3，这是一个世博会唯一的问题。我不确定它是否真的会提高性能，或者如果你可以传递它，让＃1和＃2仍然打开... – Organiccat

1）您应该只加载字体一次。正如你指出的那样，世博会建议将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上的旧金山，Android上的Roboto。这就是世博会建议设置加载状态的原因......以避免系统字体和新加载的自定义字体之间闪烁不定。）

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

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

世博会已经将他们的Font模块抽象出来，它允许你做一件事 - 并且跨平台获得相同的结果。在我的书中这很酷。

来源

2017-07-07 03:18:28 bayyar

我最终没有使用它。虽然我确实需要为iOS和Android定制解决方案，但我感觉他们的工作更好，更全球化。我的宠物是我正在编写专门针对世博会的代码，而不是与应用相关的代码。此外，我从来没有得到子组件来正确地继承它。 – Organiccat

使用自定义字体反应原生与世博会，每次加载字体

回答

相关问题