Expo 字体

一个允许在运行时加载字体并在 React Native 组件中使用它们的库。

expo-font 允许从网络加载字体并在 React Native 组件中使用它们。请参阅 字体 指南中更详细的使用信息。

¥expo-font allows loading fonts from the web and using them in React Native components. See more detailed usage information in the Fonts guide.

安装

¥Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

应用配置中的配置

¥Configuration in app config

有两种方法可以向你的应用添加字体：使用 expo-font 配置插件（推荐）或在运行时加载它们。

¥There are two ways to add fonts to your app: using the expo-font config plugin (recommended) or loading them at runtime.

该插件允许你在构建时嵌入字体文件，这比 useFonts 或 loadAsync 更高效。设置配置插件并运行 prebuild 后，你可以立即渲染自定义字体。该插件可以通过多种方式配置，有关如何使用它，请参阅 字体 指南。

¥The plugin allows you to embed font files at build time which is more efficient than useFonts or loadAsync. After you set up the config plugin and run prebuild, you can render custom fonts right away. The plugin can be configured in different ways, see the Fonts guide on how to use it.

Example app.json with config plugin

{
"expo": {
  "plugins": [
    [
      "expo-font",
      {
        "fonts": ["./path/to/file.ttf"],
        "android": {
          "fonts": [
            {
              "fontFamily": "Source Serif 4",
              "fontDefinitions": [
                {
                  "path": "./path/to/SourceSerif4-ExtraBold.ttf",
                  "weight": 800
                }
              ]
            }
          ]
      }
    ]
  ]
}
}

Configurable properties

用法

¥Usage

如果你不想使用 配置插件，可以使用 useFonts 钩子在运行时加载字体，如下代码片段所示：

¥If you don't want to use the config plugin, you can load a font at runtime with the useFonts hook, as shown in the snippet:

import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
// Use `useFonts` only if you can't use the config plugin.
const [loaded, error] = useFonts({
  'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});

useEffect(() => {
  if (loaded || error) {
    SplashScreen.hideAsync();
  }
}, [loaded, error]);

if (!loaded && !error) {
  return null;
}

return (
  <View style={styles.container}>
    <Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
    <Text style={{ fontSize: 30 }}>Platform Default</Text>
  </View>
);
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
},
});

API

import * as Font from 'expo-font';

Hooks

const [loaded, error] = useFonts({ ... });

Methods

Types

Enums

错误代码

¥Error codes