React Native 0.69+ 自定义字体

639 阅读1分钟

1,确定字体的fontFamily

下载完字体文件后,右键打开该文件,选择使用Mac自带的软件-字体册
image.png

安装-点击信息,查看PostScript名称,这就是fontFamily的值 image.png

2,文件放到项目中,修改字体名称

image.png

3,定义assets目录

在项目根目录下的 react-native.config.js 文件

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./assets/fonts/"],  //添加这一行
};

4,链接assets

由于自动链接,link和unlink命令在React Native 0.69中被删除了。 如果你的React Native Version ≥0.69:
npx react-native-asset image.png

5,使用

text: {
    fontSize: 20,
    fontFamily: "FZFSJW--GB1-0"
 },

image.png

网上的文章基本上都停留在3年前的技术解决方案,在国内要解决RN的技术问题,只能翻去谷歌搜。如果这篇文章没有解决你的问题,可以参照这篇原文 Ultimate guide to use custom fonts in react native