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

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'
  },
];
1.
2.
3.
4.
5.
6.

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
  });
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

RNApp({
  rnInstanceConfig: {
    createRNPackages,
    enableNDKTextMeasuring: true,
    enableBackgroundExecutor: true,
    enableCAPIArchitecture: true,
    arkTsComponentNames: arkTsComponentNames,
    fontOptions: fonts
  },
})
...
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

4.在RN侧指定fontFamily

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

<Text style={{ fontFamily: "SFMono" }}>
Hello World
</Text>
1.
2.
3.

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