模板版本：v0.1.3

`react-native-text-size`

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：<@react-native-oh-tpl/react-native-text-size> Releases，并下载适用版本的 tgz 包。

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

[!TIP] # 处替换为 tgz 包的路径

npm

npm install @react-native-oh-tpl/react-native-text-size@file:#

yarn

yarn add @react-native-oh-tpl/react-native-text-size@file:#

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

[!WARNING] 使用时 import 的库名不变。

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

import RTNTextSize, { TSFontSpecs, TSFontInfo } from 'react-native-text-size'

export function TextSizeExample() {
  const [res, setRes] = useState<string[]>([])
  const [res2, setRes2] = useState<string[]>([])
  const fontFamily = 'HarmonyOS Sans SC'
  const [texts, setTexts] = useState<string>('I rnTextSize ❤️')
  const [texts3, setTexts3] = useState<string>('')
  const [width, setWidth] = useState<number>();
  const [height, setHeight] = useState<number>();
  const fontSpecs: TSFontSpecs = {
    fontFamily: undefined,
    fontSize: 20,
    fontStyle: 'normal',
    fontWeight: '700',
  }
  type State = { heights2: number[] }
  const [texts2, setTexts2] = useState(['I ❤️ rnTextSize', 'I ❤️ rnTextSize using flatHeights', 'Thx for flatHeights', 'test123',])
  const [heights2, setHeights2] = useState<number[]>([]);
  const fontSpecs2: TSFontSpecs = {
    fontFamily: undefined,
    fontSize: 20,
    fontStyle: 'italic',
    fontWeight: 'bold',
  }
  const [key, setKey] = useState({})
  const [info, setInfo] = useState<TSFontInfo>()
  const fontSpecs3: TSFontSpecs = {
    fontFamily: 'harmony',
    textBreakStrategy: 'balanced',
  }

  useEffect(() => {
    const myFun = async () => {
      const resp = await RTNTextSize.fontFamilyNames();
      setRes(resp)

      const resp2 = await RTNTextSize.fontNamesForFamilyName(fontFamily);
      setRes2(resp2)

      setTexts(texts)
      const width = Dimensions.get('window').width * 0.8
      const newHeights = await RTNTextSize.measure({
        text: texts,      // array of texts to measure, can include symbols
        width: width,            // max-width of the "virtual" container
        ...fontSpecs,     // RN font specification
      })
      setHeight(newHeights.height);
      setWidth(newHeights.width)

      setTexts2(texts2)
      const width2 = Dimensions.get('window').width * 0.8
      const newHeights2 = await RTNTextSize.flatHeights({
        text: texts2,      // array of texts to measure, can include symbols
        width: width2,            // max-width of the "virtual" container
        ...fontSpecs2,     // RN font specification
      })
      setHeights2(newHeights2);

      const keyp = await RTNTextSize.specsForTextStyles();
      setKey(keyp)

      const infos = await RTNTextSize.fontFromSpecs(fontSpecs3);
      setInfo(infos)
    }
    myFun()
  }, [])

  return (
    <ScrollView style={{ flexGrow: 1 }}>
      <View style={{ paddingLeft: 12, paddingRight: 12 }}>
        <Text>
         measure:[fontFamily: undefined,fontSize: 20,fontStyle: 'normal', 正斜fontWeight: '700']
        </Text>
        <Text style={{
          width: width,
          height: height,
          ...fontSpecs
        }}>
          {texts}
        </Text>
        <TextInput
          value={texts}
          onChangeText={value => { setTexts(value) }}
          style={{ width: '100%', height: 28, borderWidth: 2, borderColor: 'black' }}
        />

        <Text>
          flatHeights:[fontFamily: undefined,fontSize: 20,fontStyle: 'italic', fontWeight: 'bold']
        </Text>
        {texts2.map(
          (texts2, index) => (
            <Text style={{ height: heights2[index], ...fontSpecs2 }}>
              {texts2}
            </Text>
          )
        )}
        <TextInput
          value = {texts3}
          onChangeText={value => {
            let value2 =value.split(",");
            setTexts3(value)
            setTexts2(value2)
          }}
          style={{ width: '100%', height: 28, borderWidth: 2, borderColor: 'black' }}
        />
        <Text>
          specsForTextStyles:获取系统默认配置的字体的具体信息
        </Text>
        <Text>
          {JSON.stringify(key)}
        </Text>
        <Text>
          fontFamilyNames:获取系统默认配置的字体
        </Text>
        <Text>
          {res}
        </Text>
        <Text>
          fontNamesForFamilyName:获取系统字体的属性
        </Text>
        <Text>
          {res2}
        </Text>
        <Text>
          fontFromSpecs:返回从给定规范中获得的字体特征
        </Text>
        <Text>
          {JSON.stringify(info)}
        </Text>
      </View>
    </ScrollView>
  )
}

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "rnoh-text-size": "file:../../node_modules/@react-native-oh-tpl/react-native-text-size/harmony/text_size.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

配置 CMakeLists 和引入 RNTextSizePackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")

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

# RNOH_BEGIN: add_package_subdirectories
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULE_DIR}/rnoh-text-size/src/main/cpp" ./text-size)
# RNOH_END: add_package_subdirectories

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

target_link_libraries(rnoh_app PUBLIC rnoh)

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

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

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

using namespace rnoh;

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

在 ArkTs 侧引入 RNTextSizePackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

...
+ import { RNTextSizePackage } from 'rnoh-text-size/ts';

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

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

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

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：<@react-native-oh-tpl/react-native-text-size> Releases

属性

[!tip] "Platform"列表示该属性在原三方库上支持的平台。

[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

详情请见react-native-text-size

TSMeasureParams

Plain JS object with this properties (only text is required):

Name	Description	Type	Required	Platform	HarmonyOS Support
text	System Name	string[]	Yes	IOS/Android	yes
width	Width	number	No	IOS/Android	yes
fontFamily	System Default font	string	No	IOS/Android	yes
fontWeight	Font Weight	string	No	IOS/Android	yes
fontSize	Font Size	number	No	IOS/Android	yes
fontStyle	Font Style	string	No	IOS/Android	yes
fontVariant	Default is none	array	No	IOS	yes
allowFontScaling	Allow Font Scaling	boolean	No	IOS/Android	yes
letterSpacing	Extra space between characters	number	No	IOS	yes
includeFontPadding	Dfault is true	boolean	No	Android	yes
textBreakStrategy	Dfault is highQuality	string	No	Android	yes
usePreciseWidth	Result will include an exact width.Dfault is false	boolean	No	IOS/Android	yes
lineInfoForLine	Result will include a lineInfo.Dfault is none	number	No	IOS/Android	yes

TSFontSpecs

This parameter is a subset of TSMeasureParams, so the details are omitted here.

Name	Description	Type	Required	Platform	HarmonyOS Support
fontFamily	System Name	string	No	IOS/Android	yes
fontWeight	Font Weight	number	No	IOS/Android	yes
fontSize	Font Size	TSFontStyle	No	IOS/Android	yes
fontStyle	Font Style	TSFontWeight	No	IOS/Android	yes
fontVariant	Font Variant	TSFontVariant[]或 null	No	IOS/Android	yes
letterSpacing	Font spacing	number	No	IOS/Android	yes

TSHeightsParams

This is an object similar to the one you pass to measure, but the text option is an array of strings and the usePreciseWidth and lineInfoForLine options are ignored.

Name	Description	Type	Required	Platform	HarmonyOS Support
text	System Name	string[]	Yes	IOS/Android	yes
width	Width	number	No	IOS/Android	yes
fontFamily	System Default font	string	No	IOS/Android	yes
fontWeight	Font Weight	string	No	IOS/Android	yes
fontSize	Font Size	number	No	IOS/Android	yes
fontStyle	Font Style	string	No	IOS/Android	yes
fontVariant	Default is none	array	No	IOS	yes
allowFontScaling	Allow Font Scaling	boolean	No	IOS/Android	yes
letterSpacing	Extra space between characters	number	No	IOS	yes
includeFontPadding	Dfault is true	boolean	No	Android	yes
textBreakStrategy	Dfault is highQuality	string	No	Android	yes

API

[!tip] "Platform"列表示该属性在原三方库上支持的平台。

[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name	Description	Type	Required	Platform	HarmonyOS Support
measure	Measurement Text	TSMeasureResult	No	All	yes
flatHeights	Measurement Text	number[]	No	All	yes
specsForTextStyles	Get system font information for the running OS	{[key: string]: TSFontForStyle}	No	All	yes
fontFromSpecs	Returns the characteristics of the font obtained from the given specifications.	TSFontInfo	No	All	yes
fontFamilyNames	Returns a Promise for an array of font family names available on the system	string[]	No	All	yes
fontNamesForFamilyName	Return the data of the corresponding font according to the name	string[]	No	All	yes

遗留问题

fontFamilyNames&fontNamesForFamilyName 问题:需要依赖手机文件 font 目录下的 json 文件，该文件目前没有预置在手机目录下，会导致该接口调用为空。后续底层框架侧修复该问题 issue#1

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-native-text-size.md

react-native-text-size.md

`react-native-text-size`

安装与使用

npm

yarn

Link

引入原生端代码

配置 CMakeLists 和引入 RNTextSizePackage

在 ArkTs 侧引入 RNTextSizePackage

运行

约束与限制

兼容性

属性

API

遗留问题

其他

开源协议

Files

react-native-text-size.md

Latest commit

History

react-native-text-size.md

File metadata and controls

react-native-text-size

安装与使用

npm

yarn

Link

引入原生端代码

配置 CMakeLists 和引入 RNTextSizePackage

在 ArkTs 侧引入 RNTextSizePackage

运行

约束与限制

兼容性

属性

API

遗留问题

其他

开源协议

`react-native-text-size`