React Native 0.69版本如何添加自定义字体？

通用前置操作 #

• 在项目根目录创建assets/fonts文件夹，将自定义字体文件（.ttf/.otf格式）放入其中，确保文件名无空格（比如用Roboto-Regular.ttf，避免Roboto Regular.ttf这类命名）。

Android 平台操作 #

1. 复制assets/fonts下的所有字体文件到android/app/src/main/assets/fonts目录（若fonts文件夹不存在，手动创建即可）。
2. 无需额外配置，React Native 0.69的自动链接会自动识别这些字体资源。
3. 在代码中直接通过字体文件名（不含后缀）指定fontFamily：

<Text style={{ fontFamily: 'Roboto-Regular', fontSize: 18 }}>这是自定义字体测试文本</Text>

iOS 平台操作 #

1. 打开Xcode，将assets/fonts下的字体文件拖拽到项目任意目录（比如Resources），勾选Copy items if needed，并确保目标项目已被选中。
2. 打开项目的Info.plist文件，添加Fonts provided by application数组，把每个字体文件的全名（含后缀）作为数组元素填入：

<key>UIAppFonts</key>
<array>
  <string>Roboto-Regular.ttf</string>
  <string>Roboto-Bold.ttf</string>
</array>

3. 执行npx pod-install命令完成依赖安装。
4. 注意：iOS部分字体的内部显示名可能与文件名不一致，可通过以下代码打印所有可用字体确认：

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

if (Platform.OS === 'ios') {
  const { UIFont } = NativeModules;
  UIFont.familyNames.forEach(family => {
    console.log('字体家族:', family);
    UIFont.fontNamesForFamilyName(family).forEach(font => {
      console.log('--- 字体名称:', font);
    });
  });
}

5. 确认正确名称后，在组件中使用：

<Text style={{ fontFamily: 'Roboto-Regular', fontSize: 18 }}>这是自定义字体测试文本</Text>

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