From ec2e73abaa5bce37dc838579db0689f58dc354d9 Mon Sep 17 00:00:00 2001 From: AllisonZhou Date: Wed, 6 Mar 2024 18:13:53 +0800 Subject: [PATCH 1/5] =?UTF-8?q?[Issues:=20#I96BQ6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-markdown-display=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-markdown-display.md | 125 ++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 1224/react-native-markdown-display.md diff --git a/1224/react-native-markdown-display.md b/1224/react-native-markdown-display.md new file mode 100644 index 00000000..76f4ce63 --- /dev/null +++ b/1224/react-native-markdown-display.md @@ -0,0 +1,125 @@ +> 模板版本：v0.1.3 + +

+

react-native-markdown-display

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-markdown-display Releases](https://github.com/react-native-oh-library/react-native-markdown-display/releases/tag/7.0.2-0.0.1)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-markdown-display@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-markdown-display@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import React from 'react'; +import { SafeAreaView, ScrollView, StatusBar } from 'react-native'; + +import Markdown from 'react-native-markdown-display'; + +const copy = `# h1 Heading 8-) + +**This is some bold text!** + +This is normal text +`; + +const App: () => React$Node = () => { + return ( + <> + + + + + {copy} + + + + + ); +}; + +export default App; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-markdown-display Releases](https://github.com/react-native-oh-library/react-native-markdown-display/releases/tag/7.0.2-0.0.1) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情请查看[react-native-markdown-display]( https://github.com/iamacup/react-native-markdown-display/blob/master/README.md) + +如下是已经鸿蒙化的属性： + +> [!tip] "鸿蒙支持"列为 yes 的属性表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 + +| Name | Description | Default | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| `children` | The markdown string to render, or the [pre-processed tree](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#pre-processing) | N/A | Yes | All | yes | +| `style` | An object to override the styling for the various rules, [see style section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules-and-styles) for more info | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | No | All | yes | +| `mergeStyle` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | `true` | No | All | yes | +| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules) for more info | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | No | All | yes | +| `onLinkPress` | A handler function to change click behaviour, [see handling links section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#handling-links) for more info | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | No | All | yes | +| `debugPrintTree` | Will print the AST tree to the console to help you see what the markdown is being translated to | `false` | No | All | yes | +| `renderer` | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. | `instanceOf(AstRenderer)` | No | All | yes | +| `markdownit` | A custom markdownit instance with your configuration, default is `MarkdownIt({typographer: true})` | `instanceOf(MarkdownIt)` | No | All | yes | +| `maxTopLevelChildren` | If defined as a number will only render out first `n` many top level children, then will try to render out `topLevelMaxExceededItem` | `null` | No | All | yes | +| `topLevelMaxExceededItem` | Will render when `maxTopLevelChildren` is hit. Make sure to give it a key! | `...` | No | All | yes | +| `allowedImageHandlers` | Any image that does not start with one of these will have the `defaultImageHandler` value prepended to it (unless `defaultImageHandler` is null in which case it won't try to render anything) | `['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://']` | No | All | yes | +| `defaultImageHandler` | Will be prepended to an image url if it does not start with something in the `allowedImageHandlers` array, if this is set to null, it won't try to recover but will just not render anything instead. | `http://` | No | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee From f1b47d6377d95a06b22601fa2a389e5ea8fb0df0 Mon Sep 17 00:00:00 2001 From: AllisonZhou Date: Thu, 7 Mar 2024 16:56:29 +0800 Subject: [PATCH 2/5] =?UTF-8?q?[Issues:=20#I96BQ6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-markdown-display=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-markdown-display.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/1224/react-native-markdown-display.md b/1224/react-native-markdown-display.md index 76f4ce63..b9cf3373 100644 --- a/1224/react-native-markdown-display.md +++ b/1224/react-native-markdown-display.md @@ -13,7 +13,7 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig) +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig) ## 安装与使用 @@ -28,13 +28,13 @@ #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-markdown-display@file:# +npm install @react-native-oh-tpl/react-native-markdown-display ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-markdown-display@file:# +yarn add @react-native-oh-tpl/react-native-markdown-display ``` @@ -79,17 +79,19 @@ export default App; ## Link -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +目前鸿蒙暂不支持` AutoLink`，所以` Link` 步骤需要手动配置。 -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony +首先需要使用 `DevEco Studio` 打开项目里的鸿蒙工程 `harmony` -## 兼容性 +## 约束与限制 + +### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-markdown-display Releases](https://github.com/react-native-oh-library/react-native-markdown-display/releases/tag/7.0.2-0.0.1) -## 属性 +### 属性 > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -103,10 +105,10 @@ export default App; | Name | Description | Default | Required | Platform | HarmonyOS Support | | ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| `children` | The markdown string to render, or the [pre-processed tree](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#pre-processing) | N/A | Yes | All | yes | -| `style` | An object to override the styling for the various rules, [see style section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules-and-styles) for more info | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | No | All | yes | +| `children` | The markdown string to render, or the [pre-processed tree](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#pre-processing) | N/A | Yes | All | yes | +| `style` | An object to override the styling for the various rules, [see style section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#rules-and-styles) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/styles.js) | No | All | yes | | `mergeStyle` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | `true` | No | All | yes | -| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules) for more info | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | No | All | yes | +| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/renderRules.js) | No | All | yes | | `onLinkPress` | A handler function to change click behaviour, [see handling links section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#handling-links) for more info | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | No | All | yes | | `debugPrintTree` | Will print the AST tree to the console to help you see what the markdown is being translated to | `false` | No | All | yes | | `renderer` | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. | `instanceOf(AstRenderer)` | No | All | yes | -- Gitee From 103195ed8f3ae1ff6899c2dd1f069f09f9e30683 Mon Sep 17 00:00:00 2001 From: AllisonZhou Date: Mon, 11 Mar 2024 19:22:55 +0800 Subject: [PATCH 3/5] =?UTF-8?q?[Issues:=20#I96BQ6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-markdown-display=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-markdown-display.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1224/react-native-markdown-display.md b/1224/react-native-markdown-display.md index b9cf3373..ce946647 100644 --- a/1224/react-native-markdown-display.md +++ b/1224/react-native-markdown-display.md @@ -108,8 +108,8 @@ export default App; | `children` | The markdown string to render, or the [pre-processed tree](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#pre-processing) | N/A | Yes | All | yes | | `style` | An object to override the styling for the various rules, [see style section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#rules-and-styles) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/styles.js) | No | All | yes | | `mergeStyle` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | `true` | No | All | yes | -| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#rules) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/renderRules.js) | No | All | yes | -| `onLinkPress` | A handler function to change click behaviour, [see handling links section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig_dev#handling-links) for more info | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | No | All | yes | +| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#rules) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/renderRules.js) | No | All | yes | +| `onLinkPress` | A handler function to change click behaviour, [see handling links section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#handling-links) for more info | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | No | All | yes | | `debugPrintTree` | Will print the AST tree to the console to help you see what the markdown is being translated to | `false` | No | All | yes | | `renderer` | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. | `instanceOf(AstRenderer)` | No | All | yes | | `markdownit` | A custom markdownit instance with your configuration, default is `MarkdownIt({typographer: true})` | `instanceOf(MarkdownIt)` | No | All | yes | -- Gitee From 740b3fd696b1f93e95d76d0f2a2e104ade322448 Mon Sep 17 00:00:00 2001 From: Allison_zhou Date: Thu, 14 Mar 2024 14:48:19 +0800 Subject: [PATCH 4/5] =?UTF-8?q?[Issues:=20#I96BQ6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-markdown-display=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-markdown-display.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1224/react-native-markdown-display.md b/1224/react-native-markdown-display.md index ce946647..6e53e3fd 100644 --- a/1224/react-native-markdown-display.md +++ b/1224/react-native-markdown-display.md @@ -87,9 +87,9 @@ export default App; ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +在以下版本验证通过 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-markdown-display Releases](https://github.com/react-native-oh-library/react-native-markdown-display/releases/tag/7.0.2-0.0.1) +- RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：204.1.0.59; ### 属性 -- Gitee From 0e03397aca681be843d6c6460c55bb7f87c47c94 Mon Sep 17 00:00:00 2001 From: Allison_zhou Date: Thu, 14 Mar 2024 14:54:20 +0800 Subject: [PATCH 5/5] =?UTF-8?q?[Issues:=20#I96BQ6]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-markdown-display=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-markdown-display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1224/react-native-markdown-display.md b/1224/react-native-markdown-display.md index 6e53e3fd..c801ad00 100644 --- a/1224/react-native-markdown-display.md +++ b/1224/react-native-markdown-display.md @@ -124,4 +124,4 @@ export default App; ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-markdown-display/blob/sig/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee