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

Posted 2023-03-14

【中文标题】使用自定义字体与expo反应原生，每次加载字体

【英文标题】：Using custom Font in react native with expo, loading font every time

【发布时间】：2017-11-02 18:05:18

【问题描述】：

我正在使用 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

【问题讨论】：

好吧，所以我对 Expo 及其与 react-native 的关系有点困惑。似乎构建在 react-native 之上的模块使一些事情变得更容易，但其他事情变得更加困难。权衡是试图让开发人员编写更多的 JS 并摆脱本机代码的“杂草”。所以回答#3，这是一个世博会唯一的问题。我不确定它是否真的会伤害性能，或者您是否可以将其传递出去，但 #1 和 #2 仍然处于打开状态......

【参考方案1】：

我知道线程很旧，但这也可能对其他人有所帮助。直接使用Font.asyncLoad()会导致系统字体错误。

fontFamily "roboto-medium" 不是系统字体，没有通过 Font.loadAsync 加载

export default class App extends React.Component 

    state = 
        assetsLoaded: false,
    ;

    async componentDidMount() 
        await Font.loadAsync(
            'roboto-medium': require('./assets/fonts/Roboto-Medium.ttf')
        );

        this.setState( assetsLoaded: true );
    

    render() 

        const assetsLoaded = this.state;

        if( assetsLoaded ) 
            return (
                <View style=styles.container>
                    <Text style=styles.heading>Custom Roboto Font</Text>
                    <Text style=fontSize: 40>Default Font</Text>
                </View>
            );
        
        else 
            return (
                <View style=styles.container>
                    <ActivityIndicator />
                    <StatusBar barStyle="default" />
                </View>
            );
        
    

如果您想了解更多详细信息，请点击链接。

https://webomnizz.com/add-custom-font-to-react-native-using-expo/

【参考方案2】：

要有效地使用字体（expo），您可以在最根组件中加载字体，加载后您可以更新状态 fontLoaded:true 处于全局状态 [Redux]。

我在medium Refer This上解释得很好

希望这会有所帮助。

【参考方案3】：

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

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

【讨论】：

我最终没有使用它。虽然我确实必须为 iOS 和 Android 定制解决方案，但我觉得它们工作得更好，更全球化。我最讨厌的是我正在为 Expo 编写代码，而不是与应用程序相关的代码。另外，我从来没有让子组件正确继承它。