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

Question

我正在使用 Expo 和 create-react-native 应用程序。我喜欢 phone 上的 live/hot 重新加载功能，但我想知道自定义字体。

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

Expo 的 API 只有异步加载它们的说明。我是否必须在每个我想要自定义字体的组件上执行此操作？当我已经加载过一次时，这似乎会导致一些不必要的调用。

有没有办法将字体设置为全局字体或在加载后通过道具传递？似乎他们通过 link:

中的最后一行建议了这种方法

Note: Typically you will want to load your apps primary fonts before the app is displayed to avoid text flashing in after the font loads. The recommended approach is to move the Font.loadAsync call to your top-level component.

...但是他们没有解释如何做到这一点，如果这是他们的意思的话。

所以我的问题是：

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

2) 载入后字体可以通过属性传下去还是全局设置？

最后

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

Expo 通过他们的 Font 模块将其抽象化，这使您可以做一件事 - 并在不同平台上获得相同的结果。在我的书中，这很酷。

Answer 2

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

我在medium上解释的很好 Refer This

希望对您有所帮助。

Answer 3

我知道这个话题已经过时了，但这也可能对其他人有所帮助。直接使用Font.asyncLoad()导致系统字体错误.

fontFamily "roboto-medium" is not a system font and has not been loaded through 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>
            );
        }
    }
}

如果您想了解更多详情，请关注link。

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

Answer 4

我将此方法与 Expo React Native 一起使用：首先安装相关的 npm 包，在我的例子中我使用“tajawal”字体

npm i @expo-google-fonts/tajawal

在App.js:

let [fontsLoaded] = useFonts({
    Tajawal_300Light,
    Tajawal_400Regular,
    Tajawal_500Medium,
    Tajawal_800ExtraBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

然后在任何组件中使用“TajawalFontFamily”字体作为普通的 fontFamily 样式

style={{fontFamily:TajawalFontFamily }}

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

Using custom Font in react native with expo, loading font every time

react-native

fonts

expo