文档模板：v0.4.2

react-native-text-size

本项目基于 react-native-text-size 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-text-size（JS 别名 react-native-text-size），版本所属关系如下：

简介

react-native-text-size 提供在文本布局渲染前精确测量其尺寸（宽度、高度、行数、行信息等）的能力，从而避免二次渲染、提升长列表与自适应布局的性能。

本库为其提供 React Native 鸿蒙（HarmonyOS）适配，基于 TurboModule 实现，支持 measure、flatHeights、fontFromSpecs、specsForTextStyles、fontFamilyNames、fontNamesForFamilyName 等接口。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-text-size

yarn

yarn add @react-native-ohos/react-native-text-size

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.72.142"
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-text-size": "file:../../node_modules/@react-native-ohos/react-native-text-size/harmony/text_size.har"
  }

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-text-size/src/main/cpp" ./text_size)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_text_size)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
+ #include "RNTextSizePackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
+     std::make_shared<RNTextSizePackage>(ctx)
    };
}

  ...
+ import { RNTextSizePackage } from '@react-native-ohos/react-native-text-size/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
+   new RNTextSizePackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

本文档内容基于以下版本验证通过：

1. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;

权限要求

无特殊权限要求。

编译运行API要求

使用示例

下面的代码展示了这个库的基本使用场景：

import React, { useState, useEffect } from 'react';
import { ScrollView, Text, View, Dimensions, TextInput } from 'react-native';
import RTNTextSize, { TSFontSpecs } from 'react-native-text-size';

export default function TextSizeExample() {
  const [width, setWidth] = useState<number>();
  const [height, setHeight] = useState<number>();
  const [text, setText] = useState('I ❤️ react-native-text-size');

  const fontSpecs: TSFontSpecs = { fontSize: 20, fontStyle: 'normal', fontWeight: '700' };

  useEffect(() => {
    (async () => {
      // 测量单段文本的宽高
      const w = Dimensions.get('window').width * 0.8;
      const res = await RTNTextSize.measure({ text, width: w, ...fontSpecs });
      setWidth(res.width);
      setHeight(res.height);
    })();
  }, []);

  return (
    <ScrollView style={{ flexGrow: 1 }}>
      <View style={{ padding: 12 }}>
        <Text>measure 测量文本宽高：</Text>
        <Text style={{ width, height, ...fontSpecs }}>{text}</Text>
        <TextInput
          value={text}
          onChangeText={setText}
          style={{ height: 40, borderWidth: 1, borderColor: '#ccc' }}
        />
      </View>
    </ScrollView>
  );
}

使用说明

measure - 测量单段文本宽高

import RTNTextSize from 'react-native-text-size';

const result = await RTNTextSize.measure({
  text: '要测量的文本，可含 emoji ❤️',
  width: 200,           // 限制最大宽度，默认不限
  fontSize: 16,
  fontWeight: '400',
});
// result: { width, height, lineCount, ... }

flatHeights - 批量测量多段文本高度

const heights = await RTNTextSize.flatHeights({
  text: ['第一段', '第二段', '第三段'],
  width: Dimensions.get('window').width * 0.8,
  fontSize: 14,
});
// heights: number[]，与 text 数组一一对应

字体查询

const info    = await RTNTextSize.fontFromSpecs({ fontFamily: 'HarmonyOS Sans SC', fontSize: 20 });
const styles  = await RTNTextSize.specsForTextStyles();  // 系统默认文本样式的字体信息
const families = await RTNTextSize.fontFamilyNames();     // 系统字体族列表
const names    = await RTNTextSize.fontNamesForFamilyName('HarmonyOS Sans SC');

接口说明

遗留问题

• fontFamilyNames&fontNamesForFamilyName 问题：需要依赖手机文件 font 目录下的 json 文件，该文件目前没有预置在手机目录下，会导致该接口调用为空。后续底层框架侧修复该问题 issue#1
• measure方法缺少lineInfo的返回处理 issue#8

其他

1. specsForTextStyles函数返回值中subheadline属性名称，harmony 端与 ios端表现不一致，harmony端字段名称为subhead。

目录结构

/rntpc_react-native-text-size   # 项目根目录
├── harmony                          # 鸿蒙适配代码
│    └─ text_size.har                    # har 包
│    └─ text_size                        # 鸿蒙适配核心代码
│          └─ Index.ets                  # 鸿蒙适配代码入口
│          └─ ts.ets                     # ArkTS 侧类型导出入口
│          └─ src/main
│              └─ ets
│                  └─ RNTextSizePackage.ets       # 鸿蒙侧 Package（TurboModule 注册枢纽）
│                  └─ RNTextSizeTurboModule.ts    # TurboModule 实现
│                  └─ Config.ts / Logger.ets      # 配置与日志
│                  └─ generated/                  # codegen 生成的 ArkTS 代码
│              └─ cpp
│                  └─ CMakeLists.txt             # C++ 侧构建配置（目标 rnoh_text_size）
│                  └─ RNTextSizePackage.h        # C++ Package
│                  └─ RNTextSizeTurboModule.cpp/.h  # TurboModule C++ 桥接
│                  └─ generated/                 # codegen 生成的 C++ 代码
├── src                              # RN 代码
│    └─ index.ts                        # 入口文件
│    └─ NativeTextSize.tsx              # TurboModule Spec 定义（codegen 输入）
├── lib                              # 构建产物（commonjs / module / typescript）
├── example                          # 示例工程
├── README.md                        # 中文文档
├── README_en.md                     # 英文文档

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The BSD 2-Clause License（BSD） ，请自由地享受和参与开源。