使用自定义字体与本地反应原生,每次加载字体

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仅提供异步加载它们的说明.我是否必须在我想要自定义字体的每个组件上执行此操作？当我已经加载一次时,这似乎会导致一些不必要的调用.

有没有办法将字体设置为全局或通过道具一旦加载传递它？看起来他们通过该链接的最后一行建议了这种方法:

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

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

所以我的问题是:

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

2)加载后,你可以通过属性传递字体或将其设置为全局吗？

最后

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

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

Answer 1

1）您只能加载一次字体。如您所指出，Expo建议将Font.loadAsync方法放入顶级组件的componentDidMount（）方法中。

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

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

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

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）这是与Expo相关的“问题”（或解决方案，具体取决于您的外观）。例如，在iOS上，添加自定义字体涉及几个步骤（将字体文件添加到本机项目中，确保字体显示在Bundle Resources中，将字体添加到Info.plist ...）。不确定适用于Android的过程是什么，但这是不同的，可能也很烦人。

世博会通过其Font模块将其抽象化，该模块允许您做一件事-并在各个平台上获得相同的结果。在我的书中，这很酷。