From 7487b2c4fa236532116768dcecf69b0b407ade28 Mon Sep 17 00:00:00 2001 From: liu-bug123 <1518171514@qq.com> Date: Fri, 12 Jan 2024 15:35:20 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8VOBX]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-render-html=E6=96=87=E6=A1=A3=E5=88=B01124?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-render-html.md | 112 +++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 1224/react-native-render-html.md diff --git a/1224/react-native-render-html.md b/1224/react-native-render-html.md new file mode 100644 index 00000000..14e717d1 --- /dev/null +++ b/1224/react-native-render-html.md @@ -0,0 +1,112 @@ +> 模板版本：v0.1.2 + +

+

react-native-render-html

+

+

+ + Supported platforms + + + License + +

+ +>[!tip] [Github 地址](https://github.com/meliorence/react-native-render-html) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add react-native-render-html +``` +#### **npm** + +```bash +npm install react-native-render-html +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React from 'react'; +import { useWindowDimensions } from 'react-native'; +import RenderHtml from 'react-native-render-html'; + +const source = { + html: ` +

+ Hello World! +

` +}; + +export default function App() { + const { width } = useWindowDimensions(); + return ( + + ); +} +``` + +## 约束与限制 + +### 兼容性 + + 在下述版本验证通过： + + 1. IDE：DevEco Studio 4.1.3.313;SDK：OpenHarmony(api11) 4.1.0.52;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(C00E52R1P17log);RNOH：0.72.11 + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +以下属性已验证，详情见 [react-native-render-html源库地址](https://github.com/meliorence/react-native-render-html) + +**组件 RenderHtml** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ---- | ---- | -------- | -------- | -------- | +| allowedStyles | Whitelist specific inline CSS style properties and ignore the others. | CSSPropertyNameList | NO | All | Yes | +| baseStyle | The default style for the document (root). Inheritable styles will be transferred to children. That works also for textual styles. | MixedStyleDeclaration | NO | All | Yes | +| classesStyles | Provide mixed styles to target elements selected by CSS classes. | Readonly> | NO | All | Yes | +| computeEmbeddedMaxWidth | A function which takes contentWidth and tagName as arguments and returns a new width. Can return Infinity to denote unconstrained widths. | (contentWidth: number, tagName: string) => number | NO | All | Yes | +| contentWidth | The width of the HTML content to display. The recommended practice is to pass useWindowDimensions().width minus any padding or margins. | number | NO | All | Yes | +| customHTMLElementModels | Customize element models for target tags. | HTMLElementModelRecord | NO | All | Yes | +| defaultTextProps | Default props for Text elements in the render tree. | TextProps | NO | All | Yes | +| defaultViewProps | Default props for View elements in the render tree. | ViewProps | NO | All | Yes | +| domVisitors | An object which callbacks will be invoked when a DOM element or text node has been parsed and its children attached. This is great to tamper the dom, remove children, insert nodes, change text nodes data... etc. | DomVisitorCallbacks | NO | All | Yes | +| emSize | The default value in pixels for 1em. | number | NO | All | Yes | +| enableCSSInlineProcessing | Enable or disable inline CSS processing of inline styles. | boolean | NO | All | Yes | +| enableExperimentalMarginCollapsing | Enable or disable margin collapsing CSS behavior (experimental!). | boolean | NO | All | Yes | +| idsStyles | Enable or disable margin collapsing CSS behavior (experimental!). | boolean | NO | All | Yes | +| ignoreDomNode | Ignore specific DOM nodes. | (node: Node, parent: NodeWithChildren) => unknown | NO | All | Yes | +| ignoredDomTags | A list of lowercase tags which should not be included in the DOM. | Array | NO | All | Yes | +| ignoredStyles | Blacklist specific inline CSS style properties and allow the others. | CSSPropertyNameList | NO | All | Yes | +| onDocumentMetadataLoaded | Handler invoked when the document metadata is available. It will re-trigger on HTML content changes. | (documentMetadata: DocumentMetadata) => void | NO | All | Yes | +| onHTMLLoaded | Triggered when HTML is available to the RenderHTML component. | (html: string) => void | NO | All | Yes | +| onTTreeChange | Triggered when the transient render tree changes. Useful for debugging. | (ttree: TDocument) => void | NO | All | Yes | +| renderers | Your custom renderers. | CustomTagRendererRecor | NO | All | Yes | +| source | The object source to render (either { uri }, { html } or { dom }). | HTMLSource | Yes | All | partially(已验证html) | +| renderersProps | Props to use in custom renderers with useRendererProps. | Partial| NO | All | partially(已验证img的百分比属性enableExperimentalPercentWidth) | +| tagsStyles | Provide mixed styles to target HTML tag names. | Readonly>| NO | All | Yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/meliorence/react-native-render-html/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From fb3d974cf0b7a32a56388e9f91f30cff924553e3 Mon Sep 17 00:00:00 2001 From: liu-bug123 <1518171514@qq.com> Date: Fri, 12 Jan 2024 16:37:46 +0800 Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8VOBX]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-render-html=E6=96=87=E6=A1=A3=E5=88=B01124=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E9=81=97=E7=95=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-render-html.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/1224/react-native-render-html.md b/1224/react-native-render-html.md index 14e717d1..eb822be2 100644 --- a/1224/react-native-render-html.md +++ b/1224/react-native-render-html.md @@ -23,12 +23,12 @@ #### **yarn** ```bash -yarn add react-native-render-html +yarn add react-native-render-html@^6.3.4 ``` #### **npm** ```bash -npm install react-native-render-html +npm install react-native-render-html@^6.3.4 ``` @@ -105,6 +105,8 @@ export default function App() { ## 遗留问题 +- [ ] img的宽度不会随着contentWidth的动态修改而更改（由RN基座引起） + ## 其他 ## 开源协议 -- Gitee From 9c3d60e00347de669db139e440365881666b5fe0 Mon Sep 17 00:00:00 2001 From: liu-bug123 <1518171514@qq.com> Date: Fri, 12 Jan 2024 17:08:54 +0800 Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8VOBX]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-render-html=E6=96=87=E6=A1=A3=E5=88=B01124=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E9=81=97=E7=95=99=E9=97=AE=E9=A2=98=E6=8F=8F=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-render-html.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1224/react-native-render-html.md b/1224/react-native-render-html.md index eb822be2..0a8ba48f 100644 --- a/1224/react-native-render-html.md +++ b/1224/react-native-render-html.md @@ -105,7 +105,7 @@ export default function App() { ## 遗留问题 -- [ ] img的宽度不会随着contentWidth的动态修改而更改（由RN基座引起） +- [ ] img的宽度不会随着contentWidth的动态修改而更改（由RN基座引起，RNImage组件更新状态时this.descriptorWrapper没有重新赋值） ## 其他 -- Gitee