React Native v0.69.1与React v18.0.0中如何添加自定义字体

0.69版本移除原有react-native link命令后，自定义字体通过官方自动 linking 工具链完成资源关联，配置后不生效按以下步骤逐一排查即可：

1. 先确认基础配置正确性 #

• 确认react-native.config.js放在项目根目录（与android、ios文件夹同级），你当前写的assets: ['./src/assets/fonts/']路径是符合你目录结构的，只要确认该路径下确实存放了所有未损坏的.ttf字体文件即可。

2. 执行新版资源链接命令 #

旧link命令废弃后，资源链接需要单独执行react-native-asset命令完成：

# 首次使用如果本地没有该依赖，先安装
npm i react-native-asset -D

# 执行字体资源链接
npx react-native-asset

执行完成后可以手动校验平台侧是否链接成功：

• Android：打开android/app/src/main/assets/fonts目录，能看到你导入的所有ttf文件即为链接成功
• iOS：用Xcode打开ios/项目名.xcworkspace，检查Resources分组下是否包含所有字体文件，同时查看Info.plist中Fonts provided by application数组下是否列出了所有导入的字体文件名

3. 修正fontFamily参数（最常见的失效原因） #

注意：fontFamily属性需要填的是字体文件内置的PostScript名称，不是你自定义的文件名
你代码里写的Splash-Regular是文件名，大概率和字体实际内置名称不匹配：

• Mac系统：双击打开ttf字体文件，弹窗顶部标题栏显示的名称就是需要填入的准确值
• Windows系统：右键字体文件选择「预览」，窗口标题显示的名称即为准确值

举个常见例子：文件名为Splash-Regular.ttf的字体，内置名称可能只有Splash，这时候你写fontFamily: 'Splash-Regular'就完全不生效，必须填实际查到的内置名称。多字重字体同理，每个字重的内置名称要单独核对，不要靠文件名猜。

4. 清理缓存重新编译 #

资源链接和配置修改完成后，必须清理旧的构建缓存重新打包，否则旧缓存会导致配置不生效：

# 清理Metro打包缓存
npx react-native start --reset-cache

# Android端：先卸载设备上的旧安装包，再重新编译
adb uninstall 你的应用包名
npx react-native run-android

# iOS端：删除旧构建产物再重新编译
cd ios && rm -rf build && cd ..
npx react-native run-ios

额外注意事项 #

• 如果你没有引入对应字重/样式的字体文件，不要给Text组件加fontWeight、fontStyle属性：iOS会自动渲染伪粗体、伪斜体，Android会直接回退到系统默认字体。
• 如果你用的是Expo托管工作流，不要用上述react-native-asset方案，直接使用expo-font模块加载字体即可，上述方案仅适用于React Native裸工作流项目。

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