React Native 配置自定义字体

一、资源处理库

[1. 加入全局依赖](#1. 加入全局依赖)

[2. react-native.config.js](#2. react-native.config.js)

[3. link资源](#3. link资源)

[4. 重启项目](#4. 重启项目)

[二、React Native Paper配置全局字体](#二、React Native Paper配置全局字体)

一、资源处理库

文档链接：https://www.npmjs.com/package/react-native-asset

1. 加入全局依赖

bash 复制代码

npm install -g react-native-asset

2. react-native.config.js

在根目录下创建并配置react-native.config.js如下：

通用配置：

javascript 复制代码

module.exports = {
  // 通用资源
  assets: ['./src/assets/fonts']
  // ios专属
  // iosAssets: [],
  // android专属
  // androidAssets: ['./src/assets/fonts']
};

注意：在windows电脑上不能直接link到ios目录下，所以需要参考配置，如下：

javascript 复制代码

module.exports = {
  // 通用资源
  // assets: ['./src/assets/fonts']
  // ios专属
  // iosAssets: [],
  // android专属
  androidAssets: ['./src/assets/fonts']
};

执行完命令后，记得恢复到第一个配置，并且，以后开发ios前需要再link一次。

3. link资源

这步执行后，对应资源的文件将被放到android或ios的对应资源目录下。

bash 复制代码

npx react-native-asset

4. 重启项目

二、React Native Paper配置全局字体

以下为MD3的配置方式，V5版本需要用此最新方式。

typography.ts文件

javascript 复制代码

/**
 * @author Dragon Wu
 * @created 2026/06/07 12:57
 * @description 字体、文字样式
 */

import { Languages } from '@/locales';

// 项目中所有的字体（注意：保证fileName与PostScript Name必须一致）
export const fontFamily = {
  sc: {
    light: 'HarmonyOS_Sans_SC_Light',
    regular: 'HarmonyOS_Sans_SC_Regular',
    medium: 'HarmonyOS_Sans_SC_Medium',
    bold: 'HarmonyOS_Sans_SC_Bold',
    heavy: 'HarmonyOS_Sans_SC_Black'
  },
  tc: {
    light: 'HarmonyOS_Sans_TC_Light',
    regular: 'HarmonyOS_Sans_TC_Regular',
    medium: 'HarmonyOS_Sans_TC_Medium',
    bold: 'HarmonyOS_Sans_TC_Bold',
    heavy: 'HarmonyOS_Sans_TC_Black'
  },
  secondary: {
    // 次要字体
  }
};

// 不同语言的字体
export const fonts: Record<Languages, Record<string, unknown>> = {
  [Languages.sc]: fontFamily.sc,
  [Languages.en]: fontFamily.sc,
  [Languages.tc]: fontFamily.tc
};

// react native paper 组件默认字体配置
export const typography = (language: Languages) => {
  const regular = fonts[language].regular;
  const medium = fonts[language].medium;

  return {
    // 展示标题
    displayLarge: { fontFamily: regular, fontSize: 57, letterSpacing: -0.25, lineHeight: 64 },
    displayMedium: { fontFamily: regular, fontSize: 45, letterSpacing: 0, lineHeight: 52 },
    displaySmall: { fontFamily: regular, fontSize: 36, letterSpacing: 0, lineHeight: 44 },
    // 页面大标题
    headlineLarge: { fontFamily: medium, fontSize: 32, letterSpacing: 0, lineHeight: 40 },
    headlineMedium: { fontFamily: medium, fontSize: 28, letterSpacing: 0, lineHeight: 36 },
    headlineSmall: { fontFamily: medium, fontSize: 24, letterSpacing: 0, lineHeight: 32 },
    // 卡片标题
    titleLarge: { fontFamily: medium, fontSize: 22, letterSpacing: 0, lineHeight: 28 },
    titleMedium: { fontFamily: medium, fontSize: 16, letterSpacing: 0.15, lineHeight: 24 },
    titleSmall: { fontFamily: medium, fontSize: 14, letterSpacing: 0.1, lineHeight: 20 },
    // 正文
    bodyLarge: { fontFamily: regular, fontSize: 16, letterSpacing: 0.15, lineHeight: 24 },
    bodyMedium: { fontFamily: regular, fontSize: 14, letterSpacing: 0.25, lineHeight: 20 },
    bodySmall: { fontFamily: regular, fontSize: 12, letterSpacing: 0.4, lineHeight: 16 },
    // 标签/按钮
    labelLarge: { fontFamily: medium, fontSize: 14, letterSpacing: 0.1, lineHeight: 20 },
    labelMedium: { fontFamily: medium, fontSize: 12, letterSpacing: 0.5, lineHeight: 16 },
    labelSmall: { fontFamily: medium, fontSize: 11, letterSpacing: 0.5, lineHeight: 16 },
    // 默认字体
    default: { fontFamily: regular, letterSpacing: 0 }
  };
};

注意：保证fileName与PostScript Name必须一致，这样android和ios才都能识别。

javascript 复制代码

/**
 * @author Dragon Wu
 * @created 2026/06/07 17:47
 * @description 字体、字体样式
 */

import type { Languages } from '@/locales';
import { useAppSelector } from '@/stores/redux/hooks';
import { selectLanguage } from '@/stores/redux/selectors';
import { fonts, typography } from '@/styles/typography';

// 获取当前语言对应的字体
export const useFontFamily = (): Record<string, unknown> => {
  const language: Languages = useAppSelector(selectLanguage);
  return fonts[language];
};

// 获取当前语言的文字样式
export const useTypography = (): Record<string, unknown> => {
  const language: Languages = useAppSelector(selectLanguage);
  return typography(language);
};

配置主题参数：

javascript 复制代码

/**
 * @author Dragon Wu
 * @created 2026/06/07 13:24
 * @description react native paper的主题
 * link: https://oss.callstack.com/react-native-paper/docs/guides/theming
 */

// import colors from '@/styles/colors';
import { useTypography } from '@/hooks/ui';
import { MD3LightTheme as DefaultTheme } from 'react-native-paper';

export const usePaperTheme = () => {
  const typography = useTypography();

  return {
    ...DefaultTheme,
    fonts: typography,
    colors: {
      ...DefaultTheme.colors
      // primary: colors['light-purple'],   // 自定义主题颜色
      // secondary: colors['theme-orange']
    }
  };
};

将主题注入Provider:

javascript 复制代码

/**
 * @author Dragon Wu
 * @created 2026/01/25 16:29
 * @description React Native Paper的Provider
 */

import { usePaperTheme } from '@/hooks/core/app/usePaperTheme';
import { type ReactNode } from 'react';
import { PaperProvider as BasePaperProvider } from 'react-native-paper';

export function PaperProvider({ children }: { children: ReactNode }) {
  const paperTheme = usePaperTheme();

  return <BasePaperProvider theme={paperTheme}>{children}</BasePaperProvider>;
}

这样配置后，react native paper的组件默认都是对应字体配置了。