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

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

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

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

所以我的问题是：

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

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

最后

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

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

Answer 1

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上的旧金山，Android上的Roboto。这就是为什么Expo建议设置加载状态...以避免系统字体和新加载的自定义字体之间的尴尬闪烁。）

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

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

Expo已经用它们的Font模块抽象了它，它允许你做一件事 - 并且跨平台获得相同的结果。在我的书中，这很酷。

Answer 2

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

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

我在中 Refer This

上对此进行了很好的解释

希望这有帮助。

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

3 个答案: