React Native Paper自定义字体权重不生效问题排查求助

问题描述 #

我正在为React Native Paper主题安装自定义字体，实现后组件能识别fontFamily，但fontWeight无法生效，除非在StyleSheet中手动指定fontFamily。相关代码如下：

import React from 'react';
import Toast, { BaseToast } from 'react-native-toast-message';
import { McIcon } from '@repo/mobile-ui';
import { Provider as PaperProvider, configureFonts } from 'react-native-paper';

import { Text } from 'react-native';
import { ThemeStatus, srgb } from '@repo/shared/utils';
import { DefaultTheme } from 'react-native-paper';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import AppNavigationShell from '../navigation/AppNavgationShell';
import { useFonts } from 'expo-font';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    
  },
};


export const App = () => {
  const [fontsLoaded] = useFonts({
    nsr: require('../../assets/fonts/NunitoSans_10pt-Regular.ttf'),
    nsrBold: require('../../assets/fonts/NunitoSans_10pt-Bold.ttf'),
    nsrItalic: require('../../assets/fonts/NunitoSans_10pt-Italic.ttf'),
    nsrBoldItalic: require('../../assets/fonts/NunitoSans_10pt-BoldItalic.ttf'),
  });

  const baseFont = {
    fontFamily: 'nsr',
  } as const;

  const baseVariants = configureFonts({ config: baseFont });
  const customVariants = {
    displayMedium: {
      ...baseVariants.displayMedium,
      fontFamily: 'nsr',
      fontWeight: 'normal',
    },

    bold: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBold',
      fontWeight: 'bold',
    },
    italic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrItalic',
      fontWeight: 'normal',
    },
    boldItalic: {
      ...baseVariants.bodyMedium,
      fontFamily: 'nsrBoldItalic',
      fontWeight: 'bold',
    },
  } as const;

  const mergedFonts = configureFonts({
    config: {
      ...baseVariants,
      ...customVariants,
    },
  });

  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }
  return (
    <PaperProvider theme={{ ...theme, fonts: mergedFonts }}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <AppNavigationShell />
        <Toast config={toastConfig} />
      </GestureHandlerRootView>
    </PaperProvider>
  );
};

export default App;

问题原因 #

1. 重复调用configureFonts导致配置合并异常，无法正确覆盖默认字体变体的权重映射
2. 独立字体文件（如粗体、斜体）无法通过fontWeight属性自动关联，必须显式指定对应的fontFamily才能加载目标字体文件

修复方案 #

步骤1：简化字体配置逻辑 #

直接构建完整的字体变体配置，为每个需要的变体显式指定对应的fontFamily，避免依赖fontWeight关联独立字体文件。

步骤2：修改后的代码 #

import React from 'react';
import Toast, { BaseToast } from 'react-native-toast-message';
import { McIcon } from '@repo/mobile-ui';
import { Provider as PaperProvider, configureFonts } from 'react-native-paper';

import { Text } from 'react-native';
import { ThemeStatus, srgb } from '@repo/shared/utils';
import { DefaultTheme } from 'react-native-paper';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import AppNavigationShell from '../navigation/AppNavgationShell';
import { useFonts } from 'expo-font';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
  },
};

export const App = () => {
  const [fontsLoaded] = useFonts({
    nsr: require('../../assets/fonts/NunitoSans_10pt-Regular.ttf'),
    nsrBold: require('../../assets/fonts/NunitoSans_10pt-Bold.ttf'),
    nsrItalic: require('../../assets/fonts/NunitoSans_10pt-Italic.ttf'),
    nsrBoldItalic: require('../../assets/fonts/NunitoSans_10pt-BoldItalic.ttf'),
  });

  // 直接构建完整的字体变体配置，每个变体绑定对应字体文件
  const customFonts = configureFonts({
    config: {
      // 基础文本变体
      displayMedium: {
        fontFamily: 'nsr',
        fontSize: 40,
        fontWeight: 'normal',
        lineHeight: 48,
      },
      bodyMedium: {
        fontFamily: 'nsr',
        fontSize: 14,
        fontWeight: 'normal',
        lineHeight: 20,
      },
      // 加粗文本变体
      bodyBold: {
        fontFamily: 'nsrBold',
        fontSize: 14,
        fontWeight: 'bold',
        lineHeight: 20,
      },
      // 斜体文本变体
      bodyItalic: {
        fontFamily: 'nsrItalic',
        fontSize: 14,
        fontWeight: 'normal',
        lineHeight: 20,
      },
      // 加粗斜体文本变体
      bodyBoldItalic: {
        fontFamily: 'nsrBoldItalic',
        fontSize: 14,
        fontWeight: 'bold',
        lineHeight: 20,
      },
      // 标题类变体示例
      titleLarge: {
        fontFamily: 'nsrBold',
        fontSize: 22,
        fontWeight: 'bold',
        lineHeight: 28,
      },
    },
  });

  if (!fontsLoaded) {
    return <Text>Loading...</Text>;
  }

  return (
    <PaperProvider theme={{ ...theme, fonts: customFonts }}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <AppNavigationShell />
        <Toast config={toastConfig} />
      </GestureHandlerRootView>
    </PaperProvider>
  );
};

export default App;

使用说明 #

在组件中直接通过variant属性调用自定义字体变体即可：

<Text variant="bodyBold">这是加粗文本</Text>
<Text variant="bodyItalic">这是斜体文本</Text>

内容的提问来源于stack exchange，提问作者Ranjan Kumar