HarmonyOS RN 项目中使用自定义字体

HarmonyOS
22h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

ArkUI 中使用自定义字体通过字体注册的方式,但是在页面中注册完字体后,会发现在RN代码中使用 fontFamily 设置字体并不能生效。RNOH提供了专门的注册字体入口,需要开发者针对RN另外进行字体注册。

1.添加字体文件

RN字体文件的存放位置和图片一样,都是在resources/rawfile/assets目录下,为了便于区分,建议在assets下新建一个fonts文件夹,目录如下图所示

2.创建字体配置

上一步中,项目里添加了一个SFMono-Bold.ttf 的字体文件,接下来创建一个font.fontOptions[] 存放该字体的信息:

const fonts: font.FontOptions[] = [
  {
    familyName: 'SFMono',
    familySrc: '/fonts/SFMono-Bold.ttf'
  },
];

3.注册字体

RNOH在RNInstance的构建参数中提供了fontOptions用于开发者配置自定义字体信息:

this.rnInstance = await rnohCoreContext.createAndRegisterRNInstance({
    createRNPackages: createRNPackages,
    enableNDKTextMeasuring: true,
    enableBackgroundExecutor: true,
    enableCAPIArchitecture: ENABLE_CAPI_ARCHITECTURE,
    enableDebugger: true,
    arkTsComponentNames: arkTsComponentNames,
    fontOptions: fonts
  });

如果使用的是RNApp,请在rnInstanceConfig中配置该参数:

RNApp({
  rnInstanceConfig: {
    createRNPackages,
    enableNDKTextMeasuring: true,
    enableBackgroundExecutor: true,
    enableCAPIArchitecture: true,
    arkTsComponentNames: arkTsComponentNames,
    fontOptions: fonts
  },
})
...

4.在RN侧指定fontFamily

使用fontFamily指定Text的自定义字体:

<Text style={{ fontFamily: "SFMono" }}>
Hello World
</Text>

最后就可以运行项目加载RN bundle查看自定义字体是否生效了。

分享
微博
QQ
微信
回复
19h前
相关问题
HarmonyOS 使用自定义字体
413浏览 • 1回复 待解决
HarmonyOS 能否默认使用自定义字体
15浏览 • 1回复 待解决
ArkUI中如何使用自定义字体
1038浏览 • 2回复 待解决
如何使用和加载自定义字体
2403浏览 • 1回复 待解决
HarmonyOS 自定义字体绘制
196浏览 • 1回复 待解决
HarmonyOS 全局自定义字体
229浏览 • 1回复 待解决
HarmonyOS 全局自定义字体
220浏览 • 1回复 待解决
如何在C++项目中使用pthread
2306浏览 • 1回复 待解决
Ark UI是否如何使用自定义字体
3351浏览 • 1回复 待解决
HarmonyOS 如何设置自定义字体
997浏览 • 1回复 待解决
自定义组件中使用@ObjectLink报错
1508浏览 • 1回复 待解决
getContext(this)能否在自定义中使用
2427浏览 • 1回复 待解决
hvigor自定义任务中使用npm包
839浏览 • 1回复 待解决
如何自定义字体替换系统字体
554浏览 • 1回复 待解决
HarmonyOS 全局设置自定义字体的方法
154浏览 • 1回复 待解决