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

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

我知道线程很旧，但这也可能对其他人有所帮助。直接使用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/

Answer 2

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

我在medium Refer This上解释得很好

希望这会有所帮助。

Answer 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 模块将其抽象化，它允许您做一件事 - 并跨平台获得相同的结果。在我的书中，这很酷。