React Native最新版link命令不可用 如何为项目链接自定义字体

React Native 0.69 及以上版本移除了react-native link命令，自定义字体按以下步骤配置即可：

前置准备 #

• 把所有需要用到的字体文件（支持.ttf、.otf格式）统一放到项目根目录新建的assets/fonts/路径下。注意字体文件名不要带空格、中文或者特殊符号，否则容易出现识别失败的问题，比如把Source Han Sans CN Bold.otf重命名为SourceHanSansCN-Bold.otf这类格式。
• 在项目根目录新建react-native.config.js配置文件，写入以下内容，声明静态资源路径：

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

资源关联 #

在项目根目录终端执行资源关联命令，替代原来的link操作：

npx react-native-asset

如果执行时提示命令不存在，先全局安装对应工具：npm i -g react-native-asset 或 yarn global add react-native-asset
执行完命令后，Android端的字体文件会被自动复制到android/app/src/main/assets/fonts/目录下，不需要额外手动操作。

iOS 端额外配置 #

iOS端执行完上述关联命令后，还需要补一步Xcode配置：

• 打开ios目录下的.xcworkspace文件启动Xcode
• 右键点击左侧项目导航栏的项目名称，选择Add Files to "你的项目名"选项
• 在弹出的文件选择窗口中，找到根目录下的assets/fonts文件夹，勾选Copy items if needed，添加目标选择你自己的App Target，确认添加
• 找到项目中的Info.plist文件，添加Fonts provided by application配置项（如果已有该项直接新增数组元素即可），把所有用到的字体完整文件名（带后缀）填入数组，示例配置：

<key>UIAppFonts</key>
<array>
  <string>SourceHanSansCN-Regular.otf</string>
  <string>SourceHanSansCN-Bold.otf</string>
</array>

• 回到终端进入ios目录执行pod install，重新安装iOS依赖即可。

配置验证 #

配置完成后先停掉之前运行的Metro服务，执行带缓存清理的启动命令避免旧缓存导致的识别问题：

npx react-native start --reset-cache

重新编译运行App后，就可以在样式中直接通过fontFamily属性调用自定义字体。注意fontFamily的取值是字体本身的PostScript名称，不是自定义的文件名：iOS端可以在字体册中打开对应字体查看完整名称，Android端取值一般和文件名一致。使用示例：

<Text style={{ fontFamily: 'SourceHanSansCN-Regular', fontSize: 16 }}>
  自定义字体测试
</Text>

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