模板版本：v0.4.0

react-native-markdown-renderer

本项目基于 原库react-native-markdown-renderer 开发。

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

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-markdown-renderer	~3.3.0	Gitcode Releases	0.77.* / 0.82.*	否	API12+	3.2.8	Npm Address
@react-native-oh-tpl/react-native-markdown-renderer	~3.2.8	Github Releases	0.72.*	否	API12+	3.2.8	Npm Address

1. 安装与使用

npm

# 0.72
npm install @react-native-oh-tpl/react-native-markdown-renderer
# 0.77
npm install @react-native-ohos/react-native-markdown-renderer

yarn

# 0.72
yarn add @react-native-oh-tpl/react-native-markdown-renderer
# 0.77
yarn add @react-native-ohos/react-native-markdown-renderer

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

import react from "react";
import { PureComponent } from "react-native";
import Markdown from "react-native-markdown-renderer";

const copy = `# h1 Heading 8-)

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;

export default class Page extends PureComponent {
  static propTypes = {};
  static defaultProps = {};

  render() {
    return <Markdown>{copy}</Markdown>;
  }
}

2. Link

	是否支持autolink	RN框架版本
~3.3.0	No	0.77/0.82
~3.2.8	No	0.72

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

该库为JS库，无需原生配置，只需要安装直接使用即可。

3. 约束与限制

3.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.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1.260; ROM: 6.0.0.130 SP15;

4. Markdown 组件

默认导出 Markdown 组件

Markdown 组件核心功能就是支持 Markdowm 语法格式的渲染，语法格式为（说明:copy为符合 Markdown 语法的字符串）：<Markdown>{copy}</Markdown>。 说明：copy为组件支持的满足 Markdown 语法格式的字符串，具体支持的语法格式，详见：Syntax Support

5. 属性

Markdown 组件的 Props

Name	Description	Type	Required	Platform	HarmonyOS Support
style	覆盖原始 Markdown 组件内置样式的属性	object	no	iOS/Android	yes
rules	Markdown 组件中标记语法标签的渲染规则	function	yes	iOS/Android	yes
markdownit	MarkdownIt 类的 md 实例，用于覆盖默认的 MarkdownIt 实例（默认：MarkdownIt({typographer: true})）	object	yes	iOS/Android	yes

6. 库相关变量、封装类及工具函数

改库导出了一系列内部定义的常量、封装类及工具函数

6.1. 内部定义的常量

Name	Description	Type	Required	Platform	HarmonyOS Support
renderRules	内部定义的渲染规则对象	object	no	iOS/Android	yes
styles	内部定义的样式对象	object	no	iOS/Android	yes

6.2. 封装类

Name	Description	Type	Required	Platform	HarmonyOS Support
AstRenderer	内部封装的 AST 抽象树渲染类	object	no	iOS/Android	yes
PluginContainer	内部定义的 blockPlugin 插件容器类	object	no	iOS/Android	yes
MarkdownIt	内部依赖库 markdown-it 默认导出的对象	object	no	iOS/Android	yes

6.3. 工具函数

Name	Description	Type	Required	Platform	HarmonyOS Support
applyStyle	用于将给指定的 displayName 组件转换为 Text 组件并应用 style 样式	function	no	iOS/Android	yes
getUniqueID	获取 uuid 时间戳字符串作为唯一标识	function	yes	iOS/Android	yes
openUrl	打开默认应用，跳转指定链接地址	function	yes	iOS/Android	yes
hasParents	判断指定 parents 数组中是否存在指定 type 的元素 （内部方法，不应直接调用）	function	yes	iOS/Android	yes
parser	将指定的 source 通过 renderer 方法及 MarkdownIt 对象转换为 View 组件（内部方法，不应直接调用）	function	yes	iOS/Android	yes
stringToTokens	将指定的 source 通过 MarkdownIt 对象的 parse 方法转换为 token 数组（内部方法，不应直接调用）	function	yes	iOS/Android	yes
tokensToAST	将 token 数组转换为 AST 抽象树（内部方法，不应直接调用）	function	yes	iOS/Android	yes
blockPlugin	js 插件方法,用于提供对 Markdown 中 Blockquotes 语法的支持	function	yes	iOS/Android	yes

7. 遗留问题

8. 其他

9. 开源协议

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