在 React Native 中渲染 HTML
Posted
技术标签:
【中文标题】在 React Native 中渲染 HTML【英文标题】：Render HTML in React Native 【发布时间】：2015-06-02 19:20:26 【问题描述】：在我的 React Native 应用程序中，我正在提取具有如下原始 html 元素的 JSON 数据：<p>This is some text. Let&#8217;s figure out...</p>
我已将数据添加到我的应用中的视图中，如下所示：
<Text>this.props.content</Text>
问题是 HTML 是原始的，它不像在浏览器中那样呈现。有没有办法让我的 JSON 数据在我的应用视图中看起来像在浏览器中一样？
【问题讨论】：
在 React 中，有dangerouslySetInnerHTML 属性 (facebook.github.io/react/docs/jsx-gotchas.html) 来显示 HTML。我现在无法测试它，但它也可以与 Native 一起使用。
其实我试过了：<Text dangerouslySetInnerHTML=__html: this.props.content ></Text> 没有用，除非我做错了什么。
检查这个：gist.github.com/jsdf/7f983f2cd955fd75d6cc
github.com/react-native-community/react-native-webview 似乎是实现这一目标的最新组件。
【参考方案1】：
2021 年 1 月编辑：React Native 文档目前推荐 React Native WebView：
<WebView
originWhitelist=['*']
source= html: '<p>Here I am</p>'
/>
https://github.com/react-native-webview/react-native-webview
如果您不想嵌入 WebView，也有第三方库可以将 HTML 渲染到原生视图中：
react-native-render-html
react-native-htmlview
2017 年 3 月编辑：html 属性已被弃用。请改用source：
<WebView source=html: '<p>Here I am</p>' />
https://facebook.github.io/react-native/docs/webview.html#html
感谢Justin 指出这一点。
2017 年 2 月编辑：PR 不久前被接受，因此要在 React Native 中呈现 HTML，只需：
<WebView html='<p>Here I am</p>' />
原答案：
我认为目前这是不可能的。您看到的行为是预期的，因为 Text 组件只输出......好吧，文本。您需要另一个输出 HTML 的组件 - 这就是 WebView。
不幸的是，现在没有办法直接在这个组件上设置 HTML：
https://github.com/facebook/react-native/issues/506
不过，我刚刚创建了 this PR，它实现了此功能的基本版本，因此希望它很快会以某种形式出现。
【讨论】：
很棒的科林，谢谢你这样做！我会关注github问题。 根据版本 0.42 (facebook.github.io/react-native/docs/webview.html#html) 的文档， html 属性已被弃用。它现在说它应该与 source 属性一起使用。<WebView source= html: '<p>Here I am</p>' />.
文档现在说 Note that static HTML will require setting originWhitelist to ["*"]. 虽然我无法让它工作。
伙计，这看起来很棒，除了我将<WebView source=html: '<p>Here I am</p>' /> 粘贴到我的组件中并且它没有渲染任何东西！帮助！ （我会同时尝试react-native-render-html）
react-native WebView 现已弃用：请改用 react-native-community/react-native-webview。【参考方案2】：
我找到了这个组件。 https://github.com/jsdf/react-native-htmlview
该组件采用 HTML 内容并将其呈现为原生视图，具有可自定义的样式和链接处理等。
【讨论】：
带有 CSS 的 HTML 样式不适用于 react-native-htmlview。如果这是一个问题，我不推荐它。 也不推荐。 现在是 2019 年，我看不到现代的、最近更新的、可用的选项！ 实际上它确实帮助我在滚动视图中渲染具有高度的html，谢谢 @RenatoBack 如果您需要内联 CSS 支持，请参阅 ***.com/a/54899575/2779871【参考方案3】：一个纯 javascript react-native 组件，可将您的 HTML 呈现为 100% 原生视图。它的可定制性极高且易于使用，旨在能够渲染您扔给它的任何东西。
react-native-render-html
与嵌入式WebViews 相比，使用此组件将改善您的应用程序内存占用和性能。
安装
npm install react-native-render-html --save or yarn add react-native-render-html
基本用法
import React from "react";
import ScrollView, useWindowDimensions from "react-native";
import RenderHTML from "react-native-render-html";
const html = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default function App()
// Allow images to scale to available width
// with contentWidth prop.
const width = useWindowDimensions();
return (
<ScrollView style= flex: 1 >
<RenderHTML contentWidth=width source= html />
</ScrollView>
);
RenderHTML Props reference
您可以通过类名、标签自定义元素的样式，甚至可以register custom renders for tags。有关the official website 的更多信息。
【讨论】：
我认为从 react-native-render-html 版本 6.0.0 开始，该行实际上应该是：我使用Js函数替换很简单。
<Text>item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")</Text>
【讨论】：
您能否添加一些有关此功能或如何/为何工作的信息？ 这不会呈现 HTML，它只会去除任何 html 内容。【参考方案5】：React Native 更新了 WebView 组件以允许直接呈现 html。这是一个适合我的示例
var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";
<WebView
ref='webview'
automaticallyAdjustContentInsets=false
style=styles.webView
html=htmlCode />
【讨论】：
html 属性是now deprecated。请改用 source 属性。【参考方案6】： <WebView ref='webview' automaticallyAdjustContentInsets=false source=require('../Assets/aboutus.html') />
这对我有用 :) 我有关于我们的 html 文本文件。
【讨论】：
【参考方案7】：import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";
<HTML source=html: htmlCode/>
【讨论】：
以上是关于在 React Native 中渲染 HTML的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 redux 让根组件在 react-native 中重新渲染（开源项目）