React Native StyleSheet.create字体失效，是否必须使用expo-font？

问题说明 #

在React Native中使用StyleSheet.create配置fontFamily时字体不生效，是否必须使用expo-font？另外，不想在每个元素中手动指定字体名。

相关配置代码 #

react-native.config.js

module.exports = {
  "assets": ["./assets/fonts/"],
}

src/constants/fonts.ts

export const fonts = {
  QUICKSAND: {
    REGULAR: 'QuicksandRegular',
    BOLD: 'QuicksandBold',
    LIGHT: 'QuicksandLight',
    MEDIUM: 'QuicksandMedium',
  },
  SOUR_GUMMY: {
    REGULAR: 'SourGummyRegular',
    BOLD: 'SourGummyBold',
    LIGHT: 'SourGummyLight',
    MEDIUM: 'SourGummyMedium',
  },
}

GreetingPage.ts

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import colors from "../constants/colors";
import { flexbox } from "../constants/mixins";
import { fonts } from "../constants/fonts";

const GreetingPage = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to App</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.primary,
    width: "100%",
    ...flexbox("center", "center"),
  },
  text: {
    fontSize: 24,
    color: colors.white,
    fontFamily: fonts.SOUR_GUMMY.BOLD,
  },
});

export default GreetingPage;

字体文件目录

解答 #

1. 是否必须使用expo-font？ #

• Expo 项目：是，Expo环境下官方推荐用expo-font加载字体，react-native.config.js的配置方式对Expo项目不生效。
• 纯React Native项目（非Expo）：不需要，只需配置react-native.config.js后，执行npx react-native link（RN 0.60+版本支持自动link，但手动执行更稳妥），即可让系统识别字体。

2. 字体不生效的常见原因 #

• 字体名称错误：你在fonts.ts中定义的名称（如SourGummyBold）可能和字体文件实际的PostScript名称不一致。查看方式：
  • Mac：打开字体文件，查看窗口顶部的名称；
  • Windows：右键字体文件→属性→详细信息→标题；
    必须使用这个真实名称作为fontFamily的值，否则系统无法识别。
• 配置未生效：确认react-native.config.js路径正确，./assets/fonts/文件夹存在且包含字体文件；纯RN项目需执行link命令后重启项目。
• Expo项目未用expo-font加载：Expo不支持react-native.config.js的字体配置，必须通过expo-font的useFonts或loadAsync方法加载字体。

3. 全局设置字体，避免逐个元素指定 #

方法一：自定义全局Text组件

创建CustomText.tsx组件，默认应用字体样式，后续用该组件替代原生Text：

import { Text, TextProps, StyleSheet } from 'react-native';
import React from 'react';
import { fonts } from '../constants/fonts';

const CustomText = ({ style, ...props }: TextProps) => {
  return (
    <Text style={[styles.defaultText, style]} {...props} />
  );
};

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: fonts.SOUR_GUMMY.REGULAR, // 设置默认字体
  },
});

export default CustomText;

使用示例：

import CustomText from './CustomText';

// ...
<CustomText style={styles.text}>Welcome to App</CustomText>

方法二：通过UI库主题全局配置（如React Native Paper）

如果使用UI组件库，可修改主题默认字体：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { fonts } from './constants/fonts';

const theme = {
  ...DefaultTheme,
  fonts: {
    ...DefaultTheme.fonts,
    regular: { fontFamily: fonts.SOUR_GUMMY.REGULAR },
    bold: { fontFamily: fonts.SOUR_GUMMY.BOLD },
    // 按需配置其他字体样式
  },
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      {/* 应用内容 */}
    </PaperProvider>
  );
}

方法三：覆盖原生Text默认样式（不推荐）

直接修改Text组件的默认样式，兼容性较差，不建议大型项目使用：

import { Text } from 'react-native';
import { fonts } from './constants/fonts';

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.style = [
  Text.defaultProps.style,
  { fontFamily: fonts.SOUR_GUMMY.REGULAR },
];

内容的提问来源于stack exchange，提问作者Mahmut Serdar İset