React Native中Android端如何使用单文件自定义字体？

问题场景 #

你在React Native项目中引入了单TTF文件的字体合集（包含Bold、Thin、SemiBold等变体），iOS端通过指定各变体的PostScript名称即可正常使用所有样式，但Android端仅能调用默认Regular样式，直接用PostScript名称无效。

解决方案 #

1. 整理字体变体对应字重 #

先通过FontBook或字体查看工具，确认每个变体对应的标准字重值：

• Thin → 100
• Light → 300
• Regular → 400
• SemiBold → 600
• Bold → 700
• 其他变体对应各自标准字重

2. 配置Android字体族文件 #

在Android项目的android/app/src/main/res/font目录（无则新建）中，创建与字体名匹配的XML配置文件（例如font_family_name.xml），内容如下：

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 对应Thin变体 -->
    <font
        android:fontStyle="normal"
        android:fontWeight="100"
        android:font="@font/FontFamilyName" />
    <!-- 对应Regular变体 -->
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        android:font="@font/FontFamilyName" />
    <!-- 对应SemiBold变体 -->
    <font
        android:fontStyle="normal"
        android:fontWeight="600"
        android:font="@font/FontFamilyName" />
    <!-- 对应Bold变体 -->
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        android:font="@font/FontFamilyName" />
</font-family>

• android:font值为你的TTF文件名（不带.ttf后缀）
• 根据你的字体实际变体，补充/调整对应的font标签

3. React Native代码跨平台调用 #

通过Platform模块区分iOS和Android的调用逻辑，统一使用字重控制样式：

import { Text, Platform } from 'react-native';

// 封装字体获取函数
const getFontConfig = (weight) => {
  if (Platform.OS === 'ios') {
    // iOS直接用PostScript名称
    const iosFontMap = {
      100: 'FontFamilyName-Thin',
      400: 'FontFamilyName-Regular',
      600: 'FontFamilyName-SemiBold',
      700: 'FontFamilyName-Bold',
    };
    return {
      fontFamily: iosFontMap[weight] || iosFontMap[400],
      fontWeight: 'normal', // iOS禁用系统字重覆盖
    };
  } else {
    // Android用配置的字体族名称+字重
    return {
      fontFamily: 'font_family_name', // 对应XML文件名
      fontWeight: weight.toString(),
    };
  }
};

// 使用示例
<Text style={getFontConfig(100)}>Thin样式文本</Text>
<Text style={getFontConfig(400)}>Regular样式文本</Text>
<Text style={getFontConfig(600)}>SemiBold样式文本</Text>
<Text style={getFontConfig(700)}>Bold样式文本</Text>

4. 验证与注意事项 #

• Android端需确保TTF文件已正确放置在android/app/src/main/assets/fonts目录（或通过react-native-asset等工具同步）
• 清理Android项目缓存后重新编译，避免旧配置干扰
• 若字体包含斜体变体，需在XML配置中添加android:fontStyle="italic"的对应标签

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