From 51ccde39b79f46dcc98fb86074552551a37325a8 Mon Sep 17 00:00:00 2001 From: chongtiantian Date: Mon, 24 Nov 2025 11:26:29 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:#ID87VS]=20=E5=A2=9E=E5=8A=A00.?= =?UTF-8?q?77=20RN=20=E7=89=88=E6=9C=AC=E4=BF=A1=E6=81=AF=20react-native-r?= =?UTF-8?q?ender-html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: chongtiantian --- en/react-native-render-html.md | 7 ++++ zh-cn/react-native-render-html.md | 70 +++++++++++++++++-------------- 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/en/react-native-render-html.md b/en/react-native-render-html.md index eaa1ad753..a3990285b 100644 --- a/en/react-native-render-html.md +++ b/en/react-native-render-html.md @@ -16,6 +16,12 @@ ## Installation and Usage +Please go to the Releases release address of the third-party library to view the supporting version information: [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases). For older versions that are not published to npm, install the tgz package by referring to the [Installation Guide](/en/tgz-usage-en.md). + +| Version | Releases info | Support RN version | +| ------------ | ------------------------------------------------------------ | ---------- | +| 6.3.4 | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | 0.72/0.77 | + Go to the project directory and execute the following instruction: @@ -64,6 +70,7 @@ This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.403; ROM：3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release; IDE: DevEco Studio 5.1.1.830; ROM：NEXT 5.1.0.150; ## Properties diff --git a/zh-cn/react-native-render-html.md b/zh-cn/react-native-render-html.md index 981310909..16e8cfdf1 100644 --- a/zh-cn/react-native-render-html.md +++ b/zh-cn/react-native-render-html.md @@ -17,6 +17,12 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ------------ | ------------------------------------------------------------ | ---------- | +| 6.3.4 | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | 0.72/0.77 | + 进入到工程目录并输入以下命令： @@ -67,7 +73,7 @@ export default function App() { 1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE：DevEco Studio 5.0.3.403; ROM：3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; - +3. RNOH：0.77.18; SDK：HarmonyOS 5.1.1 Release; IDE: DevEco Studio 5.1.1.830; ROM：NEXT 5.1.0.150; ## 属性 @@ -80,37 +86,37 @@ export default function App() { | Name | Description | Type | Required | Platform | HarmonyOS Support | |----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------|----------|---------------|-------------------| -| allowedStyles | Whitelist specific inline CSS style properties and ignore the others. | CSSPropertyNameList | NO | Android、iOS | Yes | -| baseStyle | The default style for the document (root). Inheritable styles will be transferred to children. That works also for textual styles. | MixedStyleDeclaration | NO | Android、iOS | Yes | -| classesStyles | Provide mixed styles to target elements selected by CSS classes. | Readonly> | NO | Android、iOS | 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 | Android、iOS | 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 | Android、iOS | Yes | -| customHTMLElementModels | Customize element models for target tags. | HTMLElementModelRecord | NO | Android、iOS | Yes | -| dangerouslyDisableHoisting | Disable hoisting. Especially useful for rendering with react-native-web.Note that your layout might break in native! | boolean | NO | Android、iOS | Yes | -| dangerouslyDisableWhitespaceCollapsing | Disable whitespace collapsing. Especially useful if your html is being pre-processed server-side with a minifier. | boolean | NO | Android、iOS | Yes | -| debug | Log to the console a snapshot of the rendered TDocument after each transient render tree invalidation. | boolean | NO | Android、iOS | Yes | -| defaultTextProps | Default props for Text elements in the render tree. | TextProps | NO | Android、iOS | Yes | -| defaultViewProps | Default props for View elements in the render tree. | ViewProps | NO | Android、iOS | 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 | Android、iOS | Yes | -| emSize | The default value in pixels for 1em. | number | NO | Android、iOS | Yes | -| enableCSSInlineProcessing | Enable or disable inline CSS processing of inline styles. | boolean | NO | Android、iOS | Yes | -| enableExperimentalBRCollapsing | Recommended value is `true` on non-web platforms. Also note that this is an experimental feature, thus subject to behavioral instability. | boolean | NO | Android、iOS | Yes | -| enableExperimentalMarginCollapsing | Enable or disable margin collapsing CSS behavior (experimental!). | boolean | NO | Android、iOS | Yes | -| idsStyles | Enable or disable margin collapsing CSS behavior (experimental!). | boolean | NO | Android、iOS | Yes | -| ignoreDomNode | Ignore specific DOM nodes. | (node: Node, parent: NodeWithChildren) => unknown | NO | Android、iOS | Yes | -| ignoredDomTags | A list of lowercase tags which should not be included in the DOM. | Array | NO | Android、iOS | Yes | -| ignoredStyles | Blacklist specific inline CSS style properties and allow the others. | CSSPropertyNameList | NO | Android、iOS | Yes | -| bypassAnonymousTPhrasingNodes | The most simple one is that itsimplifies the render tree | boolean | NO | Android、iOS | Yes | -| onDocumentMetadataLoaded | Handler invoked when the document metadata is available. It will re-trigger on HTML content changes. | (documentMetadata: DocumentMetadata) => void | NO | Android、iOS | Yes | -| onHTMLLoaded | Triggered when HTML is available to the RenderHTML component. | (html: string) => void | NO | Android、iOS | Yes | -| onTTreeChange | Triggered when the transient render tree changes. Useful for debugging. | (ttree: TDocument) => void | NO | Android、iOS | Yes | -| renderers | Your custom renderers. | CustomTagRendererRecor | NO | Android、iOS | Yes | -| selectDomRoot | Select the DOM root before TTree generation. For example, you could iterate over children until you reach an article element and return this element. | TRenderEngineOptions | NO | Android、iOS | Yes | -| setMarkersForTNode | Set custom markers from a TNode and all its descendants. Markers will be accessible in custom renderers via `tnode.markers` prop. | SetMarkersForTNode | NO | Android、iOS | Yes | -| source | The object source to render (either { uri }, { html } or { dom }). | HTMLSource | Yes | Android、iOS | Yes | -| renderersProps | Props to use in custom renderers with useRendererProps. | Partial | NO | Android、iOS | Yes | -| systemFonts | A list of fonts available in the current platform. These fonts will be used to select the first match in CSS `fontFamily` property, which supports a comma-separated list of fonts. By default, a handful of fonts are selected per platform. | Array | No | Android、iOS | Yes | -| tagsStyles | Provide mixed styles to target HTML tag names. | Readonly> | NO | Android、iOS | Yes | +| allowedStyles | 将特定的内联CSS样式属性列入白名单，并忽略其他属性。 | CSSPropertyNameList | NO | Android、iOS | Yes | +| baseStyle | 文档的默认样式（根）。可继承的样式将传递给子对象。这也适用于文本风格。 | MixedStyleDeclaration | NO | Android、iOS | Yes | +| classesStyles | 为CSS类选择的目标元素提供混合样式。 | Readonly> | NO | Android、iOS | Yes | +| computeEmbeddedMaxWidth | 一个函数，它接受contentWidth和tagName作为参数，并返回一个新的宽度。可以返回Infinity来表示不受约束的宽度。 | (contentWidth: number, tagName: string) => number | NO | Android、iOS | Yes | +| contentWidth | 要显示的HTML内容的宽度。建议的做法是传递useWindowDimensions（）.width减去任何填充或边距。 | number | NO | Android、iOS | Yes | +| customHTMLElementModels | 为目标标记自定义元素模型。 | HTMLElementModelRecord | NO | Android、iOS | Yes | +| dangerouslyDisableHoisting | 禁止起吊。特别适用于使用react native web进行渲染。请注意，您的布局可能会在本地中断！ | boolean | NO | Android、iOS | Yes | +| dangerouslyDisableWhitespaceCollapsing | 禁用空白折叠。如果您的html正在使用minifier在服务器端进行预处理，则特别有用。 | boolean | NO | Android、iOS | Yes | +| debug | 在每次瞬态渲染树失效后，将渲染的TDocument的快照记录到控制台。 | boolean | NO | Android、iOS | Yes | +| defaultTextProps | 渲染树中文本元素的默认道具。 | TextProps | NO | Android、iOS | Yes | +| defaultViewProps | 渲染树中View元素的默认道具。 | ViewProps | NO | Android、iOS | Yes | +| domVisitors | 当解析DOM元素或文本节点并附加其子节点时，将调用回调的对象。这对于篡改dom、删除子节点、插入节点、更改文本节点数据非常有用。……等等。 | DomVisitorCallbacks | NO | Android、iOS | Yes | +| emSize | 1em的默认像素值。 | number | NO | Android、iOS | Yes | +| enableCSSInlineProcessing | 启用或禁用内联样式的内联CSS处理。 | boolean | NO | Android、iOS | Yes | +| enableExperimentalBRCollapsing | 建议值在非网络平台上为“true”。另请注意，这是一个实验性特征，因此会受到行为不稳定的影响。 | boolean | NO | Android、iOS | Yes | +| enableExperimentalMarginCollapsing | 启用或禁用边距折叠CSS行为（实验！）。 | boolean | NO | Android、iOS | Yes | +| idsStyles | 启用或禁用边距折叠CSS行为（实验！）。 | boolean | NO | Android、iOS | Yes | +| ignoreDomNode | 忽略特定的DOM节点。 | (node: Node, parent: NodeWithChildren) => unknown | NO | Android、iOS | Yes | +| ignoredDomTags | DOM中不应包含的小写标签列表。 | Array | NO | Android、iOS | Yes | +| ignoredStyles | 将特定的内联CSS样式属性列入黑名单，并允许其他属性。 | CSSPropertyNameList | NO | Android、iOS | Yes | +| bypassAnonymousTPhrasingNodes | 最简单的一个是它简化了渲染树 | boolean | NO | Android、iOS | Yes | +| onDocumentMetadataLoaded | 当文档元数据可用时调用处理程序。它将在HTML内容更改时重新触发。 | (documentMetadata: DocumentMetadata) => void | NO | Android、iOS | Yes | +| onHTMLLoaded | 当HTML可用于RenderHTML组件时触发。 | (html: string) => void | NO | Android、iOS | Yes | +| onTTreeChange | 当瞬态渲染树发生变化时触发。可用于调试。 | (ttree: TDocument) => void | NO | Android、iOS | Yes | +| renderers | 您的自定义渲染器。 | CustomTagRendererRecor | NO | Android、iOS | Yes | +| selectDomRoot | 在生成TTree之前选择DOM根。例如，您可以迭代子元素，直到到达article元素并返回此元素。 | TRenderEngineOptions | NO | Android、iOS | Yes | +| setMarkersForTNode | 从TNode及其所有子体设置自定义标记。标记将在自定义渲染器中通过`tnode.markets`道具访问。 | SetMarkersForTNode | NO | Android、iOS | Yes | +| source | 要呈现的对象源（｛uri｝、｛html｝或｛dom｝）。 | HTMLSource | Yes | Android、iOS | Yes | +| renderersProps | 使用useRenderProps在自定义渲染器中使用的道具。 | Partial | NO | Android、iOS | Yes | +| systemFonts | 当前平台中可用的字体列表。这些字体将用于选择CSS“fontFamily”属性中的第一个匹配项，该属性支持逗号分隔的字体列表。默认情况下，每个平台都会选择几种字体。 | Array | No | Android、iOS | Yes | +| tagsStyles | 为目标HTML标记名提供混合样式。 | Readonly> | NO | Android、iOS | Yes | ## 遗留问题 -- Gitee