模板版本：v0.4.0

react-native-typography

本项目基于 react-native-typography 开发。

该第三方库支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-typography 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-typography	~ 1.5.0	Gitcode Releases	0.77.*/0.82.*	否	API12+	1.4.1	Npm Address
@react-native-ohos/react-native-typography	~ 1.4.2	Gitcode Releases	0.72.*	否	API12+	1.4.1	Npm Address
@react-native-oh-tpl/react-native-typography	<=1.4.1-0.0.1@deprecated	Github Releases(deprecated)	0.72.*	否	API12+	1.4.1	Npm Address

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

1. 安装与使用

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

npm

npm install @react-native-ohos/react-native-typography

yarn

yarn add @react-native-ohos/react-native-typography

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

import { View, Text } from "react-native";
import React from "react";
import { iOSUIKit, material, systemWeights } from "react-native-typography";

export function TypographyExample1() {
  return (
    <View style={{ backgroundColor: "white" }}>
      <Text style={iOSUIKit.largeTitleEmphasized}>Hello iOS UI Kit!</Text>
      <Text style={material.title}>Title</Text>
      <Text style={systemWeights.light}>Title</Text>
    </View>
  );
}

2. 约束与限制

2.1. 兼容性

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

1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
3. RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

3. 属性

Name	Description	Type	Required	Platform	HarmonyOS Support
material	包含Material Design 指南中定义的所有样式。定义大小、粗细和颜色。	object	no	All	yes
materialDense	material 的 Dense 脚本	object	no	All	yes
materialTall	material 的 Tall 脚本	object	no	All	yes
human	定义于Human Interface Guidelines。定义大小、粗细和颜色。	object	no	All	yes
humanDense	human 的 Dense 脚本	object	no	All	yes
humanTall	human 的 Tall 脚本	object	no	All	yes
iOSUIKit	提取自官方 Apple Sketch 文件这些是属于 iOS UIKit 类别的文本样式，用于构建 iOS 应用的 UI 组件。它们建立在 Human Interface 样式的基础上，自定义了一些属性，如粗细或字母间距。	object	no	iOS	yes
iOSUIKitDense	iOSUIKit 的 Dense 脚本	object	no	iOS	yes
iOSUIKitTall	iOSUIKit 的 Tall 脚本 scripts	object	no	iOS	yes
systemWeights	在 React Native 中，字体粗细有时由 fontFamily 和 fontWeight 成对组成，但并非总是如此！这取决于字体类型，有时仅由 fontFamily 定义。使用这些辅助工具，您无需担心这些不一致性。要将它们与集合样式（或您自己的样式）结合使用，只需展开它们即可，因为它们是普通对象。	object	no	All	yes
systemDenseWeights	systemWeights 的 Dense 脚本	object	no	All	yes
systemTallWeights	systemWeights 的 Tall 脚本	object	no	All	yes
sanFranciscoWeights	San Francisco 字体	object	no	iOS	yes
robotoWeights	这些字重仅适用于 Android，因为它们直接引用了原生 Roboto 字体。	object	no	Android	yes
webWeights	这些字重仅适用于网页，并渲染react-native-web的系统字体堆栈。	object	no	Web	yes
iOSColors	iOS颜色	object	no	iOS	yes
materialColors	Material 颜色	object	no	All	yes

4. 遗留问题

5. 其他

6. 开源协议

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