React Native Paper主题内fontFamily配置不生效问题

问题分析 #

你遇到的情况是因为React Native Paper v5的MD3主题体系中，Text组件的variant对应的样式（比如displayLarge）是从全局主题的fonts配置和typescale映射而来的。直接在组件的theme属性里修改typescale.displayLarge.fontFamily，会被组件内部基于全局字体配置生成的样式覆盖，所以不生效。而style={theme.fonts.thin}是直接把自定义的字体样式应用到组件，优先级更高，所以能正常显示。

解决方案 #

方案1：全局主题中配置对应variant的字体 #

在全局主题里直接修改typescale，把displayLarge的字体和你自定义的thin字体关联起来，这样所有用variant="displayLarge"的Text都会自动使用该字体：

import { StyleSheet, View } from 'react-native';
import {
  configureFonts,
  Provider as PaperProvider,
  MD3LightTheme as DefaultTheme,
  Text,
} from 'react-native-paper';

const fontConfig = {
  ios: {
    thin: {
      fontFamily: 'HelveticaNeue-Thin',
      fontSize: 30,
    },
  },
};

const customFonts = configureFonts(fontConfig);
const theme = {
  ...DefaultTheme,
  fonts: customFonts,
  // 修改全局typescale，关联自定义字体
  typescale: {
    ...DefaultTheme.typescale,
    displayLarge: {
      ...DefaultTheme.typescale.displayLarge,
      fontFamily: customFonts.thin.fontFamily,
      fontSize: 30,
    },
  },
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <View style={styles.container}>
        <Text style={theme.fonts.thin}>
          ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
        </Text>

        {/* 现在这个会正常显示HelveticaNeue-Thin字体 */}
        <Text variant="displayLarge">
          ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
        </Text>
      </View>
    </PaperProvider>
  );
}

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

方案2：组件级直接用style覆盖字体 #

如果只是单个组件需要修改，直接在style属性里覆盖fontFamily，结合variant使用：

<Text
  variant="displayLarge"
  style={{ fontFamily: 'HelveticaNeue-Thin', fontSize: 30 }}
>
  ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
</Text>

方案3：组件级自定义theme的正确姿势 #

如果一定要用组件的theme属性，需要通过修改fonts配置来传递，而不是直接修改typescale：

<Text
  variant="displayLarge"
  theme={{
    ...theme,
    fonts: {
      ...theme.fonts,
      displayLarge: {
        fontFamily: 'HelveticaNeue-Thin',
        fontSize: 30,
      },
    },
  }}
>
  ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 1234567890
</Text>

关键说明 #

React Native Paper v5的MD3主题设计中，Text的variant样式是基于theme.fonts中的对应配置生成的，直接修改typescale可能无法绕过内部的样式生成逻辑。优先通过全局fonts配置或者直接style覆盖是更可靠的方式。

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