Expo 字体

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

安装

🌐 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 配置插件（推荐用于 Android 和 iOS）或在运行时加载字体（适用于包括网页在内的所有平台）。

🌐 There are two ways to add fonts to your app: using the expo-font config plugin (recommended for Android and iOS) or loading them at runtime (which works across all platforms including web).

在 Android 和 iOS 上，该插件允许你在构建时嵌入字体文件，这比 useFonts 或 loadAsync 更高效。设置好配置插件并运行 prebuild 后，你可以立即渲染自定义字体。该插件可以通过不同方式进行配置，具体用法请参阅 Fonts 指南。

🌐 On Android and iOS, 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

如果你不想使用 config 插件，你可以在运行时通过 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({
  'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});

Methods

Interfaces

Types

Enums

错误代码

🌐 Error codes