HarmonyOS鸿蒙Next中RN如何添加自定义字体

HarmonyOS鸿蒙Next中RN如何添加自定义字体 一定一定要在ReactNative 5.0.0.715及其以后的版本，否则虽然函数存在，但无法生效

一、在模块rawfile文件下创建一个font文件夹，将自定义字体文件放入font文件中

图片

二、在LoadManager中注册

await rnohCoreContext.createAndRegisterRNInstance({
  fontResourceByFontFamily: FontManager.fontsFamily // 字体常量
});


export class FontManager {
  static fontsFamily: Record<string, Resource | string> = {
    'FZZCHJW': $rawfile('font/FZZCHJW.ttf'),
  }
}

三、使用

bigPrice: {
    color: '#FFE395',
    fontSize: 26 * config.ScreenScale,
    fontFamily: 'FZZCHJW',//使用字体
    marginRight: 2 * config.ScreenScale,
    marginTop: -2 * config.ScreenScale,
},

更多关于HarmonyOS鸿蒙Next中RN如何添加自定义字体的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，RN添加自定义字体步骤如下：

  1. 将字体文件（如.ttf）放入项目的resources/base/media目录。
  2. 在module.json5文件的resource字段中声明字体资源。
  3. 在RN代码中通过fontFamily样式属性引用字体名称。
  4. 使用ohpm安装可能需要的RN字体支持包。
    确保字体文件格式正确且已正确声明，即可在应用中使用。

更多关于HarmonyOS鸿蒙Next中RN如何添加自定义字体的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next的React Native开发中，添加自定义字体的方法基本正确，但需要注意一些关键细节：

  1. 版本要求：确实需要React Native 5.0.0.715及以上版本，这是正确的。

  2. 字体文件放置：

    • 字体文件应放置在rawfile/font/目录下
    • 支持常见的字体格式：.ttf、.otf等

  3. 注册方式优化：建议将字体注册代码放在更合适的位置，通常在LoadManager的onLoad方法中：

export class MyLoadManager implements LoadManager {
  async onLoad(context: RNOHEngineContext): Promise<void> {
    await context.createAndRegisterRNInstance({
      fontResourceByFontFamily: {
        'FZZCHJW': $rawfile('font/FZZCHJW.ttf'),
        // 可以添加更多字体
        'AnotherFont': $rawfile('font/AnotherFont.otf'),
      }
    });
  }
}

  1. 使用注意事项：

    • 字体名称区分大小写
    • 在样式中直接使用fontFamily: 'FZZCHJW'即可
    • 确保字体文件正确打包到应用中

  2. 调试建议：如果字体不生效，检查：

    • 字体文件路径是否正确
    • 字体名称是否拼写一致
    • 是否使用了支持的React Native版本

这种方法在HarmonyOS Next的RN开发中是标准做法，能够确保自定义字体正常加载和渲染。

回到顶部